docs: stage-1 i18n coverage + news
This commit is contained in:
sanbuphy
+61
-85
@@ -1,29 +1,34 @@
|
||||
# 🚀 部署说明
|
||||
# Deployment Notes
|
||||
|
||||
## Base 路径自动适配
|
||||
## Base Path Auto-Adaptation
|
||||
|
||||
本项目的 VitePress 配置已经正确处理了 **Vercel** 和 **GitHub Pages** 两种部署环境的不同 base 路径。
|
||||
This project is a VitePress site that can be deployed to both **Vercel** and **GitHub Pages**. The main difference is the `base` path:
|
||||
|
||||
### 自动适配逻辑
|
||||
- Vercel: typically `/`
|
||||
- GitHub Pages: typically `/easy-vibe/`
|
||||
|
||||
```javascript
|
||||
The VitePress config handles this automatically:
|
||||
|
||||
```js
|
||||
// docs/.vitepress/config.mjs
|
||||
const isVercel = process.env.VERCEL === '1'
|
||||
const base = isVercel ? '/' : '/easy-vibe/'
|
||||
```
|
||||
|
||||
### 部署环境对比
|
||||
## Environment Comparison
|
||||
|
||||
| 平台 | Base 路径 | 示例 URL |
|
||||
| ---------------- | ------------- | ----------------------------------------------------------- |
|
||||
| **Vercel** | `/` | `https://your-project.vercel.app/cn/stage-1/...` |
|
||||
| **GitHub Pages** | `/easy-vibe/` | `https://datawhalechina.github.io/easy-vibe/cn/stage-1/...` |
|
||||
| **本地开发** | `/easy-vibe/` | `http://localhost:5173/easy-vibe/cn/stage-1/...` |
|
||||
| **本地预览** | `/easy-vibe/` | `http://localhost:4173/easy-vibe/cn/stage-1/...` |
|
||||
| Platform | Base | Example URL |
|
||||
| --- | --- | --- |
|
||||
| Vercel | `/` | `https://your-project.vercel.app/en/stage-1/...` |
|
||||
| GitHub Pages | `/easy-vibe/` | `https://datawhalechina.github.io/easy-vibe/en/stage-1/...` |
|
||||
| Local dev | `/easy-vibe/` | `http://localhost:5173/easy-vibe/en/stage-1/...` |
|
||||
| Local preview | `/easy-vibe/` | `http://localhost:4173/easy-vibe/en/stage-1/...` |
|
||||
|
||||
### 首页动态链接
|
||||
## Home Redirect And Dynamic Links
|
||||
|
||||
首页使用 VitePress 的 `useData()` API 来动态获取 base 路径：
|
||||
The home page uses VitePress `withBase()` and `useData()` to avoid hardcoding the base path.
|
||||
|
||||
Example:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
@@ -34,86 +39,57 @@ const base = site.value.base
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a :href="base + 'cn/stage-1/learning-map/'">
|
||||
<!-- 链接会自动适配部署环境 -->
|
||||
</a>
|
||||
<a :href="base + 'en/stage-1/learning-map/'">Go</a>
|
||||
</template>
|
||||
```
|
||||
|
||||
**优点**：
|
||||
## Deploy Steps
|
||||
|
||||
- ✅ 无需硬编码 fallback 值
|
||||
- ✅ 自动适配 Vercel 和 GitHub Pages
|
||||
- ✅ 构建时和运行时都正确
|
||||
### Vercel
|
||||
|
||||
## 部署步骤
|
||||
1. Push code to GitHub.
|
||||
2. Import the repo in Vercel (or connect it).
|
||||
3. Vercel will build automatically (see `vercel.json`).
|
||||
|
||||
### Vercel 部署
|
||||
Vercel usually sets `VERCEL=1` automatically.
|
||||
|
||||
1. 推送代码到 GitHub
|
||||
2. Vercel 会自动检测 `vercel.json` 配置
|
||||
3. 自动构建并部署
|
||||
4. 访问 `https://your-project.vercel.app`
|
||||
### GitHub Pages
|
||||
|
||||
**环境变量**：Vercel 自动设置 `VERCEL=1`
|
||||
|
||||
### GitHub Pages 部署
|
||||
|
||||
1. 配置 GitHub Pages 设置：
|
||||
- Source: `gh-pages` 分支
|
||||
- 或使用 GitHub Actions 从 `main` 分支部署
|
||||
|
||||
2. 构建命令：
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
3. 访问 `https://datawhalechina.github.io/easy-vibe`
|
||||
|
||||
## 验证部署
|
||||
|
||||
部署后检查以下链接是否正常：
|
||||
|
||||
- [ ] 首页能正常访问
|
||||
- [ ] 导航栏链接能正确跳转
|
||||
- [ ] 首页卡片"查看详情"链接正确
|
||||
- [ ] 语言切换功能正常
|
||||
- [ ] 图片资源能正常加载
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q: Vercel 部署后链接变成 `/easy-vibe/cn/...` 导致 404
|
||||
|
||||
**原因**：Vercel 环境变量未正确设置
|
||||
|
||||
**解决**：
|
||||
|
||||
1. 检查 Vercel 项目设置中 `Environment Variables`
|
||||
2. 确保 `VERCEL` = `1` 已设置（通常自动设置）
|
||||
3. 重新部署
|
||||
|
||||
### Q: GitHub Pages 部署后所有链接 404
|
||||
|
||||
**原因**：缺少 `/easy-vibe/` base 路径
|
||||
|
||||
**解决**：
|
||||
|
||||
1. 检查 `docs/.vitepress/config.mjs` 中的 base 配置
|
||||
2. 确保 GitHub Pages 环境下 `isVercel = false`
|
||||
3. 重新构建并部署
|
||||
|
||||
### Q: 本地预览链接缺少 `/easy-vibe/` 前缀
|
||||
|
||||
**原因**：使用了错误的预览命令
|
||||
|
||||
**解决**：
|
||||
1. Configure GitHub Pages for the repo.
|
||||
2. Build:
|
||||
|
||||
```bash
|
||||
# 错误
|
||||
npm run preview # 默认端口 4173，但路径可能不对
|
||||
|
||||
# 正确
|
||||
npm run build
|
||||
npm run preview # 访问 http://localhost:4173/easy-vibe/
|
||||
```
|
||||
|
||||
3. Verify the published site: `https://datawhalechina.github.io/easy-vibe`
|
||||
|
||||
## Post-Deploy Checklist
|
||||
|
||||
- Home page loads.
|
||||
- Navbar links navigate correctly.
|
||||
- Locale switching works.
|
||||
- Images load correctly.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Vercel URLs include `/easy-vibe/...` and return 404
|
||||
|
||||
Cause: `VERCEL` env var is missing or not equal to `1`.
|
||||
|
||||
Fix:
|
||||
|
||||
1. Check Vercel project settings -> Environment Variables.
|
||||
2. Ensure `VERCEL=1`.
|
||||
3. Redeploy.
|
||||
|
||||
### GitHub Pages returns 404 for all routes
|
||||
|
||||
Cause: missing `/easy-vibe/` base path in the build.
|
||||
|
||||
Fix:
|
||||
|
||||
1. Check `docs/.vitepress/config.mjs` base logic.
|
||||
2. Ensure the GitHub Pages build uses `base = '/easy-vibe/'`.
|
||||
3. Rebuild and redeploy.
|
||||
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
# مقدمة المشروع
|
||||
|
||||
في عام 2025، اعتبره الكثيرون عام انطلاق برمجة الذكاء الاصطناعي. بدأ المزيد والمزيد من الأشخاص يستخدمون الذكاء الاصطناعي لكتابة التعليمات البرمجية، لكن ما ينتجونه غالبًا ما يبقى عند مستوى الألعاب - لا يعرفون كيفية تنظيم عملية التطوير باستخدام Vibe Coding، ولا يعرفون الأدوات التي يجب اختيارها، ولا يفهمون بوضوح الخطوات الحاسمة المفقودة بين النموذج الأولي والإطلاق.
|
||||
|
||||
نعتمد مسارًا عمليًا تدريجيًا من **ثلاث مراحل**: مرحلة المبتدئين للبدء السريع في برمجة الذكاء الاصطناعي من خلال الألعاب الصغيرة، والمرحلة الأولى لإتقان أسلوب العمل في Vibe Coding وإكمال نموذج أولي لتطبيق ويب، والمرحلة الثانية لتعلم التطوير الشامل والنشر، والمرحلة الثالثة لبناء تطبيقات معقدة عبر منصات متعددة.
|
||||
|
||||
تتضمن كل مرحلة مشاريع عملية كاملة، مما يتيح لك الانتقال من الألعاب إلى المنتجات الحقيقية في تحديات واقعية، وفي النهاية تمتلك **القدرة على تحويل أي فكرة إلى تطبيق قابل للاستخدام**.
|
||||
|
||||
نحن نؤمن بأن إتقان Vibe Coding مع التدريب المنهجي سيجعلك شخصيًا مطورًا شاملاً يجمع بين **تطوير الواجهة الأمامية والخلفية، وتكامل قدرات الذكاء الاصطناعي، وتصميم المنتجات**.
|
||||
|
||||
يستهدف هذا المشروع بشكل أساسي ثلاث فئات من المتعلمين:
|
||||
|
||||
- **المبتدئون (الأشخاص العاديون / الجانب المتعلق بالمنتجات والعمليات)**: مساعدة الأشخاص ذوي الخلفيات غير التقنية والمتعلمين المبتدئين على فهم المفاهيم الرئيسية وإكمال أول أداة صغيرة بالذكاء الاصطناعي أو نموذج أولي للمنتج.
|
||||
- **المطورون المتوسطون والمبتدئون (الطلاب والمطورون ذوو الأساسيات)**: إتقان vibe coding وتطوير تطبيقات الذكاء الاصطناعي الأصلية بشكل منهجي.
|
||||
- **المطورون المتقدمون (الشركات والشركات الناشئة، والمطورون المستقلون والمفتوحو المصدر)**: دعم الفرق والأفراد للبناء السريع والتحقق من التكرار لتطبيقات الذكاء الاصطناعي الأصلية.
|
||||
|
||||
## دليل المحتوى
|
||||
|
||||
### الملخص العام
|
||||
|
||||
[قاموس قدرات الذكاء الاصطناعي: المفاهيم الأساسية والمصطلحات وسيناريوهات الذكاء الاصطناعي الشائعة](/ar-sa/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### المرحلة الصفرية: روضة الأطفال
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
|
||||
| [دليل المبتدئين: خريطة التعلم](/ar-sa/stage-1/learning-map/) | نظرة عامة على مسار التعلم الكامل | ✅ |
|
||||
| [دليل المبتدئين: في عصر الذكاء الاصطناعي، التحدث يعني البرمجة](/ar-sa/stage-1/ai-capabilities-through-games/) | تجربة قدرات برمجة الذكاء الاصطناعي من خلال أمثلة مثل لعبة الثعبان | ✅ |
|
||||
|
||||
### المرحلة الأولى: مدير منتجات الذكاء الاصطناعي
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
|
||||
| [المستوى الثاني: التعرف على أدوات AI IDE](/ar-sa/stage-1/introduction-to-ai-ide/) | تعلم استخدام IDE، وإتقان هيكل الواجهة وأساليب الإدخال الفعالة | ✅ |
|
||||
| [المستوى الثالث: بناء نموذج أولي عمليًا](/ar-sa/stage-1/building-prototype/) | دورة كاملة من تحليل المنتج إلى تفكيك المتطلبات وتنفيذ نموذج أولي متعدد الصفحات | ✅ |
|
||||
| [المستوى الرابع: إضافة قدرات الذكاء الاصطناعي إلى النموذج الأولي](/ar-sa/stage-1/integrating-ai-capabilities/) | فهم وإكمال تكامل API لقدرات الذكاء الاصطناعي الشائعة (نص، صورة، فيديو) | ✅ |
|
||||
| [المستوى الخامس: مشروع عملي كامل](/ar-sa/stage-1/complete-project-practice/) | محاكاة سيناريوهات واقعية، وقبول ملاحظات المستخدمين للتكرار وإكمال عرض المشروع (يتضمن مشروعًا نهائيًا) | ✅ |
|
||||
|
||||
#### الملاحق
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
|
||||
| [الملحق أ: التفكير في المنتجات](/ar-sa/stage-1/appendix-a-product-thinking/) | إطار عمل التفكير في المنتجات من تقييم الأفكار إلى تفكيك المتطلبات و MVP | ✅ |
|
||||
| [الملحق ب: الأخطاء الشائعة والحلول](/ar-sa/stage-1/appendix-b-common-errors/) | الأخطاء الشائعة في vibe coding وطرق استكشاف الأخطاء وإصلاحها | ✅ |
|
||||
| [الملحق: من أين تأتي الأفكار](/ar-sa/stage-1/appendix-idea-sources/) | استخراج اتجاهات محددة من التطبيقات المرجعية والاتجاهات وقوائم المستثمرين | ✅ |
|
||||
| [الملحق: نموذج الماس المزدوج](/ar-sa/stage-1/appendix-double-diamond/) | فهم الإيقاع الكامل لتعريف المشكلة أولاً، ثم تطوير تصميم الحل | ✅ |
|
||||
| [الملحق: Jobs to Be Done](/ar-sa/stage-1/appendix-jobs-to-be-done/) | استخدام طريقة JTBD لفهم ما يريد المستخدمون حقًا إنجازه | ✅ |
|
||||
| [الملحق: طريقة مقابلة The Mom Test](/ar-sa/stage-1/appendix-mom-test/) | طريقة بحث للتحقق من المتطلبات من خلال مقابلات المستخدمين | ✅ |
|
||||
|
||||
### المرحلة الثانية: مهندسو التطوير المتوسطون والمبتدئون
|
||||
|
||||
#### قسم الواجهة الأمامية
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
|
||||
| استخدام lovart لإنتاج المواد | تعلم استخدام lovart لإنشاء المواد المرئية مثل الشخصيات والمشاهد دفعة واحدة، مما يوفر أساسًا للمواد لتصميم UI وتطوير الواجهة الأمامية | 🚧 |
|
||||
| مقدمة في Figma و MasterGo | استخدام أدوات التصميم لتنظيم هيكل المعلومات وبنية الصفحات، ووضع الأساس لتنفيذ الواجهة الأمامية | 🚧 |
|
||||
| بناء أول تطبيق حديث - تصميم UI | إكمال واجهة مبنية على المكونات بناءً على تصميمات، وتحقيق أول رابط من التصميم إلى التعليمات البرمجية | 🚧 |
|
||||
| تصميم الصفحات والأزرار وفقًا لمعايير تصميم UI | تعلم تنظيم هيكل الصفحة والتسلسل الهرمي للأزرار باستخدام معايير التصميم السائدة، وإنشاء مخططات تصميم بمساعدة الذكاء الاصطناعي | 🚧 |
|
||||
| [بناء لوحة هوغوورتس معًا](/ar-sa/stage-2/frontend/hogwarts-portraits/) | بناء تطبيق واجهة أمامية مع قدرات الذكاء الاصطناعي من الصفر، وربط التصميم والتطوير | 🚧 |
|
||||
|
||||
#### قسم تطوير الواجهة الخلفية
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| ما هو API | فهم واجهات HTTP ونموذج الطلب والاستجابة، التحضير لتكامل الواجهة الخلفية والاختبار المشترك | 🚧 |
|
||||
| [من قاعدة البيانات إلى Supabase](/ar-sa/stage-2/backend/database-supabase/) | تنفيذ قاعدة البيانات وAPI على Supabase، وربط نموذج البيانات بصفحات الواجهة الأمامية | 🚧 |
|
||||
| مساعدة النموذج الكبير في كتابة كود الواجهة ووثائق الواجهة | استخدام النموذج الكبير للمساعدة في إنشاء وثائق واجهة وقاعدة بيانات وكود، وتنفيذ واجهة خلفية قابلة للقراءة والاختبار | 🚧 |
|
||||
| سير عمل Git والنشر على Zeabur | إدارة الكود في سير عمل Git، ونشر التطبيق على Zeabur للإطلاق | 🚧 |
|
||||
| أدوات تطوير CLI الحديثة | استخدام أدوات برمجة CLI المعتمدة على الذكاء الاصطناعي لتسريع التطوير والتصحيح، وتشكيل سير عمل هندسي شخصي | 🚧 |
|
||||
| كيفية تكامل stripe وأنظمة الدفع الأخرى | تكامل نظام الدفع، وإكمال رابط الدفع وعملية التسوية الأساسية | 🚧 |
|
||||
| بناء أول تطبيق حديث - تطبيق شامل | دمج الواجهة الأمامية والخلفية ووحدة الدفع، وإكمال تطبيق ويب شامل قابل للإطلاق | 🚧 |
|
||||
| مكتبة مكونات الواجهة الأمامية الحديثة + Trae عمليًا | استخدام مكتبة مكونات الواجهة الأمامية الحديثة و Trae، وإكمال منتج بشكل مستقل يدعم التسجيل وتسجيل الدخول والدفع | 🚧 |
|
||||
|
||||
#### ملخص قدرات الذكاء الاصطناعي
|
||||
|
||||
| الفصل | المحتوى الرئيسي | الحالة |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [مقدمة في Dify وتكامل قاعدة المعرفة](/ar-sa/stage-2/ai-capabilities/dify-knowledge-base/) | بناء منتجات من فئة الأدوات باستخدام Dify Workflow وRAG الأساسي، كنموذج أولي لترقية التطبيقات اللاحقة | 🚧 |
|
||||
| تعلم الاستعلام عن قاموس الذكاء الاصطناعي وتكامل API متعدد الوسائط | تعلم كيفية العثور على النماذج وAPI المناسبين، ودمج قدرات الوسائط المتعددة مثل النص والصور في المنتجات | 🚧 |
|
||||
|
||||
### المرحلة الثالثة: مهندسو التطوير المتقدمون
|
||||
@@ -0,0 +1,756 @@
|
||||
# المستوى الأول: في عصر الذكاء الاصطناعي، إذا كنت تستطيع التحدث، يمكنك البرمجة
|
||||
|
||||
هذا تعليمي تعليمي **مبني على التعلم بالمشاريع**. نشجعك على اتباع الخطوات خطوة بخطوة ومحاولة إعادة إنشاء النتائج.
|
||||
لا تقلق بشأن ارتكاب الأخطاء أو تعديل المحتوى، نحن نؤمن دائمًا بأنك تستطيع القيام بذلك، تذكر دائمًا:
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
|
||||
<span style="font-size: 15px; font-weight: 500; color: #666;">الإنجاز أهم من الكمال 🐣</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'حوالي <strong>4 ساعات</strong>، يمكن إكمالها على عدة مراحل'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['ar-sa/stage-1/ai-capabilities-through-games'] ?? []
|
||||
</script>
|
||||
|
||||
## دليل هذا الفصل
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['برمجة الذكاء الاصطناعي الحوارية', 'ألعاب أصلية بالذكاء الاصطناعي', 'مشروع عملي: لعبة الثعبان']" coreOutput="لعبة ثعبان أصلية بالذكاء الاصطناعي + لعبة مبتكرة خاصة بك" expectedOutput="1 لعبة ثعبان أصلية بالذكاء الاصطناعي قابلة للتشغيل + (اختياري) 1 لعبة أو Demo أصلية بالذكاء الاصطناعي ابتكرتها بنفسك">
|
||||
|
||||
إذا كنت **لا تعرف أي شيء عن البرمجة على الإطلاق**، أو تعرف فقط القليل، فهذا الفصل مُعد لك. سنبدأ من الأساسيات: استخدام **طريقة الحوار** لجعل الذكاء الاصطناعي يساعدك في كتابة الأكواد، بدون الحاجة لحفظ القواعد أو تهيئة البيئة، يمكنك تشغيل كل شيء مباشرة على صفحة الويب.
|
||||
|
||||
ستصنع بنفسك **أول برنامج قابل للتشغيل** - لعبة ثعبان تأكل الكلمات وتكتب الشعر وترسم. من خلال هذا المشروع العملي، ستختبر ما يعنيه البرمجة بالذكاء الاصطناعي حقًا: ليس أن الذكاء الاصطناعي يحل محل تفكيرك، بل أنت تعبر عن أفكارك والذكاء الاصطناعي يساعدك على تحقيقها.
|
||||
|
||||
كل الإبداع يبدأ من الصفر إلى الواحد، يسعدنا أن ننقل لك كل جزء من الثقة والاحترافية، بالنسبة لك، **القدرة على التنفيذ هي كل ما تحتاجه**.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'التحديات والفرص', description: 'إمكانيات برمجة جديدة للناس العاديين' },
|
||||
{ title: 'استكشاف القدرات', description: 'تجربة تطوير فائقة السرعة في 60 ثانية' },
|
||||
{ title: 'مشروع عملي', description: 'بناء لعبة ثعبان أصلية بالذكاء الاصطناعي' },
|
||||
{ title: 'توسيع الإبداع', description: 'ابتكار ألعاب متنوعة' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. تحديات وفرص الأشخاص العاديين
|
||||
|
||||
الكثير من الناس لديهم حزمة من الأفكار للمنتجات: أداة صغيرة للمحاسبة، صفحة ويب لتسجيل نمو الطفل، أو حتى لعبة صغيرة. لكن بمجرد التفكير في كتابة الأكواد أو البحث عن مبرمج، يستسلمون فورًا.
|
||||
|
||||
بعد ظهور الذكاء الاصطناعي، ولأول مرة، تم منح الأشخاص العاديين إمكانية جديدة تمامًا: لا تحتاج إلى معرفة كيفية كتابة الأكواد، فقط تحتاج إلى تعلم كيف توضح للذكاء الاصطناعي ما تريده بوضوح. تُظهر [البيانات من GitHub Copilot](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics) أن أكثر من 15 مليون مطور يستخدمون الذكاء الاصطناعي في البرمجة، ومتوسط 46% من الأكواد مُنشأة بالذكاء الاصطناعي! وفي مشاريع Java تصل هذه النسبة إلى 61%.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">🚀</span>
|
||||
<span style="font-weight: bold; font-size: 16px;">قفزة في الكفاءة ومعدل التبني</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" style="margin-bottom: 24px;">
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">تحسن السرعة</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">يوم</span></div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">وقت المهمة (كان 9.6 أيام)</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">معدل التثبيت في اليوم الأول</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">معدل قبول الاقتراحات</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="line-height: 1.8; color: #606266;">
|
||||
ما يثير الحماس حقًا هو القفزة في الكفاءة: سرعة إكمال المطورين للمهام تحسنت بنسبة <b>55%</b>. ما كان يستغرق 9.6 أيام لتسليم الكود، أصبح الآن يحتاج فقط <b>2.4 يوم</b>. هذا التحسن الملحوظ في الكفاءة يوضح أن الذكاء الاصطناعي لم يعد مجرد "أداة اختيارية"، بل أصبح مساعد برمجة لا غنى عنه في عملية التطوير. تؤكد بيانات التبني أيضًا ذلك: في اليوم الذي حصلوا فيه على صلاحية الوصول، قام <b>81%</b> من المطورين بتثبيته واستخدامه فورًا؛ ومنهم <b>96%</b> بدأوا في قبول اقتراحات الكود من الذكاء الاصطناعي في نفس اليوم. بعبارة أخرى، المطورون دمجوا الذكاء الاصطناعي تقريبًا فورًا في عملهم اليومي في البرمجة.
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
بالنسبة للأشخاص العاديين، هذا الاتجاه أكثر أهمية: إذا كان المبرمجون المحترفون يعتمدون بشكل كبير على الذكاء الاصطناعي في كتابة الأكواد، **فلماذا لا يمكننا نحن الذين لا يعرفون البرمجة التحدث مباشرة مع الذكاء الاصطناعي لتحقيق أفكارنا؟**
|
||||
|
||||
هدف هذه الدورة هو مساعدتك على إتقان مهارة جديدة: صنع التطبيقات من خلال الحوار باللغة الطبيعية. سنعلمك كيف تتواصل مع الذكاء الاصطناعي بلغة الكمبيوتر، وكيف تجعله يساعدك في تحويل الأفكار في رأسك إلى منتجات حقيقية قابلة للاستخدام.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'التحديات والفرص', description: 'إمكانيات برمجة جديدة للناس العاديين' },
|
||||
{ title: 'استكشاف القدرات', description: 'تجربة تطوير فائقة السرعة في 60 ثانية' },
|
||||
{ title: 'مشروع عملي', description: 'بناء لعبة ثعبان أصلية بالذكاء الاصطناعي' },
|
||||
{ title: 'توسيع الإبداع', description: 'ابتكار ألعاب متنوعة' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. إلى أي مدى يمكن للذكاء الاصطناعي أن يساعدك
|
||||
|
||||
في هذا القسم، سنناقش سؤالًا واحدًا فقط: إذا كنت لا تعرف كيفية كتابة الأكواد على الإطلاق، إلى أي مدى يمكن للذكاء الاصطناعي الحالي أن يساعدك؟
|
||||
|
||||
بشكل عام، يمكنك فهم قدرات النماذج اللغوية الكبيرة الحالية على النحو التالي: يمكنها التعامل مع تطوير **الأدوات الداخلية البسيطة** و**لوحات تصور البيانات** وبعض **الألعاب الخفيفة**. هذه القدرات كافية لصنع **أدوات للاستخدام الشخصي** والتحقق من المتطلبات **من منظور مدير المنتج**. ولكن إذا كنت تريد إنشاء منتجات **تجارية ناضجة** بنقرة واحدة، فلا يزال يلزم تدخل بشري مستمر في **تصميم العمليات** و**تحسين التفاصيل**.
|
||||
|
||||
بعد ذلك، سنأخذ لعبة الثعبان كمثال لنرى بالتحديد إلى أي مدى يمكن للبرمجة بالذكاء الاصطناعي أن تصل حاليًا.
|
||||
|
||||
### 2.1 صنع لعبة ثعبان في 60 ثانية
|
||||
|
||||
أولاً، يرجى فتح صفحة الويب التجريبية المستخدمة في الدورة [z.ai](https://chat.z.ai/)، `z.ai` هي منصة ذكاء اصطناعي طورتها شركة Zhipu AI (إحدى الشركات الرائدة في مجال النماذج اللغوية الكبيرة في الصين)، وتعتمد قدراتها الأساسية على سلسلة النماذج اللغوية الكبيرة GLM التي طورتها Zhipu. المنصة تدمج العديد من وظائف الذكاء الاصطناعي، بما في ذلك إنشاء العروض التقديمية وتصميم الملصقات والتطوير الكامل. في هذا البرنامج التعليمي، سنركز على استخدام وحدة التطوير الكاملة.
|
||||
|
||||
::: details 💡 ما هو نموذج "البرمجة عبر الويب" الجديد؟
|
||||
|
||||
في الماضي، كان تطوير تطبيق ويب يتطلب:
|
||||
- تثبيت بيئة البرمجة (مثل Python أو Node.js)
|
||||
- تهيئة محرر الأكواد
|
||||
- تعلم لغات HTML/CSS/JavaScript وغيرها
|
||||
- التعامل مع مختلف التبعيات والأخطاء
|
||||
|
||||
أما الآن، بفضل منصات البرمجة بالذكاء الاصطناعي، كل ما تحتاجه هو:
|
||||
- فتح المتصفح والوصول إلى صفحة الويب
|
||||
- وصف الوظائف التي تريدها باللغة الطبيعية
|
||||
- يقوم الذكاء الاصطناعي بإنشاء الأكواد تلقائيًا ومعاينة النتائج في الوقت الفعلي
|
||||
|
||||
نموذج "الحوار هو البرمجة" هذا يحول البرمجة من "كتابة الأكواد" إلى "وصف المتطلبات". لا تحتاج للقلق بشأن التفاصيل التقنية الأساسية، فقط أخبر الذكاء الاصطناعي بوضوح بما تريد، وسيساعدك في تحويل أفكارك إلى برنامج قابل للتشغيل. هذا هو النموذج الجديد للبرمجة في عصر الذكاء الاصطناعي — **Vibe Coding (البرمجة الجوهرية)**.
|
||||
:::
|
||||
|
||||
|
||||
|
||||
بعد إدخال متطلباتنا البسيطة، انقر على زر **التطوير الكامل**، يمكنك مشاهدة عملية إنشاء صفحة الويب بالكامل في الوقت الفعلي. عادةً ما يكون وقت تحضير فنجان قهوة كافيًا لتكتمل صفحة الويب تلقائيًا!
|
||||
|
||||
```
|
||||
ساعدني في صنع لعبة ثعبان:
|
||||
1. التحكم بحركة الثعبان باستخدام مفاتيح الاتجاه
|
||||
2. عند أكل الطعام، يطول الثعبان وتزداد النقاط
|
||||
3. عند الاصطدام بالجدار أو جسم الثعبان تنتهي اللعبة
|
||||
4. يجب أن تكون هناك أزرار للبدء وإعادة البدء
|
||||
5. الواجهة يجب أن تكون بسيطة وجميلة
|
||||
```
|
||||
|
||||
|
||||
|
||||
بعد الانتهاء من الإنشاء، يمكنك رؤية واجهة صفحة ويب قابلة للتصفح على الجانب الأيمن. يمكنك التمرير لأعلى وأسفل لتصفح محتوى الصفحة، أو النقر على زر 🧭 في الجزء العلوي من الصفحة للتبديل إلى وضع ملء الشاشة لمشاهدة التأثير.
|
||||
|
||||
> الأزرار من اليسار إلى اليمين في الجزء العلوي تعمل على التوالي: زر السهم يفتح شريط سجل المحادثات الجانبي، زر القلم لإنشاء محادثة جديدة، زر السهم الدائري لتحديث الصفحة، زر البوصلة للتبديل إلى وضع ملء الشاشة، زر Download لتنزيل المشروع، زر <> للتبديل إلى عرض الكود، زر Publish لنشر المشروع.
|
||||
|
||||
|
||||
|
||||
إذا كنت تريد عرض الكود المصدري لصفحة الويب، يمكنك النقر على أيقونة الكود في الزاوية العلوية اليمنى لعرض الكود الكامل.
|
||||
|
||||
|
||||
|
||||
::: tip 🌐 استكشف المزيد من أدوات البرمجة بالذكاء الاصطناعي
|
||||
|
||||
بالإضافة إلى z.ai، نوصيك أيضًا بتجربة منصات البرمجة بالذكاء الاصطناعي الممتازة التالية:
|
||||
|
||||
| الأداة | الرابط | الميزات |
|
||||
|------|------|------|
|
||||
| **Google AI Studio** (موصى به) | [aistudio.google.com/apps](https://aistudio.google.com/apps) | من إنتاج Google الرسمي، يدعم نموذج Gemini، مناسب للتطوير السريع للنماذج الأولية |
|
||||
| **Figma Make** | [figma.com/make](https://www.figma.com/make) | تكامل عميق مع أدوات التصميم، مناسب للمصممين لإنشاء نماذج تفاعلية بسرعة |
|
||||
| **Coze** | [coze.com](https://www.coze.cn) | منصة تطوير روبوتات الذكاء الاصطناعي من ByteDance، توفر قدرات بناء مرئي بدون كود. تكامل عميق مع نماذج كبيرة محلية مثل Doubao و Kimi، تدعم سوق الإضافات والمهام المجدولة والنشر متعدد القنوات |
|
||||
| **v0.dev** | [v0.dev](https://v0.dev) | أداة إنشاء واجهات مستخدم بالذكاء الاصطناعي من Vercel، أدخل الوصف لتوليد أكواد مكونات React قابلة للتشغيل |
|
||||
| **Bolt.new** | [bolt.new](https://bolt.new) | منصة تطوير كاملة بالذكاء الاصطناعي من StackBlitz، يمكنها إنشاء ونشر تطبيقات ويب كاملة مباشرة |
|
||||
| **Lovable** | [lovable.dev](https://lovable.dev) | تركز على إنشاء تطبيقات React عالية الجودة، تدعم تكامل GitHub والنشر بنقرة واحدة |
|
||||
| **Replit Agent** | [replit.com](https://replit.com) | بيئة تطوير متكاملة عبر الإنترنت مع مساعد برمجة بالذكاء الاصطناعي، تدعم لغات متعددة والتعاون في الوقت الفعلي |
|
||||
|
||||
لمعرفة المزيد عن المقارنة التفصيلية واستخدام أدوات البرمجة عبر الويب، يمكنك الرجوع إلى قراءتنا الإضافية: [مقارنة عملية لـ 7 منصات Vibe Coding عبر الإنترنت](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
|
||||
:::
|
||||
|
||||
### 2.2 ما يمكن وما لا يمكن لبرمجة الحوار فعله
|
||||
|
||||
يركز هذا القسم على سؤال محدد: عندما تعتمد فقط على الذكاء الاصطناعي الحواري ولا تكتب أي كود، إلى أي مدى يمكنه حقًا أن يقدم المساعدة.
|
||||
على مستوى الخبرة، الاستنتاج المستقر نسبيًا هو: يمكنه مساعدتك في إنشاء شيء "صغير ومكتمل"، لكن "ما هو الحد الكافي" لا يزال يتطلب منك اتخاذ القرارات التفصيلية بنفسك في كل خطوة.
|
||||
|
||||
#### أفضل في التطبيقات "الصغيرة والواضحة"
|
||||
|
||||
من مثال لعبة الثعبان السابق، لقد رأيت نمطًا نموذجيًا:
|
||||
طالما يمكنك توضيح الواجهة والتفاعل، يمكن للذكاء الاصطناعي عادةً في بضعة جولات من الحوار أن يجمع صفحة ويب كاملة قابلة للفتح والنقر واللعب.
|
||||
|
||||
غالبًا ما تتميز هذه المهام بخصائص مشتركة:
|
||||
|
||||
- نطاق واضح: صفحة ويب واحدة، أداة داخلية بسيطة، لعبة صغيرة
|
||||
- نتائج مرئية: يمكنك التحقق فورًا في المتصفح مما إذا كانت تعمل كما هو متوقع
|
||||
- تصحيح مباشر: بعد اكتشاف المشاكل، يمكنك الإشارة إلى الظواهر المحددة في المحادثات اللاحقة وطلب الإصلاح
|
||||
|
||||
ضمن هذا الحد، يمكنك اعتبار الذكاء الاصطناعي الحواري كمطور مساعد ذي تنفيذ جيد. كل ما عليك فعله هو تحسين المتطلبات وتعديلها باللغة الطبيعية في كل جولة، وستحصل بسرعة على نموذج أولي قابل للاستخدام.
|
||||
|
||||
**معدل نجاح الذكاء الاصطناعي في إكمال المشاريع الصغيرة بشكل مستقل:**
|
||||
<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
|
||||
|
||||
#### المشاريع الكبيرة تحتاج "منظور العملية"
|
||||
|
||||
بمجرد تجاوز النطاق الصغير والواضح، الاعتماد فقط على بضع جولات من الحوار لجعل الذكاء الاصطناعي يكمل نظامًا معقدًا من البداية إلى النهاية سيواجه سقفًا سريعًا. تتطلب المشاريع الكبيرة غالبًا الاتصال بالخادم وقواعد البيانات ودمج خدمات الطرف الثالث، بالإضافة إلى الصلاحيات والأمان والتزامن وقواعد العمل الكثيرة، والهدف هو تسليم نظام متكامل مرتبط بعمق بالعمليات التجارية الحالية، وليس مجرد صفحة ويب.
|
||||
|
||||
في هذه الحالة، النهج الأكثر منطقية ليس إلقاء جميع المتطلبات على الذكاء الاصطناعي دفعة واحدة، بل أولاً تنظيم عملية شاملة واضحة: ما هي الخطوات الرئيسية، ما هي المدخلات والمخرجات وتغييرات الحالة في كل خطوة، وأي العقد هي الأكثر حساسية للأداء والأمان. ثم بناءً على مخطط العملية هذا، فصل الأجزاء المستقلة نسبيًا وتكليف الذكاء الاصطناعي الحواري بإنشاء الواجهات والوحدات والسكريبتات والاختبارات.
|
||||
|
||||
بالنظر إلى القدرات الحالية، الذكاء الاصطناعي أفضل في تسريع الخطوات الصغيرة واحدة تلو الأخرى، بينما تقوم أنت (أو فريقك) بقرار كيفية تقسيم الخطوات وكيفية ربطها، وتتحمل المسؤولية عن التصميم المعماري وتكامل النظام والعمليات.
|
||||
|
||||
#### الفرق بين القدرة على الكتابة والقدرة على الاستخدام
|
||||
|
||||
عند النظرة الأولى، يبدو أن الذكاء الاصطناعي يستطيع كتابة أي شيء، لكن هل هذه الأشياء قابلة للاستخدام فعلاً، وإلى أي مدى يمكن استخدامها، وكيف يمكننا تحديد الحدود؟
|
||||
|
||||
مرجع خبرة يمكن الرجوع إليه:
|
||||
|
||||
::: warning ⚠️ دليل السيناريوهات المناسبة
|
||||
|
||||
- **النماذج الأولية / Demo / الأدوات الداخلية للاستخدام الشخصي**: مناسبة جدًا لتسليم النسخة الأولى للذكاء الاصطناعي ثم تكرار التفاصيل بنفسك.
|
||||
- **المنتجات الكبيرة الموجهة للمستخدمين الحقيقيين**: عادةً ما تحتاج إلى استثمار طويل الأمد من المهندسين في البنية والتجريد والأداء والصيانة.
|
||||
- **أنظمة الأمان العالي / الامتثال الصارم (مثل الدفع وإدارة المخاطر والرعاية الصحية)**: في المرحلة الحالية، لا ينبغي "النشر مباشرة بعد الإنشاء"، يجب إدخال عمليات مراجعة واختبار صارمة.
|
||||
:::
|
||||
|
||||
في الوقت الحالي، يمكنك الاعتماد على الذكاء الاصطناعي بثقة نسبيًا كشريك فعال للنماذج الأولية والأدوات الشخصية:
|
||||
طالما أنت مستعد للاختبار والتحسين بشكل أكبر، وطرح المزيد من الأسئلة "هناك خطأ هنا، ساعدني في إصلاحه واشرح السبب"، في مستوى النماذج الأولية والأدوات الداخلية، فإن الجودة الإجمالية عادةً ما تكون كافية وذات قيمة عملية.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'التحديات والفرص', description: 'إمكانيات برمجة جديدة للناس العاديين' },
|
||||
{ title: 'استكشاف القدرات', description: 'تجربة تطوير فائقة السرعة في 60 ثانية' },
|
||||
{ title: 'مشروع عملي', description: 'بناء لعبة ثعبان أصلية بالذكاء الاصطناعي' },
|
||||
{ title: 'توسيع الإبداع', description: 'ابتكار ألعاب متنوعة' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. الممارسة العملية: أول تطبيق لك بالذكاء الاصطناعي الأصلي
|
||||
|
||||
لنعد إلى الجزء العملي، في الجزء السابق، استخدمنا الذكاء الاصطناعي لصنع نموذج أولي قابل للعب من لعبة الثعبان بسرعة، وعرفنا تقريبًا ما يمكن وما لا يمكن للذكاء الاصطناعي فعله. بعد ذلك سنتعلم كيفية استخدام تقنيات **vibe coding** الأساسية لإنشاء لعبة ثعبان بالذكاء الاصطناعي **بإصدار حديث**. سنجعل الثعبان يأكل أحرفًا نصية بدلاً من الحبوب. أخيرًا سنجعل اللعبة تولد قصيدة بناءً على الأحرف النصية المأكولة، وترسم لوحة.
|
||||
|
||||
من خلال هذا المثال العملي ستتمكن من فهم الفكرة الأساسية لطريقة البرمجة الجديدة تمامًا: كيف تتعلم التعبير عن المتطلبات بوضوح باللغة الطبيعية.
|
||||
|
||||
### 3.1 لعبة ثعبان أصلية بالذكاء الاصطناعي
|
||||
|
||||
في البداية، يمكننا التحدث مع النموذج اللغوي الكبير بأبسط طريقة ممكنة، مما سيساعدنا في الحصول على نموذج أولي للمنتج بسرعة. يمكننا إدخال النص مباشرة في مربع الدردشة:
|
||||
|
||||
> **💡 مثال على prompt:** ساعدني في صنع لعبة ثعبان
|
||||
>
|
||||
> 
|
||||
|
||||
> **💡 مثال على prompt:** ساعدني في صنع لعبة ثعبان يجب أن تدعم
|
||||
>
|
||||
> 1. يمكنني أكل كلمات مختلفة سيتم جمعها في صندوق
|
||||
> 
|
||||
|
||||
> **💡 مثال على prompt:** ساعدني في صنع لعبة ثعبان يجب أن تدعم:
|
||||
>
|
||||
> 1. يمكنني أكل كلمات مختلفة سيتم جمعها في صندوق
|
||||
> 2. عندما يأكل الثعبان 8 كلمات، يجب أن ينشئ LLM قصيدة بناءً على هذه الكلمات، ويمكننا إعادة مزج القصيدة حسب الحاجة.
|
||||
> 3. عند اكتمال القصيدة، ستقوم الخطوة التالية تلقائيًا بإنشاء صورة بناءً على القصيدة.
|
||||
>
|
||||
> 
|
||||
|
||||
لاحظ أنه أثناء عملية التطوير، قد نواجه مشاكل غير مرضية، مثل عدم استجابة الأزرار عند النقر، أو ظهور أخطاء عند استخدام الوظائف، أو عدم عمل الوظائف كما هو متوقع، أو عدم تطابق واجهة الواجهة الأمامية مع التصميم المتوقع.
|
||||
|
||||
في هذه الحالة، نحتاج إلى طرح المزيد من الأسئلة على النموذج لمساعدته في إصلاح هذه المشاكل غير المتوقعة.
|
||||
|
||||
|
||||
|
||||
### 3.2 إضافة ميزات جديدة للعبة
|
||||
|
||||
بعد الانتهاء من الوظائف الأساسية، يمكننا محاولة إضافة بعض التحسينات الجديدة لبرنامجنا! إذا شعرت أن عملية أكل الثعبان للكلمات أو الأحرف مملة بعض الشيء، يمكنك جعل الثعبان يأكل كلمات بألوان مختلفة وتغيير لون الثعبان وفقًا لذلك.
|
||||
|
||||
يمكنك أيضًا إضافة تأثيرات بصرية لعملية "الأكل"، أو تقديم كلمات سحرية تؤدي إلى تأثيرات خاصة — مثل زيادة سرعة أو حجم الثعبان. فكرة أخرى هي جعل النموذج يولد قصيدة وصورة في كل مرة يأكل فيها الثعبان كلمة، بدلاً من الانتظار حتى يأكل ثماني كلمات.
|
||||
|
||||
إذا وجدت هذا تحديًا، يمكنك طلب المساعدة مباشرة من النموذج اللغوي! يمكنه تقديم اقتراحات إبداعية لجعل لعبتك أكثر متعة. جربها!
|
||||
|
||||
```
|
||||
1. آلية "الكلمات تفتح عوالم"
|
||||
في كل مرة يأكل الثعبان كلمة، يقوم LLM بإنشاء تداعيات شعرية للكلمة (مثلاً، "شجرة" ← "غابة"، "ظلال خضراء")، ويقوم نموذج الصور بإنشاء عمل فني صغير للكلمة على الفور. هذه الصور تتجمع تدريجيًا لتشكل لوحة بانورامية فريدة من صنع اللاعب، لذلك كل لعبة هي "رسم وكتابة شعر".
|
||||
|
||||
2. لعبة " puzzles الشعر"
|
||||
كل كلمة يأكلها الثعبان تؤدي إلى توليد LLM لسطر شعري قصير، ونموذج الصور يولد رسمًا توضيحيًا. هذه الأبيات والصور تتحد معًا مثل puzzle لتشكل قصيدة وفنًا تعاوني بالذكاء الاصطناعي في نهاية الجولة.
|
||||
|
||||
3. "الكلمات السحرية" و "فروع القصة"
|
||||
كلمات سحرية خاصة (مثل "ريح"، "ليل"، "حلم") لا تؤدي فقط إلى توليد LLM للشعر، بل تغير أيضًا مزاج الموقف أو موضوعه — تحويل أسلوب الصور المولدة إلى ليلي أو عاصفي أو حالمة.
|
||||
فروع القصة: LLM يعطي موضوعًا أو لغزًا في البداية (مثل "ذكريات الخريف"). اختيارات الكلمات لدى اللاعب تؤثر مباشرة على تطور القصة والشعر، ويقوم نموذج الصور بتحديث الخلفية والتأثيرات البصرية في الوقت الفعلي.
|
||||
|
||||
4. "الإنشاء التفاعلي في الوقت الفعلي"
|
||||
بعد كل كلمة، يولد LLM سطر حوار أو وصف، يمكن لـ NPC في اللعبة "التحدث" مع اللاعب، أو يمكن للبيئة أن تتغير وفقًا لذلك.
|
||||
مظهر الثعبان أو العوائق في اللعبة يمكن أن تتغير بصريًا بناءً على الكلمات المأكولة، بفضل نموذج الصور.
|
||||
|
||||
5. "الإبداع والمشاركة"
|
||||
يمكن للاعبين حفظ ومشاركة قصائدهم وصورهم المبتكرة بالذكاء الاصطناعي في نهاية الجلسة، للتباهي بإبداعهم "التعاوني بالذكاء الاصطناعي" الفريد.
|
||||
لوحات المتصدرين مثل "أجمل شعر وفن"، "أكثر مزيج كلمات إبداعي"، لتشجيع إعادة اللعب والإبداع.
|
||||
|
||||
6. تحدي "الثعبان حسب الجمل"
|
||||
الوضع العكسي: LLM يعطي سطرًا شعريًا أو لغزًا، يجب على اللاعب توجيه الثعبان لأكل الكلمات بالترتيب لإعادة بناء الجملة. أكل كلمة خاطئة يؤدي إلى عواقب ممتعة أو فنية من خلال نموذج إنشاء الصور.
|
||||
|
||||
7. "مراحل ذاتية" و "اختيار الأسلوب"
|
||||
في بداية اللعبة، يختار اللاعب موضوعًا (مثل "حكايات خرافية"، "خيال علمي"، "شعر تانغ")، وسيكيف كل من LLM ونموذج الصور اختيار الكلمات وأسلوب الشعر والتأثيرات البصرية ليتطابق مع الموضوع، مما يجعل كل لعبة تبدو جديدة.
|
||||
|
||||
8. "الإبداع المشترك الحي"
|
||||
عند أكل كلمة خاصة، يمكن لـ LLM أن يطلب من اللاعب إدخال عبارة أو اختيار أسلوب، ثم يقوم الذكاء الاصطناعي بتوليد الأبيات والرسوم التوضيحية المناسبة، مما يجعلها إبداعًا مشتركًا حقيقيًا بين الإنسان والذكاء الاصطناعي.
|
||||
|
||||
9. " مفاجآت الذكاء الاصطناعي والإنجازات"
|
||||
مجموعات كلمات معينة يتعرف عليها LLM كمواضيع خاصة أو نكات داخلية (مثل "قمر"، "زهر Osmanthus"، "ضفة النهر")، مما يؤدي إلى أبيات ورسوم توضيحية نادرة كمكافأة على الاستكشاف.
|
||||
|
||||
10. "قصة النمو"
|
||||
مع نمو الثعبان، يولد LLM قصيدة قصة متصلة، ويقوم نموذج الصور بإنشاء لوحة طويلة أو بانورامية سلسة، لذلك اللاعب "يكتب ويرسم ويلعب" في نفس الوقت.
|
||||
```
|
||||
|
||||
بالإضافة إلى ذلك، يمكننا أيضًا طلب من LLM مساعدتنا في توليد prompt على مستوى المشروع مباشرة. في القسم السابق، كتبنا بأنفسنا فقط prompt لعبة الثعبان. الآن دعنا نحاول جعل النموذج اللغوي الكبير يولد prompt مع إطار كامل ومسار تنفيذ (يمكنك استخدام z.ai مباشرة للتوليد).
|
||||
|
||||
إذا كنت تريد تعلم كيفية كتابة prompts أفضل، يمكنك الاطلاع على [ملحق هندسة Prompts](/ar-sa/appendix/8-artificial-intelligence/prompt-engineering).
|
||||
|
||||
> أريد أن يجعل الذكاء الاصطناعي يولد لعبة ثعبان على الويب، أحتاج إلى prompt أكثر اكتمالاً لجعل النتيجة أكثر إثارة وإمتاعًا. يرجى توليد prompt المناسب. الهدف الحالي: إنشاء لعبة ثعبان يجب أن تطبق وظيفة أكل كلمات مختلفة لتوليد الشعر، ويجب أن تتضمن وحدة إنشاء الصور.
|
||||
|
||||
ستكون إجابة z.ai كالتالي:
|
||||
|
||||
|
||||
|
||||
يمكننا استخدام هذا prompt لإعادة إنشاء المشروع في وضع التطوير الكامل:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'التحديات والفرص', description: 'إمكانيات برمجة جديدة للناس العاديين' },
|
||||
{ title: 'استكشاف القدرات', description: 'تجربة تطوير فائقة السرعة في 60 ثانية' },
|
||||
{ title: 'مشروع عملي', description: 'بناء لعبة ثعبان أصلية بالذكاء الاصطناعي' },
|
||||
{ title: 'توسيع الإبداع', description: 'ابتكار ألعاب متنوعة' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
### 3.3 حاول صنع ألعاب صغيرة أخرى
|
||||
|
||||
بالإضافة إلى لعبة الثعبان، يمكننا ترك الخيال يبحر بحرية.
|
||||
|
||||
نبتكر أي شيء نريد ابتكاره، بل ونحاول إفساد كل شيء! ثم نبدأ من جديد!
|
||||
|
||||
```
|
||||
1. معرض فنون الذكاء الاصطناعي
|
||||
الوصف: معرض على الإنترنت لعرض الأعمال الفنية المولدة بالذكاء الاصطناعي، يمكن للمستخدمين رفع ومشاركة والتعليق على الأعمال الفنية.
|
||||
الوظائف: نظام حسابات المستخدمين، رفع وعرض الأعمال الفنية، نظام التقييم، التصفح حسب الفئة، تكامل أدوات إنشاء الذكاء الاصطناعي.
|
||||
التميز التقني: واجهة React/Vue، خادم Node.js، قاعدة بيانات MongoDB، تكامل واجهة برمجة تطبيقات الذكاء الاصطناعي.
|
||||
|
||||
2. أرشيف الألعاب الكلاسيكية
|
||||
الوصف: موقع يكرم الألعاب الكلاسيكية، يتضمن تاريخ الألعاب، أدلة اللعب، وألعاب كلاسيكية قابلة للعب عبر الإنترنت.
|
||||
الوظائف: قاعدة بيانات الألعاب، عرض الخط الزمني، محاكي عبر الإنترنت، تعليقات المستخدمين، وظيفة جمع الألعاب.
|
||||
التميز التقني: تصميم متجاوب، تنفيذ ألعاب WebGL/Canvas، واجهة RESTful API، نظام مصادقة المستخدمين.
|
||||
|
||||
3. متتبع الحياة المستدامة
|
||||
الوصف: موقع يساعد المستخدمين على تتبع وتقليل بصمتهم الكربونية من خلال نصائح بيئية وتحديات مجتمعية.
|
||||
الوظائف: حاسبة البصمة الكربونية الشخصية، تحديد الأهداف، تتبع التقدم، تحديات مجتمعية، قاعدة معرفة بيئية.
|
||||
التميز التقني: تصور البيانات، تحسين الجوال، وظائف اجتماعية، إشعارات الدفع.
|
||||
|
||||
4. مساعد المطبخ الافتراضي
|
||||
الوصف: منصة توجيه طبخ قائمة على الذكاء الاصطناعي توصي بوصفات مخصصة وإرشادات طبخ خطوة بخطوة.
|
||||
الوظائف: قاعدة بيانات الوصفات، التعرف على المكونات، توصيات مخصصة، مؤقت الطبخ، تحليل التغذية.
|
||||
التميز التقني: واجهة برمجة التعرف على الصور، نظام توصيات التعلم الآلي، التحكم الصوتي، إرشادات فيديو في الوقت الفعلي.
|
||||
|
||||
5. منصة اكتشاف الموسيقى المستقلة
|
||||
الوصف: منصة بث موسيقي تركز على الفنانين المستقلين والناشئين، توفر تجربة اكتشاف فريدة.
|
||||
الوظائف: بث الموسيقى، ملفات الفنانين الشخصية، توصيات مخصصة، إنشاء قوائم التشغيل، تعليقات المجتمع.
|
||||
التميز التقني: معالجة البث الصوتي، خوارزميات التوصية، وظائف اجتماعية، تصور الموسيقى.
|
||||
|
||||
6. نظام إدارة المهام البسيط
|
||||
الوصف: أداة إدارة مهام بجماليات Zen، تركز على التنظيم البسيط والفعال للمهام.
|
||||
الوظائف: إنشاء وتصنيف المهام، تحديد الأولويات، تتبع التقدم، تعاون الفريق، تحليل البيانات.
|
||||
التميز التقني: تصميم واجهة مستخدم بسيط، وظيفة السحب والإفلات، المزامنة في الوقت الفعلي، توافق متعدد المنصات.
|
||||
|
||||
7. ورشة كتابة الخيال العلمي
|
||||
الوصف: منصة توفر أدوات إبداعية وإلهامًا لكتاب الخيال العلمي، بما في ذلك أدوات بناء العالم وتطوير الشخصيات.
|
||||
الوظائف: أدوات بنية القصة، ملفات الشخصيات، قوالب بناء العالم، إحصائيات الكتابة، ملاحظات المجتمع.
|
||||
التميز التقني: محرر نصوص منسق، تصور البيانات، تعاون في التحرير، إبداع بمساعدة الذكاء الاصطناعي.
|
||||
|
||||
8. خريطة المعرفة الشخصية
|
||||
الوصف: أداة تساعد المستخدمين على بناء شبكة معرفة شخصية، تصور وربط الأفكار والمعلومات المختلفة.
|
||||
الوظائف: إنشاء وربط العقد، نظام العلامات، وظيفة البحث، أدوات الاستيراد/التصدير، رسوم بيانية مرئية.
|
||||
التميز التقني: قاعدة بيانات الرسم البياني، خوارزميات تصور البيانات، دعم Markdown، المزامنة عبر الأجهزة.
|
||||
|
||||
9. حديقة نباتات افتراضية
|
||||
الوصف: موسوعة نباتات تفاعلية يمكن للمستخدمين استكشاف عالم النباتات وإنشاء حديقة افتراضية.
|
||||
الوظائف: قاعدة بيانات النباتات، نماذج نباتات ثلاثية الأبعاد، محاكاة النمو، أدلة البستنة، عرض المجتمع.
|
||||
التميز التقني: تصيير ثلاثي الأبعاد، محاكاة تغير الفصول، تكامل AR، واجهة برمجة التعرف على النباتات.
|
||||
|
||||
10. ساحة تحديات البرمجة
|
||||
الوصف: منصة مسابقات عبر الإنترنت للمبرمجين مع تحديات برمجة بمستويات صعوبة مختلفة.
|
||||
الوظائف: أسئلة التحدي، محرر أكواد، تقييم تلقائي، لوحة المتصدرين، مسارات التعلم.
|
||||
التميز التقني: بيئة sandbox للأكواد، نظام تقييم في الوقت الفعلي، تصور الخوارزميات، وظائف التعلم الاجتماعي.
|
||||
```
|
||||
|
||||
والمزيد... إذا كنت تحب الألعاب، دعنا نحاول ابتكار ألعاب معًا!
|
||||
|
||||
```
|
||||
1. RPG عالم مفتوح ثلاثي الأبعاد
|
||||
الوصف: RPG خيالية بعالم مفتوح واسع ومهام وتطور الشخصيات.
|
||||
الوظائف: دورة ليل ونهار، طقس ديناميكي، شجرة المهارات، تعاون متعدد اللاعبين، نظام التصنيع.
|
||||
التميز التقني: Three.js أو Babylon.js للتصيير ثلاثي الأبعاد، منطق اللعبة من جانب الخادم، تخصيص الشخصية، نظام الحفظ.
|
||||
|
||||
2. ساحة إطلاق نار من منظور شخص أول (FPS)
|
||||
الوصف: FPS سريع الإيقاع متعدد اللاعبين مع أوضاع لعب وخرائط متنوعة.
|
||||
الوظائف: قتال فرق، التقاط العلم، تخصيص الأسلحة، مباريات تصنيف.
|
||||
التميز التقني: WebGL/Three.js للرسومات ثلاثية الأبعاد، شبكة لعب متعددة، كشف التصادم، دردشة صوتية.
|
||||
|
||||
3. شطرنج الذكاء الاصطناعي ولعب متعدد اللاعبين
|
||||
الوصف: منصة شطرنج كاملة الميزات مع منافسين بالذكاء الاصطناعي ولعب عبر الإنترنت.
|
||||
الوظائف: مستويات صعوبة الذكاء الاصطناعي، تحديات نهاية اللعبة، وضع البطولة، تحليل إعادة اللعب.
|
||||
التميز التقني: مكتبة منطق الشطرنج، WebSocket للعب في الوقت الفعلي، نظام تصنيف ELO، مكافحة الغش.
|
||||
|
||||
4. لعبة Mahjong متعددة اللاعبين عبر الإنترنت
|
||||
الوصف: لعبة Mahjong تقليدية مع لعب متعدد اللاعبين عبر الإنترنت ونظام تسجيل النقاط.
|
||||
الوظائف: مجموعات قواعد متعددة، غرف خاصة، نظام تصنيف، وظيفة إعادة اللعب.
|
||||
التميز التقني: منطق مطابقة البلاط، لعب متعدد اللاعبين في الوقت الفعلي، نظام اللوبي، تتبع النقاط.
|
||||
|
||||
5. لعبة استراتيجية قائمة على الأدوار
|
||||
الوصف: لعبة استراتيجية تكتيكية مع قتال شبكي وإدارة الوحدات.
|
||||
الوظائف: وضع الحملة، معارك عشوائية، ترقية الوحدات، ضباب الحرب، لعب متعدد اللاعبين.
|
||||
التميز التقني: نظام حركة الشبكة، اتخاذ قرارات الذكاء الاصطناعي، مزامنة الأدوار، نظام الحفظ/التحميل.
|
||||
|
||||
6. لعبة سباق سيارات مع الوقت
|
||||
الوصف: لعبة سباق سيارات ثلاثية الأبعاد تركز على سباقات الوقت وأرقام الحلبات.
|
||||
الوظائف: حلبات متعددة، تخصيص السيارات، إعادة لعب الأشباح، لوحة المتصدرين.
|
||||
التميز التقني: فيزياء سيارات ثلاثية الأبعاد، محرر الحلبات، نظام إعادة اللعب، لوحة متصدرين عبر الإنترنت.
|
||||
|
||||
7. لعبة بطاقات قتالية (بناء المجموعة)
|
||||
الوصف: لعبة بطاقات استراتيجية يبني اللاعبون مجموعاتهم ويقاتلون الخصوم.
|
||||
الوظائف: جمع البطاقات، بناء المجموعة، مباريات تصنيف، أحداث موسمية.
|
||||
التميز التقني: منطق لعبة البطاقات، نظام المطابقة، خصوم الذكاء الاصطناعي، حركات البطاقات.
|
||||
|
||||
8. Battle Royale (عرض علوي ثنائي الأبعاد)
|
||||
الوصف: لعبة Battle Royale بعرض علوي ثنائي الأبعاد مع منطقة لعب تتقلص وآلية الغنائم.
|
||||
الوظائف: وضع فردي وفريق، تنوع الأسلحة، أحداث داخل اللعبة، لوحة المتصدرين.
|
||||
التميز التقني: لعب متعدد اللاعبين في الوقت الفعلي، منطق تقليص المنطقة، نظام توليد الغنائم، المطابقة.
|
||||
|
||||
9. لعبة رعب بقاء (منظور شخص أول)
|
||||
الوصف: لعبة رعب من منظور شخص أول مع إدارة الموارد وآليات الهروب.
|
||||
الوظائف: بيئة غامضة، حل الألغاز، ذكاء اصطناعي للعدو، نهايات متعددة.
|
||||
التميز التقني: إضاءة ديناميكية، تصميم الصوت، البحث عن المسار للعدو، نظام الحفظ.
|
||||
|
||||
10. لعبة إيقاع موسيقي (ثلاثية الأبعاد)
|
||||
الوصف: لعبة إيقاع ثلاثية الأبعاد يضرب اللاعب النوتات مع إيقاع الموسيقى.
|
||||
الوظائف: مستويات صعوبة متعددة، محرر الحلبات، دعم الأغاني المخصصة، لوحة المتصدرين.
|
||||
التميز التقني: تحليل الصوت، مزامنة الإيقاع، مسار النوتات ثلاثي الأبعاد، كشف توقيت الإدخال.
|
||||
```
|
||||
|
||||
## 📚 الواجب
|
||||
|
||||
<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🎯 واجب هذا الفصل: أنجز أول مجموعة من ألعابك الصغيرة الأصلية بالذكاء الاصطناعي</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
في هذا القسم، اتبعت الخطوات وتجربت العملية الكاملة من "توليد لعبة الثعبان عبر الحوار" إلى "فهم أسلوب تصميم الألعاب الصغيرة الأصلية بالذكاء الاصطناعي". الواجب التالي يساعدك على تحويل هذا الفهم إلى قدرات حقيقية خاصة بك.
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<strong>إعادة إنشاء لعبة الثعبان الأصلية بالذكاء الاصطناعي بالكامل</strong>
|
||||
<ul>
|
||||
<li>الحد الأدنى: الثعبان يتحرك، وعند أكل "الطعام" يتغير الطول والنقاط، والاصطدام بالجدار أو الجسم ينتهي اللعبة.</li>
|
||||
<li>أثناء إعادة الإنشاء، تدرب على إلقاء ظاهرة الخطأ + رسالة الخطأ + مقتطف الكود الرئيسي على الذكاء الاصطناعي دفعة واحدة، واطلب منه الإصلاح "بالوضع المبسط".</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>(اختياري) ابتكار لعبة أو Demo صغيرة أصلية بالذكاء الاصطناعي</strong>
|
||||
<ul>
|
||||
<li>يمكن أن تكون أي لعبة خفيفة حول النصوص أو الصور أو الموسيقى أو الإيقاع، مثل "أكل الكلمات وكتابة الشعر" أو "النقر بالإيقاع" أو "الركض التوليدي" وغيرها.</li>
|
||||
<li>التركيز ليس على مدى روعة الرسومات، بل على قدرتك على التوضيح بوضوح: كيف ساعد الذكاء الاصطناعي تحديدًا، وما هو الجزء الذي حلّ مشكلة "صعبة أو مرهقة يدويًا".</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
هذه هي نهاية البرنامج التعليمي! قد تحتاج إلى <strong>4 ساعات</strong> لإكمال جميع المحتويات وبناء لعبة الثعبان الخاصة بك. لا تستعجل — استكشف وجرب واستمتع بالعملية. إذا واجهت مفاهيم لا تفهمها أثناء العملية، نوصي بالرجوع إلى الأقسام ذات الصلة في الملحق أدناه.
|
||||
</p>
|
||||
</el-card>
|
||||
|
||||
## الملحق
|
||||
|
||||
<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">تنقل الملحق</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
هنا مجموعة من المفاهيم الأساسية المتعلقة بهذا الفصل: إذا واجهت أسئلة مثل "ما هو الواجهة الأمامية" أو "ما يعنيه Vibe Coding بالضبط" أثناء التعلم، يمكنك العودة هنا للرجوع إليها في أي وقت.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>الملحق 1: هل نحتاج إلى معرفة تطوير الواجهة الأمامية؟</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">فهم موقع الواجهة الأمامية في التطبيق، ومعرفة الأجزاء "المرئية".</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>الملحق 2: ما هو Vibe Coding بالضبط</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">فهم الفكرة الأساسية لـ "التطوير الحواري"، ومعرفة كيفية التعاون مع الذكاء الاصطناعي.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" style="margin-top: 10px;">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>الملحق 3: سياق النموذج</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">فهم المفاهيم مثل "طول السياق" التي نسمعها كثيرًا لكنها يسهل الخلط بينها.</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>الملحق 4: قدرة اتباع التعليمات</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">فهم لماذا لا "يفهم" النموذج أحيانًا، وكيف تكتب بشكل أوضح.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 12px; font-size: 12px; color: #909399;">
|
||||
نصيحة: يمكنك استخدام Ctrl/⌘+F للبحث عن الكلمات الرئيسية، أو نسخ الفقرات التي لا تفهمها ولصقها في الذكاء الاصطناعي، واطلب منه إعادة شرحها بطريقة "يمكن للمبتدئ تمامًا فهمها".
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<a id="appendix-1"></a>
|
||||
|
||||
## [الملحق 1: هل نحتاج إلى معرفة تطوير الواجهة الأمامية؟](#appendix-nav)
|
||||
|
||||
::: tip 💡 ملخص بجملة واحدة
|
||||
لا تحتاج إلى معرفة كيفية كتابة الأكواد، لكن فهم المفاهيم الأساسية يساعدك على وصف المتطلبات للذكاء الاصطناعي بشكل أفضل.
|
||||
:::
|
||||
|
||||
<el-row :gutter="16" style="margin: 20px 0;">
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">👁️</span>
|
||||
<span style="font-weight: bold;">الواجهة الأمامية</span>
|
||||
<el-tag type="success" size="small">مرئي</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
كل المحتوى الذي يمكن للمستخدم **رؤيته والنقر عليه**
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>عناوين الصفحة، النصوص، الصور</li>
|
||||
<li>الأزرار، مربعات الإدخال، القوائم المنسدلة</li>
|
||||
<li>واجهة اللعبة، تأثيرات الحركة</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">⚙️</span>
|
||||
<span style="font-weight: bold;">الواجهة الخلفية</span>
|
||||
<el-tag type="info" size="small">غير مرئي</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
معالجة البيانات التي تعمل على الخادم
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>تخزين نقاط المستخدم</li>
|
||||
<li>التحقق من حساب تسجيل الدخول</li>
|
||||
<li>توزيع محتوى المراحل</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### الثلاثي الأساسي للواجهة الأمامية
|
||||
|
||||
يستخدم المتصفح ثلاثة أنواع من "الأكواد" لبناء الصفحات:
|
||||
|
||||
<el-tabs type="border-card" style="margin: 20px 0;">
|
||||
<el-tab-pane label="🏗️ HTML - الهيكل">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>الوظيفة:</strong> تعريف <strong>ماذا</strong> يوجد على الصفحة من عناصر</p>
|
||||
<p><strong>التشبيه:</strong> مخطط هيكل المنزل (أين الجدران والأبواب والنوافذ)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code><button>اضغط هنا</button>
|
||||
<h1>العنوان</h1>
|
||||
<img src="photo.png"></code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="🎨 CSS - التنسيق">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>الوظيفة:</strong> التحكم في <strong>شكل</strong> العناصر</p>
|
||||
<p><strong>التشبيه:</strong> ديكور المنزل (الألوان، المواد، التخطيط)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button {
|
||||
background: blue;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="⚡ JavaScript - السلوك">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>الوظيفة:</strong> جعل الصفحة <strong>تتحرك</strong></p>
|
||||
<p><strong>التشبيه:</strong> أسلاك ومفاتيح المنزل (الاستجابة عند النقر)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button.onclick = () => {
|
||||
alert('لقد ضغطت علي!')
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
### كيف يتحول الكود إلى صفحة؟
|
||||
|
||||
عندما تفتح صفحة ويب، يعالج المتصفح ثلاثة أنواع من الأكواد بالترتيب:
|
||||
|
||||
**1. HTML — تعريف هيكل الصفحة**
|
||||
يحلل المتصفح أولاً HTML لمعرفة العناصر الموجودة على الصفحة (العناوين، الفقرات، الصور، الأزرار، إلخ) والعلاقات الهرمية بينها.
|
||||
|
||||
**2. CSS — تطبيق التنسيقات**
|
||||
ثم يضيف المتصفح الأنماط لهذه العناصر بناءً على قواعد CSS: الألوان، الأحجام، المواضع، المسافات، مما يجعل الصفحة جميلة.
|
||||
|
||||
**3. JavaScript — إضافة التفاعل**
|
||||
أخيرًا ينفذ كود JavaScript لجعل الصفحة "تتحرك": الاستجابة للنقرات، إرسال النماذج، تشغيل الرسوم المتحركة، إلخ.
|
||||
|
||||
**4. عرض الصفحة**
|
||||
نتيجة تعاون الثلاثة هي صفحة الويب التي تراها في النهاية.
|
||||
|
||||
### أطر الواجهة الأمامية الحديثة: من HTML إلى React/Vue
|
||||
|
||||
HTML و CSS و JavaScript المذكورة سابقًا هي "الثلاثي الأساسي" لتطوير الواجهة الأمامية، وهي أساس جميع صفحات الويب. ولكن عندما تصبح الصفحات معقدة، يواجه التطوير المباشر بالثلاثي تحديات: صعوبة صيانة الكود، الكثير من العمل المتكرر، مشاكل مزامنة البيانات.
|
||||
|
||||
**أطر الواجهة الأمامية الحديثة** (مثل React و Vue و Angular) مبنية على HTML/CSS/JS لجعل التطوير أكثر كفاءة:
|
||||
|
||||
**1. HTML/CSS/JS (المرحلة الأساسية)**
|
||||
التعامل المباشر مع عناصر الصفحة، مناسب للصفحات البسيطة. ولكن عندما يزيد حجم الكود، تختلط كل المنطقيات معًا ويصبح من الصعب صيانتها.
|
||||
|
||||
**2. jQuery (مرحلة الانتقال)**
|
||||
بسّط عمليات DOM وجعل الكود أكثر إيجازًا. لكن لا يزال يتطلب الإدارة اليدوية لحالة الصفحة، وعند تغير البيانات يجب العثور على العنصر المقابل وتحديثه يدويًا.
|
||||
|
||||
**3. React/Vue (المرحلة الحديثة)**
|
||||
اعتماد تصميم قائم على المكونات والمدفوع بالحالة:
|
||||
- **المكونات**: تقسيم الصفحة إلى وحدات مستقلة قابلة لإعادة الاستخدام (مثل الأزرار والبطاقات وشريط التنقل)
|
||||
- **المدفوع بالحالة**: عند تغير البيانات، يقوم الإطار بتحديث الواجهة المقابلة تلقائيًا بدون تدخل يدوي
|
||||
|
||||
::: tip 💡 فهم بسيط
|
||||
- **HTML/CSS/JS** = المواد الأساسية (الطوب، الإسمنت، الحديد)
|
||||
- **React/Vue** = إطار البناء (يوفر المعايير والأدوات لبناء المنزل)
|
||||
|
||||
في عصر البرمجة بمساعدة الذكاء الاصطناعي، لا تحتاج إلى إتقان جميع تفاصيل الأطر، فقط فهم المفاهيم الأساسية، ويمكنك من خلال وصف اللغة الطبيعية جعل الذكاء الاصطناعي يساعدك في توليد الأكواد.
|
||||
:::
|
||||
|
||||
### في Vibe Coding
|
||||
|
||||
**النقطة الأساسية: لا تحتاج إلى كتابة الأكواد، فقط تحتاج إلى الوصف.**
|
||||
|
||||
بعد فهم مفاهيم الواجهة الأمامية، يمكنك وصف المتطلبات للذكاء الاصطناعي بهذه الطريقة:
|
||||
|
||||
> "اصنع صفحة لوحة متصدرين باستخدام React، عرض قائمة النقاط على الجانب الأيمن، عند النقر على صف يظهر تفاصيل اللاعب في الأسفل، بأسلوب بسيط وعصري."
|
||||
|
||||
إذا كنت تريد فهمًا أعمق لمفاهيم الواجهة الأمامية الأساسية مثل HTML و CSS و JavaScript، يمكنك الاطلاع على [ملحق أساسيات الويب](/ar-sa/appendix/3-browser-and-frontend/javascript-deep-dive). لمعرفة تاريخ تطوير تقنيات الواجهة الأمامية، يمكنك الاطلاع على [ملحق تاريخ تطور الواجهة الأمامية](/ar-sa/appendix/3-browser-and-frontend/frontend-frameworks).
|
||||
|
||||
<a id="appendix-2"></a>
|
||||
|
||||
## [الملحق 2: ما هو Vibe Coding بالضبط](#appendix-nav)
|
||||
|
||||
> 💡 ما هو Vibe Coding؟ عالم الكمبيوتر [Andrej Karpathy](https://karpathy.ai/) (أحد المؤسسين المشاركين لـ OpenAI، الرئيس السابق للذكاء الاصطناعي في تسلا) صاغ مصطلح **vibe coding** في فبراير 2025. يشير هذا المفهوم إلى طريقة برمجة تعتمد على LLM، **تسمح للمبرمجين بتوليد أكواد قابلة للعمل من خلال تقديم أوصاف باللغة الطبيعية بدلاً من كتابة الأكواد يدويًا.**
|
||||
|
||||
|
||||
|
||||
من حيث المعنى الحرفي، يمكن فهم Vibe Coding على أنه «طريقة تطوير من خلال الكلام». التغيير الأساسي هو: لم تعد بحاجة إلى كتابة الأكواد سطرًا بسطر، أو البحث عن القواعد، أو تصحيح الأخطاء، بل تصف ما تريده مباشرة باللغة الطبيعية، مثل:
|
||||
|
||||
- أحتاج إلى صفحة تسجيل دخول بها مربع إدخال رقم الهاتف ومربع إدخال رمز التحقق.
|
||||
- بعد نجاح تسجيل الدخول، الانتقال إلى الصفحة الرئيسية وعرض اسم المستخدم في الزاوية العلوية اليمنى.
|
||||
- أعطني لعبة ثعبان بسيطة يمكن التحكم بها بمفاتيح الاتجاه.
|
||||
|
||||
النموذج اللغوي الكبير (LLM) يترجم هذه الأوصاف تلقائيًا إلى أكواد قابلة للتشغيل حقًا، وينشئ الصفحات والمنطق وهياكل البيانات المقابلة. بعد رؤية النتيجة، تقدم ملاحظات التعديل باللغة الطبيعية، مثل تكبير الزر قليلًا، أو تغيير الخلفية إلى داكنة، أو تسجيل النقاط وعرض لوحة المتصدرين، ويستمر الذكاء الاصطناعي في تعديل التنفيذ وفقًا لمتطلباتك.
|
||||
|
||||
في هذا النموذج، لا تحتاج إلى تعلم لغة البرمجة أولاً ثم كتابة الأكواد؛ بل تركز جهودك الرئيسية على: توضيح ما يجب فعله، وتقييم موضع الخطأ بعد رؤية النتائج، ثم تقديم تعديلات جديدة. الذكاء الاصطناعي مسؤول عن تحويل هذه الأفكار العليا إلى تنفيذ ملموس، مما يقلل بشكل كبير من عمل البرمجة الميكانيكي والمتكرر.
|
||||
|
||||
يمكنك النقر هنا لمعرفة المزيد من التفاصيل حول vibe coding: [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
|
||||
|
||||
يمكنك النقر هنا لمعرفة المزيد من محتوى Karpathy: [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
|
||||
|
||||
### كيف تتظاهر بأنك خبير في Vibe Coding
|
||||
|
||||
في الواقع، في عملية vibe coding الحقيقية، نادرًا ما نستخدم prompts معقدة. ربما نحتاج في البداية إلى تقديم prompt محدد ومعقد بشكل معتدل للبرنامج بأكمله، ولكن بعد ذلك في كل خطوة، قد تحتاج فقط إلى الأنواع التالية من prompts:
|
||||
|
||||
على سبيل المثال، قد تطلب من النموذج إصلاح خطأ في الكود، أو إعادة إخراج النسخة الكاملة بعد التعديل، أو عدم تغيير المنطق الأصلي، أو عدم إضافة وظائف غير مطلوبة، أو الالتزام بأسماء المتغيرات والدوال الموجودة. الفكرة الأساسية هي أن prompt اليومي في vibe coding غالبًا لا يكون طويلًا، بل يكون طلبًا مباشرًا يصف المشكلة أو القيد الذي تريد من النموذج الالتزام به.
|
||||
|
||||
قد يبدو هذا مبالغًا فيه بعض الشيء، لكن في الواقع، هذه هي prompts التي قد نستخدمها في عملنا اليومي. بسبب **حدود طول السياق** للنماذج اللغوية الكبيرة، أو أحيانًا لأن **قدرة اتباع التعليمات** ليست قوية جدًا، قد ينسى النموذج ما تمت مناقشته في وقت مبكر من المحادثة. في vibe coding، نميل إلى استخدام النماذج ذات السياق الطويل والنماذج ذات قدرة اتباع تعليمات قوية، ويمكننا الحكم على ما إذا كان النموذج جيدًا من خلال ترتيب أو مؤشرات كلاهما.
|
||||
|
||||
أو، بسبب أسلوب مجموعة بيانات التدريب، تميل النماذج الكبيرة إلى الرد بأسلوب بيانات التدريب الخاصة بها. على سبيل المثال، بعض الأشخاص يتحدثون بجدية، وبعضهم يحب إضافة الكثير من الزخارف، وبعض النماذج الكبيرة تحب إضافة الكثير من التعليقات أو وحدات غير ضرورية في الكود.
|
||||
|
||||
<a id="appendix-3"></a>
|
||||
|
||||
## [الملحق 3: سياق النموذج](#appendix-nav)
|
||||
|
||||
سياق النموذج يمكن فهمه على أنه الذاكرة قصيرة المدى للذكاء الاصطناعي. يشير إلى جميع المحتوى النصي الذي يمكن للنموذج "رؤيته" و"تذكره" في محادثة واحدة أو مهمة واحدة، بما في ذلك أسئلتك السابقة والإرشادات المقدمة من النظام والمواد ذات الصلة وغيرها.
|
||||
|
||||
بفضل السياق، يمكن للذكاء الاصطناعي فهم أنك تستمر في السؤال بناءً على المحتوى السابق، ويمكنه إجراء محادثات تبدو متماسكة وطبيعية جولة بعد جولة. بدون السياق، كل جملة منك ستبدو للمثل استفسارًا جديدًا تمامًا، ولن يعرف ما قلته سابقًا، وبالتالي لا يمكنه متابعة المحادثة.
|
||||
|
||||
كل نموذج لديه طول سياق فعّال خاص به (context window). هذا الطول يُقاس عادةً بـ token (يمكن فهمها تقريبًا كوحدة "أجزاء الكلمات")، حاليًا معظم النماذج السائدة تتراوح بين 32k إلى 128k token. كلما طال السياق، كلما استطاع النموذج "قراءة" محتوى أكثر في المرة الواحدة، مثل:
|
||||
|
||||
- قراءة ورقة بحثية أو تقرير طويل بالكامل دفعة واحدة
|
||||
- الرجوع إلى مواد متعددة وحالات متعددة في نفس جولة المحادثة
|
||||
- جعل النموذج يتذكر استنتاجات المناقشات المعقدة من الجولات السابقة
|
||||
|
||||
عندما يقترب المحتوى الذي تدخله من حد سياق النموذج أو يتجاوزه، غالبًا ما تظهر بعض الظواهر الشائعة:
|
||||
|
||||
- يبدأ النموذج في نسيان التفاصيل أو المعلومات الرئيسية في النصوص الطويلة السابقة
|
||||
- مع تقدم المحادثة، ينحرف الموضوع تدريجيًا عن الهدف الأصلي
|
||||
- بين الإجابات المختلفة على نفس المادة، يكون المحتوى المشار إليه غير متسق
|
||||
|
||||
هذه الظواهر ليست لأن النموذج "أصبح أغبى" فجأة، بل هي نتيجة طبيعية عندما يتم ملء سعة السياق أو الاقتراب من ملئها.
|
||||
|
||||
في الاستخدام الفعلي، نأمل أن يكون السياق طويلاً قدر الإمكان، ولكن يجب أيضًا أن ندرك:
|
||||
|
||||
- كلما طال السياق، زادت موارد الحوسبة المستهلكة
|
||||
- تكلفة الاستدعاء المقابلة (الرسوم) سترتفع أيضًا
|
||||
|
||||
لذلك، عند تصميم تطبيقات الذكاء الاصطناعي، نحتاج إلى تحقيق التوازن بين جعل النموذج يرى ما يكفي والتحكم في التكلفة وتحسين الكفاءة. على سبيل المثال:
|
||||
|
||||
- استخلاص المعلومات التي تحتاج حقًا إلى الاحتفاظ بها طويل الأمد قبل تقديمها للنموذج
|
||||
- بالنسبة للمعلومات التفصيلية التي لم تعد ضرورية، تجنب إدخالها كما هي مرارًا وتكرارًا في السياق
|
||||
- استخدام قواعد المعرفة الخارجية وغيرها من الطرق لتسليم "الذاكرة طويلة المدى" للنظام بدلاً من إجبارها في سياق النموذج
|
||||
|
||||
<a id="appendix-4"></a>
|
||||
|
||||
## [الملحق 4: قدرة اتباع التعليمات](#appendix-nav)
|
||||
|
||||
قدرة اتباع التعليمات تشير إلى: بعد أن يفهم النموذج تعليماتك، هل يمكنه تنفيذها بدقة واكتمال وفقًا لمتطلباتك. لا تشمل فقط القدرة على الإجابة على الأسئلة، بل تشمل أيضًا القدرة على إتمام المهام بالتنسيق والأسلوب والخطوات المحددة.
|
||||
|
||||
على سبيل المثال، فيما يلي جميعها تعليمات ذات متطلبات واضحة للنموذج:
|
||||
|
||||
- تلخيص هذه المقالة في ثلاث نقاط رئيسية
|
||||
- كتابة رد بريد إلكتروني بنبرة رسمية ومهذبة
|
||||
- ترجمة هذه الكلمة إلى الإنجليزية مع إنشاء جملة مثال لكل منها
|
||||
- استخراج المؤلف والوقت والأحداث الرئيسية من المقالة
|
||||
|
||||
النموذج ذو قدرة قوية في اتباع التعليمات عادةً ما يتميز بالخصائص التالية:
|
||||
|
||||
- إخراج المحتوى بالكمية المطلوبة
|
||||
على سبيل المثال، إذا طُلب تلخيص ثلاث نقاط، فلن يعطي خمس نقاط.
|
||||
- تغطية جميع العناصر المحددة
|
||||
على سبيل المثال، إذا طُلب استخراج المؤلف والوقت والحدث، فلن يفوت أيًا منها.
|
||||
- الالتزام بالتنسيق والنبرة المحددين
|
||||
على سبيل المثال، إذا طُلب استخدام نبرة رسمية، فلن يُخرج ردًا شفهيًا جدًا.
|
||||
- عدم القيام بإضافات غير ضرورية
|
||||
على سبيل المثال، إذا طُلب الترجمة وإنشاء جمل، فلن يُخرج فقرة طويلة من التفسيرات غير ذات الصلة.
|
||||
|
||||
في التطبيقات العملية، قدرة قوية في اتباع التعليمات مهمة جدًا، والأسباب تشمل:
|
||||
|
||||
- تحسين الاستقرار: نفس التعليمات في أوقات مختلفة وعند التشغيل المتعدد، تكون بنية الإخراج وأنماط السلوك أكثر اتساقًا، وأقل عرضة للتفلسف
|
||||
- تحسين إمكانية التكرار: عندما تقوم بتكوين prompt في منتج أو عملية، يمكنك توقع كيف سيستجيب النموذج تقريبًا، مما يسهل الاختبار والتكرار
|
||||
- تسهيل تكامل النظام: عندما يطابق إخراج النموذج التنسيق المتوقع، يكون من الأسهل التكامل تلقائيًا مع البرامج الخلفية وسير العمل أو الأدوات الأخرى
|
||||
|
||||
لذلك، عند اختيار وتقييم نموذج لغوي كبير، بالإضافة إلى الانتباه إلى ما إذا كان ذكيًا وما إذا كان تغطية المعرفة واسعة، تحتاج أيضًا إلى الانتباه بشكل خاص إلى قدرته في اتباع التعليمات. بالنسبة للتطبيقات الصناعية، القدرة على تنفيذ التعليمات بشكل مستقر ودقيق غالبًا ما تكون أهم من تقديم إجابة مذهلة في بعض الأحيان.
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="متابعة التعلم"
|
||||
description="انطلاقًا من تجربة الألعاب، نوصي بالمتابعة نحو التطوير المحلي والممارسة العملية للمنتجات."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
---
|
||||
title: 'Beginner 1: Talking Is Programming'
|
||||
description: 'Build an AI-native snake game through conversation, then reuse the workflow to create your own mini game or demo.'
|
||||
---
|
||||
File diff suppressed because it is too large
Load Diff
+359
@@ -0,0 +1,359 @@
|
||||
# مقارنة بين سبع أدوات برمجة بالذكاء الاصطناعي
|
||||
|
||||
## مقدمة الفصل
|
||||
|
||||
أمام هذا الكم الهائل من أدوات البرمجة بالذكاء الاصطناعي، أيُّها الأنسب لك؟ في هذا الفصل، نُجري تقييمًا أفقيًا معمّقًا لسبع منصات Vibe Coding على الويب — منها Lovable و Replit و Z.ai — من خلال مهمة عملية موحدة: تطوير لعبة "الثعبان + كتابة القصائد بالذكاء الاصطناعي". سنقارنها من عدة أبعاد مثل سهولة الاستخدام للمبتدئين، والتحكم في الكود، وسهولة النشر، لمساعدتك على اختيار أقوى أداة مساعدة في التطوير.
|
||||
|
||||
---
|
||||
|
||||
# 1. بناء لعبة الثعبان باستخدام Vibe Coding: دراسة تعليمية كاملة
|
||||
|
||||
تقدم هذه المقالة ممارسة تطوير برمجية جديدة تُسمّى "Vibe Coding"، والتي تستفيد من الذكاء الاصطناعي لتسريع عملية بناء التطبيقات.
|
||||
|
||||
بعد ذلك، سنقدم بالتتابع المفاهيم الأساسية لـ Vibe Coding، ونشرح ما هو AI Agent، ونقدم أساليب عملية لكتابة الأوامر التوجيهية (Prompts). أخيرًا، سنبني من الصفر لعبة "الثعبان (Snake)" كتطبيق عملي كامل، مع مقارنة وتقييم مفصّل لعدة منصات Vibe Coding رئيسية، لمساعدتك على اختيار مجموعة الأدوات الأنسب لك.
|
||||
|
||||
## ما ستتعلمه:
|
||||
|
||||
- **ما هو Vibe Coding:** تعرّف على تعريفه، وسير عمله، ومزاياه الرئيسية.
|
||||
- **دور AI Agent:** افهم طريقة عمل AI Agent والفرق بينه وبين البرامج التقليدية.
|
||||
- **كيفية كتابة أوامر توجيهية جيدة:** أتقن كتابة أوامر واضحة ومحددة للحصول على نتائج أفضل.
|
||||
- **أدوات Vibe Coding:** تعرّف على مجموعة من منصات البرمجة والتصميم بالذكاء الاصطناعي.
|
||||
- **مقارنة المنصات:** قيّم وقارن بين مزايا وعيوب 7 منصات AI Agent مختلفة من منظور المبتدئين.
|
||||
- **أدوات UI / UX:** تعلّم كيفية دمج أدوات UI/UX مثل Figma و Mastergo في سير العمل الشامل.
|
||||
|
||||
## 1. مقدمة
|
||||
|
||||
في الدروس السابقة، كنا نستخدم نموذج التطوير الشامل من z.ai لإنجاز مهام البرمجة.
|
||||
|
||||
لكن هل فكّرنا يومًا: جوهره هو في الواقع "AI Agent" (يختلف عن الذكاء الاصطناعي التفاعلي العادي، وهو أكثر ذكاءً بكثير)؟ فهو لا يقتصر على التحدث معك، بل يستطيع التفكير (عندما تعطيه مهمة، يضع خطة أولاً)، ويتخذ إجراءات بشكل استباقي (مثل الاتصال بالبحث على الويب، وتنفيذ أوامر الكمبيوتر، وفتح صفحات الويب وغيرها من الأدوات). سنتحدث عن هذا بالتفصيل لاحقًا.
|
||||
|
||||
## 1. ما هو Vibe Coding؟
|
||||
|
||||
Vibe Coding هو أسلوب جديد في تطوير البرمجيات يستفيد من الذكاء الاصطناعي لتسريع عملية تطوير التطبيقات. إنه ليس بديلاً عن البرمجة التقليدية، بل هو نمط برمجة أكثر "تحاوريًا". ابتكر هذا المفهوم باحث الذكاء الاصطناعي Andrej Karpathy: في سير العمل هذا، لم يعد المطور يكتب الكود سطرًا بسطر، بل يوجّه AI Agent بشكل أساسي لتوليد التطبيقات وتحسينها وتصحيح أخطائها.
|
||||
|
||||
الفكرة الأساسية في Vibe Coding هي التحول من **"التركيز على الكود (code-first)"** إلى **"التركيز على النية (intent-first)"**. لم تعد بحاجة للبدء بالتفكير من أول سطر كود، بل تصف ما تريده باللغة الطبيعية.
|
||||
|
||||
سير العمل النموذجي لـ Vibe Coding هو حلقة تكرارية مستمرة:
|
||||
|
||||
- **وصف الهدف:** صِف الميزة التي تريد تنفيذها بجملة أو فقرة، مثل: "اصنع لعبة ثعبان بسيطة مع خلفية Python يمكنها توليد القصائد."
|
||||
- **توليد الكود بالذكاء الاصطناعي:** يحلل AI Agent متطلباتك ويولّد النسخة الأولى من الكود، بما في ذلك الهيكل الأساسي وصفحة الواجهة الأمامية ومنطق الواجهة الخلفية.
|
||||
- **التشغيل والملاحظة:** شغّل الكود المُولَّد، وتحقق مما إذا كان يعمل كما هو متوقع، واكتشف الأخطاء أو أوجه القصور.
|
||||
- **التكرار والتحسين:** إذا كانت هناك أخطاء أو النتائج غير مُرضية، استمر في إعطاء التعليمات في المحادثة، مثل: "الثعبان يتحرك ببطء شديد، زيّد السرعة"، أو "ملف `.env` لا يقرأ مفتاح API بشكل صحيح، أصلح كود الواجهة الخلفية."
|
||||
- **كرر الخطوات أعلاه:** استمر في التكرار ضمن حلقة "وصف ← توليد ← تشغيل ← تحسين" حتى يصل التطبيق إلى حالة مُرضية.
|
||||
|
||||
### المزايا الرئيسية لـ Vibe Coding:
|
||||
|
||||
- **خفض الحاجز:** يتيح للمصممين ورواد الأعمال والطلاب الذين يفتقرون إلى خبرة البرمجة المشاركة في تطوير التطبيقات عبر اللغة الطبيعية.
|
||||
- **النماذج الأولية السريعة:** يُقلّص الوقت من الفكرة إلى الحد الأدنى من المنتج القابل للتطبيق (MVP) بشكل كبير.
|
||||
- **رفع الكفاءة:** يعالج تلقائيًا الكثير من أعمال الترميز المتكررة والآلية (مثل الكود النموذجي)، مما يتيح للمطورين التركيز على التصميم المعماري وتجريد المشكلات.
|
||||
- **تسهيل التجريب:** يشجع على الإنتاج السريع أولاً ثم التحسين المستمر، مما يجعل تجربة الأفكار والميزات الجديدة أسهل.
|
||||
|
||||
## 2. ما هي منصات Vibe Coding عبر الويب (Web-based)؟
|
||||
|
||||
في هذا الاختبار العملي، ستلاحظ أن الأدوات التي نقيمها مقسمة إلى فئتين: **Web-based (منصات عبر الويب)** و **IDE (بيئات تطوير محلية)**.
|
||||
|
||||
رغم أن جوهرها جميعًا هو استخدام الذكاء الاصطناعي لكتابة الكود، إلا أن هناك اختلافات كبيرة في تجربة الاستخدام والسيناريوهات المطبقة:
|
||||
|
||||
### منصات Vibe Coding عبر الويب (Web-based)
|
||||
|
||||
**الأدوات الممثلة:** Lovable، Replit، Z.ai، v0
|
||||
|
||||
هذا مثل "شقة فندقية جاهزة للسكن".
|
||||
|
||||
- **لا حاجة لإعداد البيئة:** لا تحتاج للقلق بشأن بيئة Python أو إصدار Node.js، ولا حول تثبيت التبعيات. افتح المتصفح، أدخل العنوان، وابدأ بكتابة الكود مباشرة.
|
||||
- **معاينة ونشر بنقرة واحدة:** بعد توليد الكود، تعرض المنصة عادةً النتيجة تلقائيًا في نافذة جانبية. وعند الانتهاء، اضغط على زر للحصول على رابط لمشاركته مع أصدقائك.
|
||||
- **السيناريوهات المناسبة:**
|
||||
- **التحقق السريع من الأفكار (MVP):** لديك فكرة في ذهنك وتريد قضاء نصف ساعة لترى إن كان يمكنك تنفيذها.
|
||||
- **للمبتدئين:** لا تريد أن تُحبط بسبب أخطاء البيئة المعقدة، وتريد فقط تجربة متعة البرمجة بالذكاء الاصطناعي.
|
||||
- **التطبيقات الخفيفة:** صنع صفحة أداة بسيطة أو لعبة صغيرة أو صفحة عرض شخصية.
|
||||
|
||||
### AI IDE (بيئة التطوير المحلية)
|
||||
|
||||
**الأدوات الممثلة:** Cursor، Trae، VS Code + إضافات AI
|
||||
|
||||
هذا مثل "منزل مملوك مُشطَّب بالكامل".
|
||||
|
||||
- **قدرات محلية قوية:** يعمل على كمبيوترك، ويمكنه الوصول مباشرة إلى جميع ملفاتك المحلية والاستفادة من قوة المعالجة في جهازك.
|
||||
- **تكامل سلس مع سير العمل المهني:** مناسب للمشاريع الكبيرة، حيث يمكنك تثبيت مكونات إضافية متنوعة بحرية، والاتصال بقواعد البيانات المحلية، وإجراء تصحيح الأخطاء المعقد.
|
||||
- **السيناريوهات المناسبة:**
|
||||
- **تطوير المشاريع المهنية:** المشاريع التجارية التي تتطلب صيانة طويلة الأمد وهيكلًا معقدًا.
|
||||
- **التخصيص العميق:** تحتاج إلى تحكم دقيق في تفاصيل الكود، أو تحتاج إلى تكامل عميق مع سير العمل المحلي (مثل Git و Docker).
|
||||
- **خصوصية البيانات:** الكود بالكامل محليًا، مما يتوافق بشكل أكبر مع معايير الأمان لبعض المؤسسات.
|
||||
|
||||
**باختصار:** إذا كنت قد بدأت للتو في البرمجة بالذكاء الاصطناعي، أو تريد فقط صنع شيء صغير بسرعة، فإن **المنصات عبر الويب** هي نقطة بداية ممتازة. أما إذا كنت مطورًا محترفًا، أو أصبح مشروعك أكثر تعقيدًا، فإن **بيئة التطوير المحلية (IDE)** ستوفر لك إمكانيات أعلى.
|
||||
|
||||
---
|
||||
|
||||
## 3. ما هو AI Agent؟
|
||||
|
||||
### ما هو AI Agent؟
|
||||
|
||||
AI Agent هو نظام برمجي قادر على إدراك البيئة واتخاذ القرارات والتصرف بشكل مستقل لتحقيق أهداف محددة. مقارنة بالبرمجيات التقليدية التي تتبع تعليمات ثابتة وتدفقات عمل واحدة، فإن AI Agent أكثر مرونة وقدرة على التكيف.
|
||||
|
||||
فيما يلي بعض السمات الرئيسية التي تميز AI Agent عن البرامج التقليدية:
|
||||
|
||||
- **الاستقلالية (Autonomy):** يتمتع AI Agent بمستوى عالٍ من الاستقلالية. البرامج التقليدية تتطلب عادةً أن يقوم الإنسان بتشغيلها خطوة بخطوة، بينما يمكن لـ Agent أن يقرر بشكل مستقل الخطوة التالية بناءً على الهدف.
|
||||
- **الإدراك والذاكرة (Perception & Memory):** يجمع Agent البيانات من البيئة (مثل استجابات API وبيانات المستشعرات ومُدخلات المستخدم)، ويحتفظ بالسياق من خلال "الذاكرة"، مما يتيح له إعادة استخدام الخبرات في الإجراءات اللاحقة والتحسين المستمر.
|
||||
- **العقلانية والتوجه نحو الهدف (Rationality & Goal-Orientation):** يحلل Agent ويخطط حول الهدف المحدد، ويختار تسلسل الإجراءات الأنسب لتحقيق "مؤشرات أداء" أعلى.
|
||||
- **استخدام الأدوات (Tool Use):** من أبرز سمات AI Agent الحديثة قدرته على استدعاء أدوات خارجية، ولم يعد مقتصرًا على "توليد النصوص". على سبيل المثال، يمكنه تصفح الويب، وتشغيل الكود، والاستعلام من قواعد البيانات، وإرسال البريد الإلكتروني، فهو "عقل ينسق الأدوات".
|
||||
|
||||
يمكن فهمه بهذا التشبيه:
|
||||
|
||||
- **البرنامج التقليدي** مثل الآلة الحاسبة. تعطيه أرقامًا ومعاملات، وهو ينفذ الحساب فقط عند ضغطك على الزر.
|
||||
- **مساعد الذكاء الاصطناعي** مثل المساعد البشري. تطلب منه "ساعدني في العثور على مطاعم قريبة"، فيبحث لك ويعرض الخيارات، لكن القرار النهائي يعود إليك.
|
||||
- **AI Agent** أشبه بفريق بحثي آلي. تحتاج فقط إلى إعطائه هدفًا عامًا (مثل "خطط لي رحلة إلى اليابان")، فيقوم بتفكيك المهام، والبحث على الإنترنت، وحجز الطيران والفنادق (عبر API)، وتنظيم الجدول، ويسلّمك النتيجة النهائية، كل ذلك تقريبًا دون الحاجة لتدخلك في التفاصيل.
|
||||
|
||||
---
|
||||
|
||||
# 2. حول كتابة الأوامر التوجيهية (Prompts)
|
||||
|
||||
## 1. هل الأفضل كتابة أمر توجيهي واحد كامل، أم تقسيمه إلى خطوات متعددة؟
|
||||
|
||||
كثير من الناس يغريهم التفكير في كتابة "تطبيق شامل كامل" في أمر توجيهي واحد. في الواقع، الأدوات الحالية أصبحت قوية بما يكفي، ومن الممكن بالفعل الحصول على نتيجة تبدو جيدة من المحاولة الأولى. لكن من حيث التجربة الشاملة ومعدل النجاح، فإن تقسيم العمل إلى خطوات صغيرة والتكرار المرحلي غالبًا ما يعطي نتائج أفضل، ويقلل من خطر الدخول في "طريق مسدود" لا يمكن تعديله.
|
||||
|
||||
> **نصيحة صغيرة:** بدلاً من توقع "النتيجة المثالية من المحاولة الأولى"، قسّم الهدف الكبير إلى مهام صغيرة قابلة للتنفيذ (To-do).
|
||||
> على سبيل المثال، لا تقل مباشرة "build me a Snake game"، بل قسّمها إلى:
|
||||
> "1. اصنع أولاً واجهة أمامية للعبة الثعبان"،
|
||||
> "2. ثم نفّذ واجهة خلفية لتسجيل النقاط"،
|
||||
> "3. أخيرًا اربط الواجهتين الأمامية والخلفية".
|
||||
> هذا يتيح للذكاء الاصطناعي فهم متطلباتك بدقة أكبر وإعطاء مخرجات أكثر موثوقية.
|
||||
|
||||
## 2. كلما كان أوضح، كان أفضل
|
||||
|
||||
- في Vibe Coding، فإن الأوامر التوجيهية التي تكتبها بنفس أهمية الكود الذي تكتبه. كلما كانت التعليمات أوضح وأكثر تحديدًا، كانت النتائج أقرب لما تتصوره.
|
||||
- توضيح الأهداف والقيود منذ البداية يُقلل من عدد التعديلات اللاحقة، مما يوفر الوقت ويقلل من استخدام الحصة والتكلفة.
|
||||
|
||||
---
|
||||
|
||||
# 3. نظرة عامة على الأدوات (Vibe Coding / أدوات UIUX)
|
||||
|
||||
## 1. منصات AI Agent
|
||||
|
||||
| **الاسم** | **المنصة** |
|
||||
| ------------------------------------------ | ------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
|
||||
## 2. منصات AI UIUX
|
||||
|
||||
| **الاسم** | **المنصة** |
|
||||
| ------------------------------------- | -------------------- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[Figma](https://www.figma.com/)** | Web-based, PC Plugin |
|
||||
|
||||
---
|
||||
|
||||
# 4. التطبيق العملي (Vibe Coding + تكامل UI)
|
||||
|
||||
1. في نافذة المحادثة الخاصة بمنصة Vibe Coding التي اخترتها، أدخل وصف البرنامج الذي تريده.
|
||||
مثال:
|
||||
|
||||
> يُرجى بناء تطبيق ويب بسيط للعبة الثعبان (Snake) مع واجهة أمامية وواجهة خلفية.
|
||||
>
|
||||
> 1. الواجهة الأمامية
|
||||
>
|
||||
> - الصفحة 1: صفحة اللعبة
|
||||
> - استخدم لوحة المفاتيح للتحكم في حركة الثعبان.
|
||||
> - ما يأكله الثعبان ليس طعامًا، بل كلمات إنجليزية.
|
||||
> - يعرض الشريط الجانبي الكلمات المجمّعة وعددها.
|
||||
> - بعد انتهاء اللعبة، تظل الكلمات المجمّعة محفوظة وتستمر في الجولة الجديدة.
|
||||
> - الصفحة 2: صفحة كتابة القصائد (Make Poem)
|
||||
> - تعرض نفس قائمة الكلمات الموجودة في صفحة اللعبة (البيانات متسقة).
|
||||
> - توفر زرًا لإرسال الكلمات المجمّعة إلى الواجهة الخلفية لتوليد قصيدة.
|
||||
> - بعد توليد القصيدة، تُزال الكلمات المُستخدَمة من القائمة أو يُنقص عددها.
|
||||
>
|
||||
> * أضف تنقلًا بسيطًا للتبديل بين صفحتي Game و Make Poem.
|
||||
> * تأكد من أن الكلمات المجمّعة مرئية في كلتا الصفحتين.
|
||||
>
|
||||
> 2. الواجهة الخلفية
|
||||
>
|
||||
> - وفر واجهة خلفية تستقبل الكلمات المجمّعة وتُرجع قصيدة.
|
||||
> - استخدم DeepSeek API لتوليد القصائد.
|
||||
> - خزّن مفتاح API في ملف `.env`، وتجاهل هذا الملف في `.gitignore`.
|
||||
|
||||
2. أدخل مفتاح DeepSeek API الخاص بك. (يمكنك الحصول عليه من [https://platform.deepseek.com/](https://platform.deepseek.com/))
|
||||
1. يُستخدم مفتاح API للنموذج اللغوي الكبير (LLM) لاستدعاء النموذج في مشروعك الخاص. وبما أنه معلومات حساسة، فلا يمكن نشرها، لذلك يجب كتابتها بشكل منفصل في ملف الإعدادات.
|
||||
**لماذا نستخدم ملف `.env` ولا نرفعه إلى GitHub؟**
|
||||
- ملف `.env` مخصص لتخزين **المفاتيح أو كلمات المرور** (مثل مفتاح DeepSeek API).
|
||||
- إذا رُفع هذا الملف إلى GitHub، يمكن لأي شخص في العالم رؤية مفتاحك واستخدامه بشكل غير مصرح به.
|
||||
- لأسباب أمنية، نحتاج إلى إعلان تجاهل `.env` في ملف `.gitignore`، حتى لا يتتبعه Git.
|
||||
- هكذا، يمكن لمشروعك استخدام هذه المفاتيح محليًا بشكل طبيعي دون تسريبها في المستودع.
|
||||
|
||||
3. بعد عرض النتيجة المُولَّدة، إذا وجدت أخطاء أو أشياء تحتاج إلى تعديل، يمكنك إدخال طلب التعديل مباشرة في نافذة المحادثة.
|
||||
4. إذا لم تكن راضيًا عن تصميم الصفحة، يمكنك أيضًا اختيار إعادة تصميم الواجهة في Figma أو Mastergo، ثم إعادة أفكار التصميم إلى Agent.
|
||||
|
||||
- **مثال**
|
||||
|
||||
> يُرجى تصميم **تطبيق ويب بصفحتين** باسم _Word-Snake_.
|
||||
>
|
||||
> - **صفحة Game:**
|
||||
> - يتحرك الثعبان عبر لوحة المفاتيح.
|
||||
> - الثعبان يأكل كلمات إنجليزية بدلاً من الطعام العادي.
|
||||
> - يعرض الشريط الجانبي الأيمن الكلمات المجمّعة وعددها.
|
||||
> - بعد انتهاء اللعبة، لا يُمسك مخزون الكلمات، بل يُستمر في الجولة الجديدة.
|
||||
> - **صفحة Make Poem:**
|
||||
> - تعرض نفس مخزون الكلمات المشترك.
|
||||
> - يختار المستخدم بعض الكلمات وينقر على زر **Generate Poem**.
|
||||
> - تُرسل هذه الكلمات إلى الواجهة الخلفية لتوليد قصيدة عبر DeepSeek API.
|
||||
> - بعد توليد القصيدة، تُحذف أو يُنقص عدد الكلمات المُستخدَمة من المخزون.
|
||||
> - **التنقل:** عبر تبويب بسيط أو قائمة علوية للتبديل بين الصفحتين.
|
||||
> - **الحالة المشتركة:** تأكد من أن الكلمات المجمّعة تظل متزامنة ومرئية في كلتا الصفحتين.
|
||||
|
||||
- **نموذج للنتيجة**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. مقارنة منصات AI Agent (كيفية اختيار أفضل مجموعة للمشاريع البسيطة)
|
||||
|
||||
تتمتع منصات Vibe Coding المختلفة بخصائص وسير عمل متنوعة. استخدمنا نفس متطلبات "لعبة الثعبان مع DeepSeek API" للاختبار العملي على منصات متعددة، وقمنا بتقييمها من منظور المبتدئين. فيما يلي ملخص.
|
||||
|
||||
## 1. معايير المقارنة
|
||||
|
||||
1. **الهدف (Goal)**
|
||||
بناء تطبيق ويب للعبة الثعبان (Snake) متصل بـ DeepSeek API.
|
||||
2. **تفاصيل اللعبة (Game Details)**
|
||||
1. تولّد اللعبة قصائد عبر DeepSeek LLM API.
|
||||
2. الثعبان يأكل كلمات إنجليزية، والكلمات المجمّعة تظل محفوظة بعد انتهاء اللعبة وتُستخدم في الجولة الجديدة. يمكن جمع نفس الكلمة عدة مرات وتُحسب بشكل منفصل.
|
||||
3. عند توليد قصيدة، تُزال الكلمات المُستخدَمة من المخزون.
|
||||
|
||||
3. **الميزات الضرورية (Must-Haves)**
|
||||
1. صفحة واجهة أمامية قابلة للتشغيل، تتضمن لعبة الثعبان (تحكم بلوحة المفاتيح، عرض عبر Canvas).
|
||||
2. آلية جمع الكلمات (تظهر الكلمات على اللوحة، وعند أكل الثعبان لكلمة، يُحدَّث الشريط الجانبي).
|
||||
3. الحفاظ على مخزون الكلمات بين جولات اللعب المتعددة.
|
||||
4. واجهة خلفية تستخدم DeepSeek API (إذا لم يكن لديك مفتاح API، يمكن إرجاع قصيدة تجريبية أولاً).
|
||||
5. زر "توليد قصيدة": عند النقر عليه يستدعي الواجهة الخلفية، ويعرض القصيدة، ويُحدِّث مخزون الكلمات بناءً على الاستخدام.
|
||||
6. دعم مفتاح API عبر `.env`، وتجنب تسريب المفتاح عبر `.gitignore`.
|
||||
|
||||
4. **ميزات إضافية (Nice-to-Haves)**
|
||||
1. يمكن للمستخدم اختيار الكلمات التي يريد استخدامها لتوليد القصيدة.
|
||||
2. تجربة مستخدم مريحة (مثل شريط جانبي يعرض قائمة الكلمات بوضوح، وتخطيط منطقي لمنطقة عرض القصائد).
|
||||
3. إضافة تعليقات في الكود للمبتدئين تشرح المنطق الأساسي.
|
||||
|
||||
## 2. مقارنة مخرجات البرمجة
|
||||
|
||||
### 1. Lovable (Web-based)
|
||||
|
||||
- **نوع المنصة:** عبر الويب
|
||||
- **الخصائص الرئيسية وسير العمل:** يتميز Lovable بالتكامل والتعاون، حيث يُتمت تلقائيًا مهام التهيئة مثل الاتصال بقاعدة بيانات Supabase، مما يجعل عملية إعداد المشروع سلسة جدًا. تحتاج فقط إلى وصف متطلبات المشروع، وسيقوم Agent بربط الخدمات المختلفة وبناء الهيكل الأساسي.
|
||||
- **المستخدمون المناسبون:** بالنسبة للمبتدئين الذين يجربون Vibe Coding لأول مرة، يُعد Lovable خيارًا ودودًا للغاية. فهو يُبسّط تعقيد تنسيق الخدمات المتعددة، مما يتيح لك التركيز على الأوامر التوجيهية والتكرار بدلاً من إعداد البيئة. بفضل الأتمتة العالية، يمكنك الحصول بسرعة على نموذج أولي قابل للتشغيل.
|
||||
- **عملية الأوامر التوجيهية:**
|
||||
|
||||
- **نتيجة لعبة الثعبان:**
|
||||
|
||||
|
||||
|
||||
- **السعر:** مرتفع نسبيًا، ولكن إذا كان لديك بريد إلكتروني جامعي، يمكنك التحقق من هويتك كطالب للحصول على نصف السعر.
|
||||
|
||||
|
||||
### 2. Cursor (IDE)
|
||||
|
||||
- **نوع المنصة:** تطبيق سطح مكتب (PC)
|
||||
- **الخصائص الرئيسية وسير العمل:** Cursor هو IDE متكامل مع قدرات الذكاء الاصطناعي، يدعم Windows و macOS و Linux. يُدمج توليد الكود وإعادة الكتابة الذكية والبحث في قاعدة الكود مباشرة في بيئة التطوير. مقارنة بأدوات الويب، فهو أقرب إلى تجربة التطوير المحلي التقليدية. نظرًا لأنه بيئة محلية، تختلف إعدادات الكمبيوتر من جهاز لآخر، وقد تواجه أحيانًا مشاكل متعلقة بالبيئة. الميزة هي أن المشروع على جهازك المحلي، ولا حاجة لتنزيل أو إعداد بيئة تشغيل إضافية، حيث يعالج Cursor الكثير من الخطوات المرهقة نيابةً عنك.
|
||||
- **المستخدمون المناسبون:** للمستخدمين الذين لديهم بالفعل بعض أساسيات البرمجة، يُعد Cursor بيئة مألوفة وقوية جدًا. ولكن للمبتدئين تمامًا، يحتاجون إلى فهم بنية المشروع وإدارة التبعيات وتنظيم الملفات بأنفسهم، مما يجعل منحنى التعلم أكثر انحدارًا. وهو أكثر ملاءمة للمطورين الذين يريدون إضافة مساعد ذكاء اصطناعي إلى سير البرمجة التقليدي.
|
||||
- **عملية الأوامر التوجيهية:**
|
||||
|
||||
- **نتيجة لعبة الثعبان:**
|
||||
|
||||
|
||||
|
||||
- **السعر:**
|
||||
|
||||
|
||||
### 3. Z.ai (Web-based)
|
||||
|
||||
- **نوع المنصة:** عبر الويب
|
||||
- **الخصائص الرئيسية وسير العمل:** طريقة استخدام Z.ai مباشرة نسبيًا، لكن هناك تحديًا واضحًا: تحتاج إلى **نسخ الكود المُولَّد ولصقه يدويًا**. تفتقر المنصة نفسها إلى نافذة معاينة فورية، لذا يصعب رؤية نتيجة تشغيل الكود في الوقت المناسب.
|
||||
- **المستخدمون المناسبون:** تتطلب هذه المنصة أسلوبًا "عمليًا" في الاستخدام. غياب الأتمتة يعني أنه يجب عليك التعامل مع الكود مباشرة، وهو ما يمثل تدريبًا لمن يريد فهم مخرجات الذكاء الاصطناعي بعمق. لكن النسخ واللصق المتكرر يسبب مشاكل في الكفاءة وخطر الأخطاء. وهي أكثر ملاءمة لمن يريد رؤية "الكود الخام من مخرجات الذكاء الاصطناعي"، وليس لمن يسعى لتجربة بنقرة واحدة.
|
||||
- **عملية الأوامر التوجيهية:**
|
||||
|
||||
- **نتيجة لعبة الثعبان:**
|
||||
|
||||
|
||||
|
||||
- **السعر:**
|
||||
|
||||
|
||||
### 4. Replit (Web-based)
|
||||
|
||||
- **نوع المنصة:** عبر الويب
|
||||
- **الخصائص الرئيسية وسير العمل:** Replit هو بيئة تطوير ونشر شاملة عبر الإنترنت، حيث يمكنك كتابة الكود وتشغيل البرامج وإنشاء عنوان وصول عبر الإنترنت من المتصفح. قبل بدء البرمجة، يقدم خطة عمل واضحة؛ كما يوفر محررًا مرئيًا يمكنك من خلاله تعديل واجهة المستخدم مباشرة في نافذة المعاينة، ويتم تحديث الكود المصدري تلقائيًا. هذا يتيح لك التحقق في أي وقت مما إذا كانت مخرجات الذكاء الاصطناعي تتوافق مع التوقعات، ويقلل بشكل كبير من عدد التعديلات ذهابًا وإيابًا.
|
||||
|
||||
|
||||
|
||||
- **المستخدمون المناسبون:** Replit ودود جدًا للمبتدئين. فهو يُبسّط الحلقة الكاملة من البرمجة إلى النشر، دون الحاجة لإعداد خوادم أو خدمات استضافة إضافية بنفسك. ميزات التعاون قوية أيضًا، ومناسبة للطلاب الذين يعملون معًا في مشروع أو يطلبون مساعدة الآخرين عن بُعد لمراجعة الكود.
|
||||
- **عملية الأوامر التوجيهية:** أثناء عملية البناء، لم يفهم الذكاء الاصطناعي المتطلبات بالكامل من البداية، وخضع لحوالي 3 جولات من التكرار قبل أن تصل المخرجات النهائية إلى المستوى المطلوب.
|
||||
|
||||
- **نتيجة لعبة الثعبان:**
|
||||
|
||||
|
||||
|
||||
- **السعر:**
|
||||
|
||||
|
||||
### 5. Minimax (Web-based)
|
||||
|
||||
- **نوع المنصة:** عبر الويب
|
||||
- **الخصائص الرئيسية وسير العمل:** يستغرق Minimax وقتًا أطول عادةً في تنفيذ المهام. تشمل عمليته غالبًا: اكتشاف الذكاء الاصطناعي للأخطاء وإصلاحها تلقائيًا، لذلك قد تكون العملية بأكملها بطيئة وحتى مرهقة بعض الشيء. في هذا المشروع كمثال، يضع Agent عادةً خطة مفصلة أولاً، ثم يبني خطوة بخطوة الواجهة الخلفية وقاعدة البيانات ومنطق الواجهة الأمامية.
|
||||
- **المستخدمون المناسبون:** نظرًا لأنه يُشغّل الاختبارات ويصلح الأخطاء تلقائيًا، فإن استهلاك الوقت والرموز (Tokens) كبير نسبيًا، لكن يمكنك رؤية بوضوح كيف يحدد الذكاء الاصطناعي المشاكل ويحلها، مما يجعله ذا قيمة تعليمية كبيرة.
|
||||
- **عملية الأوامر التوجيهية:**
|
||||
|
||||
|
||||
|
||||
- **نتيجة لعبة الثعبان:**
|
||||
|
||||
|
||||
|
||||
- **السعر:** الإصدار المجاني قد لا يتمكن من إكمال المشاريع المعقدة من البداية إلى النهاية بسلاسة، لذا يُوصى بشدة بالترقية إلى الإصدار المدفوع لضمان بناء المشروع بالكامل.
|
||||
|
||||
|
||||
### 6. Trae (IDE)
|
||||
|
||||
- **نوع المنصة:** تطبيق سطح مكتب (PC)
|
||||
- **الخصائص الرئيسية وسير العمل:** كتطبيق سطح مكتب، يتميز Trae عادةً بأداء أفضل وسرعة استجابة أعلى مقارنة بأدوات الويب. لكنه يتطلب التنزيل والتثبيت، مما يرفع قليلاً من حاجز الدخول لبعض المستخدمين. وبالمثل، نظرًا لكونه بيئة محلية، فإن اختلاف إعدادات الكمبيوتر وبيئات التبعية بين الأجهزة المختلفة يضيف قدرًا من عدم اليقين. الميزة هي أن Trae يساعدك في إنشاء المشروع وإعداد التشغيل محليًا، ويمكنك التطوير والتصحيح مباشرة على جهازك.
|
||||
- **المستخدمون المناسبون:** أكثر ملاءمة للمستخدمين الذين يخططون لمشاريع Vibe Coding طويلة الأمد ويرغبون في استخدام أداة سطح مكتب مخصصة. للطلاب الذين يريدون فقط "التجربة أحيانًا"، قد لا يكون الخيار الأخف.
|
||||
- **عملية الأوامر التوجيهية:**
|
||||
|
||||
- **نتيجة لعبة الثعبان:**
|
||||
|
||||
|
||||
|
||||
- **السعر:** السعر معقول نسبيًا، وحتى الإصدار المجاني كافٍ لإنجاز مشاريع صغيرة بجودة جيدة.
|
||||
|
||||
|
||||
### 7. V0 (Web-based)
|
||||
|
||||
- **نوع المنصة:** عبر الويب
|
||||
- **الخصائص الرئيسية وسير العمل:** V0 هو أداة متخصصة في توليد مكونات React UI، تقدمها Vercel. يتميز بتوليد واجهات عالية الجودة وقابلة للاستخدام في بيئة الإنتاج. لكن في الاستخدام الفعلي، قد تواجه مشاكل مثل "صعوبة العثور على عرض الكود" و"عدم وجود توضيح واضح حول مكان تكوين مفتاح API".
|
||||
- **المستخدمون المناسبون:** V0 مناسب جدًا للطلاب أو المصممين المهتمين بالواجهة الأمامية وتصميم UI/UX. لكنه ليس حلاً شاملاً متكاملاً، ولا يزال يتعين عليك استخدام منصات أخرى لتنفيذ منطق الواجهة الخلفية وتكامل API، لذلك إذا كان هدفك "بناء تطبيق كامل في مكان واحد"، فقد لا يكون الخيار الأول الأفضل.
|
||||
- **عملية الأوامر التوجيهية:**
|
||||
|
||||
|
||||
|
||||
|
||||
- **نتيجة لعبة الثعبان:**
|
||||
|
||||
- **السعر:** يمكن للمستخدمين المجانيين بناء حوالي 4-5 مشاريع بسيطة.
|
||||
|
||||
|
||||
## 3. ملخص المقارنة بين المنصات
|
||||
|
||||
| **المنصة** | **التقييم** | **نوع المنصة** | **ملاحظات** |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | ودود جدًا مع مبتدئي البرمجة بالذكاء الاصطناعي، سهل البدء وتجربة سلسة، خيار مثالي للبدء. | Web-based | يُتمت تلقائيًا الاتصال بخدمات مثل Supabase، مما يُقلل تكلفة الإعداد. |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | مناسب للمستخدمين الذين لديهم خبرة تطوير مسبقة، يرفع الإنتاجية وجودة الكود بشكل كبير. | PC | يتطلب بعض أساسيات البرمجة، ويجب فهم بنية المشروع والتبعيات في البيئة المحلية بنفسك. |
|
||||
| **[Z.ai](https://chat.z.ai/)** | أكثر ملاءمة للمستخدمين الذين لديهم أساسيات برمجة ويريدون دراسة تفاصيل كود مخرجات الذكاء الاصطناعي مباشرة. | Web-based | لا توجد نافذة معاينة، وفحص النتائج أكثر صعوبة؛ يتطلب لصق الكود يدويًا وإنشاء المجلدات والملفات وتشغيل الخدمة يدويًا. |
|
||||
| **[Replit](https://replit.com/~)** | موصى به للمستخدمين الذين يريدون تحويل أفكارهم بسرعة إلى خدمة عبر الإنترنت قابلة للوصول. | Web-based | بيئة تطوير ونشر شاملة عبر الإنترنت، تدعم التعاون وتوفر محررًا مرئيًا. |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | مناسب لمن يريد رؤية العملية الكاملة للبحث عن الأخطاء وإصلاحها تلقائيًا بالذكاء الاصطناعي والتعلم منها، لكنه بطيء نسبيًا ويستهلك رموزًا كثيرة. | Web-based | العملية بأكملها طويلة، ويُشغّل الذكاء الاصطناعي الاختبارات ويصلح الأخطاء عدة مرات تلقائيًا. |
|
||||
| **[Trae](https://www.trae.ai/)** | للمستخدمين ذوي الخبرة في البرمجة الذين يتطلعون لاستخدام مزيج IDE سطح المكتب + AI Agent، أداة قوية لتعزيز الكفاءة. | PC | يتطلب تثبيتًا محليًا وإعداد بيئة، لكن أداءً أفضل، ومناسب لمشاريع Vibe Coding طويلة الأمد. |
|
||||
| **[V0](https://v0.app/)** | مُحسَّن لغير المطورين الذين يريدون صنع تأثيرات مرئية سريعة لـ React UI، مناسب للطلاب ذوي التوجه الأمامي/التصميم. | Web-based | متخصص في توليد React UI، ويحتاج للتعاون مع منصات أخرى لإكمال الواجهة الخلفية وبناء التطبيق الكامل. |
|
||||
---
|
||||
title: 'Comparison Of 7 AI Coding Tools'
|
||||
description: 'A hands-on benchmark of popular Web Vibe Coding platforms using one unified task, covering beginner-friendliness, code control, and deployment.'
|
||||
---
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
# تصميم موقع ويب باستخدام وكلاء التصميم والبرمجة
|
||||
|
||||
## مقدمة الفصل
|
||||
|
||||
سيوضح لك هذا الفصل كيف يمكن للتصميم والتطوير أن يتعاونا بشكل مثالي من خلال الذكاء الاصطناعي. ستلعب دور مدير المنتج، حيث تقوم بتوجيه "وكيل التصميم" لإكمال تصميم الشعار ومخطط الألوان وتخطيط الصفحات، ثم التنسيق مع "وكيل البرمجة" لتحويل التصميمات المرئية إلى كود قابل للتشغيل. من الفكرة الإبداعية إلى إطلاق الموقع، ستختبر عملية تطوير مدعومة بالذكاء الاصطناعي بالكامل، مما يجعلك فريقًا كاملاً في شخص واحد.
|
||||
|
||||
---
|
||||
|
||||
# 1. دليل البدء
|
||||
|
||||
## 1. مقدمة الدورة التعليمية
|
||||
|
||||
دعنا نستخدم وكيل تصميم ووكيل برمجة مدعومين بالذكاء الاصطناعي لبناء موقع ويب كامل من الصفر.
|
||||
|
||||
- **وكيل التصميم**: مسؤول عن إنشاء الشعار وتخطيط صفحات الويب ومخطط الألوان والعناصر المرئية الأخرى
|
||||
- **وكيل البرمجة**: يكتب الكود الفعلي مثل HTML/CSS/JS بناءً على المتطلبات والتخطيطات التي تحددها في التعليمات، لبناء موقع ويب قابل للتشغيل
|
||||
|
||||
## 2. وكيل التصميم ووكيل البرمجة
|
||||
|
||||
- **وكيل التصميم**: ذكاء اصطناعي يقوم بتوليد الصور ونماذج الصفحات أو أنماط التصميم بناءً على التعليمات التي تقدمها.
|
||||
- Mastergo
|
||||
- Lovart
|
||||
- Figma MCP
|
||||
- **وكيل البرمجة**: ذكاء اصطناعي يكتب الكود الفعلي (HTML/CSS/JS وغيرها) بناءً على الوظائف والتخطيطات التي تطلبها في التعليمات.
|
||||
- Z.AI
|
||||
- Trae
|
||||
- Cursor
|
||||
- Lovable
|
||||
|
||||
---
|
||||
|
||||
# 2. إنشاء شعار باستخدام وكيل التصميم
|
||||
|
||||
## 1. العناصر الرئيسية التي يجب مراعاتها عند تصميم الشعار
|
||||
|
||||
الشعار هو أحد العناصر الرئيسية التي تحدد الانطباع الأول عن موقعك. للحصول على نتائج مرضية من وكيل التصميم بالذكاء الاصطناعي، يجب أن تصف بوضوح في التعليمات نوع الشعار الذي تريده.
|
||||
|
||||
1. **اسم العلامة التجارية / النص**
|
||||
|
||||
- النص الذي يجب أن يظهر في الشعار (مثل: عنوان الموقع، اسم العلامة التجارية، إلخ).
|
||||
|
||||
2. **النمط (المزاج / الأجواء)**
|
||||
|
||||
- الشعور أو الأجواء العامة التي يريد الشعار إيصالها.
|
||||
- _أمثلة: بسيط، لطيف، أنيق، حديث، كلاسيكي، مستقبلي، إلخ._
|
||||
|
||||
3. **مخطط الألوان** (اختياري)
|
||||
|
||||
- من الأفضل أن تتوافق ألوان الشعار مع الطابع العام للموقع بأكمله.
|
||||
- يمكنك تحديد رموز ألوان سداسية عشرية محددة، أو درجات ألوان عامة (ألوان باردة، دافئة، إلخ).
|
||||
- _أمثلة: **`#171721`** (أسود)، **`#FF7130`** (برتقالي)._
|
||||
|
||||
4. **الشكل (الهيئة / البنية)**
|
||||
|
||||
- حدد ما إذا كان الشعار يحتاج إلى شكل أو تكوين معين.
|
||||
- _أمثلة: نص داخل دائرة، مجموعة أيقونة + نص، شعار يعتمد بشكل أساسي على الأيقونة، إلخ._
|
||||
|
||||
5. **عناصر الأيقونة / الرمز** (اختياري)
|
||||
|
||||
- الرسومات أو الرموز التي ترغب في ظهورها في الشعار.
|
||||
- _أمثلة: أيقونة كتاب، رمز برق، رسومات متعلقة بالذكاء الاصطناعي، أشكال هندسية مجردة، إلخ._
|
||||
|
||||
## 2. كتابة تعليمات تصميم الشعار
|
||||
|
||||
**نموذج تعليمات**
|
||||
|
||||
```
|
||||
"يرجى تصميم شعار بأسلوب بسيط، اسم العلامة التجارية هو 'My First Website'.
|
||||
استخدم اللون الأسود (#171721) والبرتقالي (#FF7130)، وضع النص داخل دائرة."
|
||||
```
|
||||
|
||||
```
|
||||
"يرجى تصميم شعار باسم العلامة التجارية 'AIID'.
|
||||
يجب أن يكون الأسلوب العام مستقبليًا ونظيفًا وبسيطًا، مع اللون الأزرق والأبيض كلون رئيسي.
|
||||
ادمج رسومًا مجردة ترمز للذكاء الاصطناعي مع النص، وصدّره كملف PNG بخلفية شفافة."
|
||||
```
|
||||
|
||||
## 3. طلب التصميم من الوكيل
|
||||
|
||||
- أدخل التعليمات المذكورة أعلاه → قارن بين التصميمات المتعددة التي أنشأها الوكيل.
|
||||
|
||||
|
||||
|
||||
## 4. تحديد الشعار النهائي
|
||||
|
||||
- اختر النسخة المفضلة لديك من المسودات وقم بتنزيلها.
|
||||
|
||||
---
|
||||
|
||||
# 3. تخطيط هيكل موقعك
|
||||
|
||||
## 1. فهم الأقسام الأساسية
|
||||
|
||||
قبل البدء الفعلي في إنشاء الموقع، من المهم جدًا التخطيط للأقسام (القوائم) التي تريد تضمينها. يعتمد تصميم القائمة على ما تريد أن يراه الزوار وما تريد منهم القيام به.
|
||||
بشكل عام، يتكون الموقع عادةً من أقسام أساسية مثل **الرئيسية / حول / اتصل بنا**.
|
||||
|
||||
## 2. ارسم مخططًا هيكليًا بنفسك (اختياري)
|
||||
|
||||
يمكنك أولاً كتابة مخطط قائمة بسيط بناءً على أهداف موقعك.
|
||||
|
||||
### القائمة الأساسية
|
||||
|
||||
1. **الرئيسية (Home)**
|
||||
1. الصفحة الرئيسية التي يراها الزوار أولاً عند دخول الموقع
|
||||
2. تتضمن عادةً الشعار ومنطقة الصورة الرئيسية وشعارًا قصيرًا أو مقدمة موجزة
|
||||
2. **حول (About)**
|
||||
1. تعريف من أنت، أو غرض المشروع / الخدمة
|
||||
2. معرض أعمال شخصية: مقدمة ذاتية + سيرة موجزة
|
||||
3. مواقع الخدمات: الرؤية والأهداف والوظائف الأساسية
|
||||
3. **اتصل بنا (Contact)**
|
||||
1. معلومات الاتصال، مثل البريد الإلكتروني ورقم الهاتف وروابط وسائل التواصل الاجتماعي
|
||||
2. يمكن أيضًا إضافة نموذج اتصال بسيط
|
||||
|
||||
### القوائم الاختيارية
|
||||
|
||||
4. **الخدمات / المشاريع (Services / Projects)**
|
||||
1. عرض الخدمات التي تقدمها، أو مشاريعك / معرض أعمالك
|
||||
2. عادةً يتم عرضها في شكل قائمة أو بطاقات
|
||||
|
||||
5. **المعرض (Gallery)**
|
||||
1. لعرض الصور والصور الفوتوغرافية أو أعمال التصميم
|
||||
|
||||
6. **المدونة / الأخبار (Blog / News)**
|
||||
1. لنشر المقالات والتحديثات أو السجلات
|
||||
|
||||
7. **الأسئلة الشائعة (FAQ)**
|
||||
1. تجميع الأسئلة والأجوبة التي يطرحها الزوار بشكل متكرر
|
||||
|
||||
## 3. اختيار مخطط الألوان (اختياري)
|
||||
|
||||
إذا كان لديك بالفعل شعار، أو كنت تريد استخدام مجموعة ألوان معينة لتصميم موقعك، يمكنك كتابة رموز الألوان التي تريد استخدامها مباشرة في التعليمات.
|
||||
|
||||
**مثال:** `#171721, #872B97, #FF7130, #FF3C68`
|
||||
|
||||
حتى إذا لم تتمكن من التفكير في مخطط ألوان في الوقت الحالي، يمكنك العثور على الإلهام من خلال مواقع الألوان أو البحث بالكلمات المفتاحية.
|
||||
|
||||
- **مواقع مرجعية للألوان**
|
||||
- https://colorhunt.co/
|
||||
- https://coolors.co/
|
||||
|
||||
|
||||
|
||||
- **البحث عن الألوان عبر الكلمات المفتاحية على Google**
|
||||
|
||||
|
||||
|
||||
## 4. كتابة تعليمات تصميم الموقع
|
||||
|
||||
**نموذج تعليمات**
|
||||
|
||||
```
|
||||
"يرجى تصميم موقع ويب من صفحة واحدة يتكون من ثلاثة أقسام: الرئيسية وحول واتصل بنا.
|
||||
استخدم الألوان #171721 و #FF7130 و #FF3C68.
|
||||
يجب أن يكون الأسلوب العام حديثًا وبسيطًا."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. تصميم الموقع باستخدام وكيل التصميم
|
||||
|
||||
## 1. إدخال التعليمات → إنشاء التصميم
|
||||
|
||||
- اكتب الهيكل الذي خططت له والألوان المختارة في التعليمات.
|
||||
|
||||
**نموذج تعليمات Mastergo**
|
||||
|
||||
|
||||
|
||||
## 2. مراجعة التصميم وتقديم ملاحظات التعديل
|
||||
|
||||
يمكنك تقديم ملاحظاتك إلى الوكيل بناءً على احتياجاتك، على سبيل المثال:
|
||||
|
||||
- "إنه مبالغ فيه، اجعل الأسلوب العام أبسط."
|
||||
- "غيّر نوع الخط."
|
||||
- "عدّل مجموعة الألوان."
|
||||
- "احذف هذا القسم هنا."
|
||||
|
||||
|
||||
|
||||
## 3. تحديد التصميم النهائي
|
||||
|
||||
بعد إجراء تعديلات متعددة على التصميم والرضا عنه، يمكنك تحويل هذا التصميم إلى كود، بحيث يتمكن وكيل البرمجة من فهمه ومتابعة العمل.
|
||||
|
||||
تختلف طريقة تحويل التصميم إلى كود حسب المنصة، ولكن عادةً ما يتم ذلك عن طريق تثبيت واستخدام بعض الإضافات داخل منصة التصميم.
|
||||
|
||||
**مثال Mastergo**
|
||||
|
||||
1. افتح [موقع إضافات Mastergo](https://mastergo.com/community/plugin)، وابحث عن **seal**.
|
||||
|
||||
|
||||
|
||||
2. عد إلى صفحة التصميم، وانقر على **أيقونة المربع (الإضافات)**.
|
||||
|
||||
|
||||
|
||||
3. حدد منطقة التصميم التي تريد تحويلها إلى كود، وانقر على زر **Generate** لإنشاء الكود.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. بناء الموقع باستخدام وكيل البرمجة
|
||||
|
||||
## 1. فهم المفاهيم الأساسية لـ HTML/CSS/JS
|
||||
|
||||
يتكون الموقع بشكل أساسي من ثلاث لغات:
|
||||
|
||||
- **HTML (لغة ترميز النص الفائق)** → البنية (الهيكل العظمي)
|
||||
- **CSS (أوراق الأنماط المتتالية)** → الأنماط (المظهر)
|
||||
- **JavaScript (JS)** → الوظائف (التفاعل)
|
||||
|
||||
هذه الثلاثة تعمل معًا لتشكيل صفحة الويب الكاملة التي نراها.
|
||||
|
||||
1. **🏗️ HTML (البنية)**
|
||||
|
||||
- يحدد "ما يتم عرضه" في الصفحة
|
||||
- يُستخدم لوضع النصوص والصور والأزرار والروابط والعناصر الأخرى
|
||||
- يشبه **الجدران والإطار** في المبنى
|
||||
|
||||
**مثال**
|
||||
|
||||
```html
|
||||
<h1>مرحبًا!</h1>
|
||||
<p>هذا هو موقعي الأول.</p>
|
||||
<a href="contact.html">اتصل بنا</a>
|
||||
```
|
||||
|
||||
2. **🎨 CSS (الأنماط)**
|
||||
|
||||
- يحدد "كيف يتم عرض المحتوى"
|
||||
- يتحكم في حجم النص واللون والمسافات والخلفية وشكل الأزرار وغيرها
|
||||
- يمنح HTML "ملابس" وأسلوبًا بصريًا
|
||||
|
||||
**مثال**
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: #FF7130; /* لون النص */
|
||||
font-size: 36px; /* حجم الخط */
|
||||
text-align: center; /* محاذاة في المنتصف */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #171721; /* لون الخلفية */
|
||||
color: white; /* لون النص الافتراضي */
|
||||
}
|
||||
```
|
||||
|
||||
3. **⚙️ JavaScript (JS) (الوظائف)**
|
||||
|
||||
- يمكّن صفحة الويب من التفاعل مع المستخدم
|
||||
- يمكنه تنفيذ تأثيرات ديناميكية مثل نقر الأزرار وفتح القوائم وعرض شرائح الصور وإرسال النماذج
|
||||
- إذا كان HTML/CSS هو الهيكل العظمي والمظهر الثابت، فإن JS هو **العقل** الذي "يحيي" صفحة الويب
|
||||
|
||||
**مثال**
|
||||
|
||||
```javascript
|
||||
function showAlert() {
|
||||
alert("تم النقر على الزر!");
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<button onclick="showAlert()">انقر هنا</button>
|
||||
```
|
||||
|
||||
## 2. جعل وكيل البرمجة يولد الكود
|
||||
|
||||
**نموذج تعليمات**
|
||||
|
||||
```
|
||||
"يرجى كتابة HTML و CSS لموقع ويب من صفحة واحدة يحتوي على أقسام الرئيسية وحول واتصل بنا.
|
||||
استخدم الألوان #171721 و #FF7130 و #FF3C68.
|
||||
الخلفية سوداء والنص أبيض."
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3. تشغيل الموقع
|
||||
|
||||
عند إنشاء كود المسودة، يقوم الوكيل عادةً بتشغيل المشروع تلقائيًا وعرض صفحة الموقع المُنشأة.
|
||||
|
||||
إذا قمت بإعادة تشغيل الوكيل، أو لم تظهر صفحة الموقع، يمكنك إدخال تعليمات مشابهة لهذه:
|
||||
|
||||
```
|
||||
"يرجى تفعيل المشروع"
|
||||
```
|
||||
|
||||
لجعل الوكيل يعيد تشغيل المشروع وفتح صفحة المعاينة، حتى تتمكن من viewing التأثير الحالي.
|
||||
|
||||
## 4. إجراء تعديلات بسيطة
|
||||
|
||||
يمكنك الاستمرار في إجراء تعديلات دقيقة على المسودة من خلال اللغة الطبيعية، على سبيل المثال:
|
||||
|
||||
- "اجعل الزر أكبر."
|
||||
- "اجعل الخط أكثر سمكًا."
|
||||
|
||||
|
||||
|
||||
## 5. تعديل محتوى نصوص الموقع
|
||||
|
||||
عادةً ما يحتوي الموقع الأولي الذي ينشئه الوكيل على بعض النصوص placeholder التي تم إنشاؤها تلقائيًا. لجعله أقرب إلى سيناريو الحقيقي الخاص بك، يمكنك تحضير المحتوى الفعلي مسبقًا، ثم اطلب من الوكيل استبداله.
|
||||
|
||||
**مثال تطبيقي**: تحديث صفحة "حول" في موقع AIID
|
||||
|
||||
1. اكتب أولاً المحتوى الذي تريد عرضه في صفحة "حول". لتسهيل فهم الوكيل، يمكنك حفظ المحتوى بتنسيق Markdown.
|
||||
|
||||
|
||||
|
||||
2. ثم أخبر الوكيل في المحادثة بتطبيق المحتوى من هذا الملف على الصفحة المحددة.
|
||||
|
||||
|
||||
|
||||
3. تحقق من النسخة المحدثة بعد تطبيق المحتوى.
|
||||
|
||||
|
||||
|
||||
## 6. إدراج الصور
|
||||
|
||||
إذا كنت تريد إضافة صور معينة (مثل الشعار، صورة الخلفية، إلخ)، يمكنك أولاً تحميل الصور إلى مجلد المشروع، ثم توضيح في التعليمات المكان الذي تريد استخدام هذه الصور فيه على الصفحة.
|
||||
|
||||
- **مثال:**
|
||||
|
||||
|
||||
|
||||
- **النتيجة:**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 6. دمج التصميم مع الكود
|
||||
|
||||
## 1. دمج ملفات التصميم مع كود الموقع (اختياري)
|
||||
|
||||
عند تنزيل ملفات الكود من وكيل التصميم، يمكنك نقلها إلى دليل المشروع الحالي، ثم اطلب من وكيل البرمجة مساعدتك في دمج كود التصميم هذا مع المشروع الحالي.
|
||||
|
||||
- **مثال:**
|
||||
|
||||
|
||||
|
||||
- **النتيجة:**
|
||||
|
||||
|
||||
---
|
||||
title: 'Build A Website With Design + Coding Agents'
|
||||
description: 'From idea to launch: coordinate a design agent to produce visuals, then use a coding agent to turn it into a working website with a reusable workflow.'
|
||||
---
|
||||
@@ -0,0 +1,325 @@
|
||||
---
|
||||
title: 'ماذا تفعل عند مواجهة أخطاء أثناء كتابة التعليمات البرمجية - دليل عملي لاستخدام لقطات الشاشة مع الذكاء الاصطناعي'
|
||||
description: 'تعلم كيفية طرح الأسئلة على الذكاء الاصطناعي بكفاءة لحل أخطاء التطوير المختلفة، وإتقان العملية القياسية لأخذ لقطات الشاشة والوصف وتحديد المشكلات، وجعل الذكاء الاصطناعي مساعدك في تصحيح الأخطاء.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'حوالي <strong>30 دقيقة</strong>'
|
||||
</script>
|
||||
|
||||
# ماذا تفعل عند مواجهة أخطاء أثناء كتابة التعليمات البرمجية
|
||||
|
||||
## دليل هذا الفصل
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['مهارات التصحيح', 'التعاون مع الذكاء الاصطناعي', 'استكشاف المشكلات', 'أدوات المطورين']" coreOutput="مجموعة عمليات قياسية لاستكشاف الأخطاء" expectedOutput="القدرة على حل 90% من الأخطاء الشائعة بشكل مستقل">
|
||||
|
||||
في عصر الذكاء الاصطناعي، تغيرت طريقة استكشاف الأخطاء وإصلاحها.
|
||||
|
||||
لا تحتاج إلى حفظ جميع أنواع الأخطاء، ولا تحتاج إلى أن تصبح خبيرًا في التصحيح، ولا حتى تحتاج إلى فهم ما يعنيه الخطأ.
|
||||
|
||||
<strong>تحتاج فقط إلى تعلم شيء واحد: كيف تسأل الذكاء الاصطناعي.</strong>
|
||||
|
||||
سيعلمك هذا الفصل مجموعة عمليات لاستكشاف الأخطاء <strong>من البسيط إلى المتقدم</strong>:
|
||||
|
||||
1. <strong>الخطوة الأولى: اسأل مباشرة</strong>: صف الظاهرة + التقط لقطة شاشة، واطرح سؤالاً بجملة واحدة
|
||||
2. <strong>الخطوة الثانية: أضف معلومات</strong>: إذا لم يتم حلها، افتح F12 وأضف المعلومات الرئيسية
|
||||
|
||||
بعد إتقان هذه العملية، ستتمكن من <strong>حل 90% من الأخطاء بنفسك</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info ملاحظة
|
||||
جميع الطرق في هذا الفصل مبنية على خبرة عملية مع أدوات تطوير الذكاء الاصطناعي مثل Cursor/Trae/Claude، ويمكن تطبيقها مباشرة في التطوير اليومي.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'طرح سؤال مباشر', description: 'وصف الظاهرة + لقطة شاشة' },
|
||||
{ title: 'إضافة معلومات', description: 'فتح F12 لتحديد المشكلة' },
|
||||
{ title: 'الحل التكراري', description: 'حتى يتم حل المشكلة' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. القاعدة الأساسية: التقط لقطة شاشة واسأل الذكاء الاصطناعي
|
||||
|
||||
::: warning لماذا هذا الفصل مهم؟
|
||||
|
||||
أول رد فعل للعديد من المبتدئين عند مواجهة خطأ هو:
|
||||
- الذعر، والبدء في تعديل التعليمات البرمجية بشكل عشوائي
|
||||
- قضاء نصف ساعة في البحث عن "كيفية حل خطأ xxx"
|
||||
- محاولة فهم معنى الخطأ بنفسك
|
||||
- تصحيح الأخطاء بمفردك حتى وقت متأخر من الليل
|
||||
|
||||
<strong>كل هذا مضيعة للوقت.</strong>
|
||||
|
||||
في عصر الذكاء الاصطناعي، أصبح تصحيح الأخطاء أمرًا بسيطًا للغاية:
|
||||
|
||||
```
|
||||
رؤية خطأ ← التقاط لقطة شاشة ← سؤال الذكاء الاصطناعي ← اتباع تعليمات الذكاء الاصطناعي
|
||||
```
|
||||
|
||||
لا تحتاج إلى فهم الخطأ، ولا تحتاج إلى معرفة كيفية التصحيح، ولا حتى تحتاج إلى معرفة مكان المشكلة.
|
||||
|
||||
<strong>تحتاج فقط إلى تعلم كيف تسأل.</strong>
|
||||
|
||||
:::
|
||||
|
||||
### 1.1 أبسط طريقة لطرح الأسئلة
|
||||
|
||||
لا تحتاج إلى قوالب معقدة، اختر إحدى الطريقتين:
|
||||
|
||||
**الطريقة الأولى: وصف الظاهرة**
|
||||
|
||||
التنسيق: ماذا فعلت للتو، وماذا يحدث الآن
|
||||
|
||||
```
|
||||
عدّلت للتو كود صفحة تسجيل الدخول، والآن الصفحة بيضاء، ماذا أفعل؟
|
||||
```
|
||||
|
||||
**الطريقة الثانية: لقطة شاشة**
|
||||
|
||||
التقط لقطة شاشة للصفحة الحالية أو رسالة الخطأ مباشرة
|
||||
|
||||
```
|
||||
[لقطة شاشة]
|
||||
|
||||
كيف أحل هذا الخطأ؟
|
||||
```
|
||||
|
||||
**أفضل طريقة: وصف + لقطة شاشة**
|
||||
|
||||
```
|
||||
عدّلت للتو كود صفحة تسجيل الدخول، والآن الصفحة بيضاء.
|
||||
|
||||
[لقطة شاشة]
|
||||
|
||||
ماذا أفعل؟
|
||||
```
|
||||
|
||||
**تذكر: صف السياق بوضوح، وأضف لقطة شاشة، وسيتمكن الذكاء الاصطناعي من حل مشكلتك بشكل أسرع.**
|
||||
|
||||
### 1.2 كيفية شرح المشكلة بوضوح
|
||||
|
||||
يعرف العديد من المبتدئين أنهم بحاجة إلى طرح أسئلة، لكنهم لا يعرفون كيف يعبرون عنها. في الواقع، تحتاج فقط إلى توضيح ثلاثة أشياء:
|
||||
|
||||
**1. ماذا فعلت للتو**
|
||||
|
||||
```
|
||||
لقد نقرت للتو على زر الحفظ
|
||||
لقد عدّلت للتو كود صفحة تسجيل الدخول
|
||||
لقد قمت للتو بتحديث الصفحة
|
||||
```
|
||||
|
||||
**2. ماذا ترى الآن**
|
||||
|
||||
```
|
||||
الصفحة فارغة الآن
|
||||
الزر لا يستجيب عند النقر عليه الآن
|
||||
يتم عرض رسالة خطأ الآن
|
||||
```
|
||||
|
||||
**3. ما التأثير الذي تريده**
|
||||
|
||||
```
|
||||
أريد أن يتم حفظ البيانات بنجاح
|
||||
أريد أن يتم عرض الصفحة بشكل طبيعي
|
||||
أريد أن تظهر نافذة منبثقة بعد النقر على الزر
|
||||
```
|
||||
|
||||
**مثال كامل:**
|
||||
|
||||
```
|
||||
لقد نقرت للتو على زر الحفظ، والآن تعرض الصفحة خطأ "فشل الحفظ".
|
||||
|
||||
[لقطة شاشة]
|
||||
|
||||
أريد أن يتم حفظ بيانات النموذج في قاعدة البيانات بنجاح، ماذا أفعل؟
|
||||
```
|
||||
|
||||
**المبادئ الأساسية:**
|
||||
- استخدم لغة بسيطة، بدون مصطلحات تقنية
|
||||
- رتب حسب الترتيب الزمني: ماذا فعلت أولاً، ثم ماذا حدث
|
||||
- اذكر توقعاتك، ليعرف الذكاء الاصطناعي ما تريده
|
||||
|
||||
## 2. الخطوة الأولى: صف الظاهرة مباشرة واسأل
|
||||
|
||||
عند مواجهة مشكلة، <strong>لا تتسرع في فتح F12</strong>. صف الظاهرة أولاً، وخذ لقطة شاشة للصفحة الحالية، وأرسلها للذكاء الاصطناعي.
|
||||
|
||||
في كثير من الأحيان، يمكن للذكاء الاصطناعي تقديم حل مباشرة بمجرد رؤية لقطة الشاشة.
|
||||
|
||||
### 2.1 كيف تصف الظواهر الشائعة
|
||||
|
||||
::: tip فقط صف ما تراه
|
||||
|
||||
**الصفحة بيضاء**
|
||||
```
|
||||
الصفحة فارغة عند الفتح، ماذا أفعل؟
|
||||
|
||||
[لقطة شاشة]
|
||||
```
|
||||
|
||||
**الزر لا يستجيب عند النقر**
|
||||
```
|
||||
لا يحدث شيء عند النقر على هذا الزر، ساعدني في التحقق.
|
||||
|
||||
[لقطة شاشة]
|
||||
```
|
||||
|
||||
**لا يتم حفظ البيانات**
|
||||
```
|
||||
نقرت على حفظ، لكن البيانات لم تُحفظ، ماذا أفعل؟
|
||||
|
||||
[لقطة شاشة]
|
||||
```
|
||||
|
||||
**التنسيق يبدو غير صحيح**
|
||||
```
|
||||
موضع هذا الزر منحرف، كيف أعدّله؟
|
||||
|
||||
[لقطة شاشة]
|
||||
```
|
||||
|
||||
**خطأ في الواجهة**
|
||||
```
|
||||
حدث خطأ عند استدعاء الواجهة، ساعدني في التحقق.
|
||||
|
||||
[لقطة شاشة]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 إذا حل الذكاء الاصطناعي المشكلة مباشرة
|
||||
|
||||
تهانينا، تم حل المشكلة! اتبع تعليمات الذكاء الاصطناعي للتعديل.
|
||||
|
||||
### 2.3 إذا قال الذكاء الاصطناعي "يحتاج إلى مزيد من المعلومات"
|
||||
|
||||
عندها فقط تحتاج إلى فتح F12 لإضافة المعلومات الرئيسية. تابع القراءة.
|
||||
|
||||
## 3. الخطوة الثانية: أضف المعلومات الرئيسية
|
||||
|
||||
عندما يقول الذكاء الاصطناعي إنه يحتاج إلى مزيد من المعلومات، حسب نوع المشكلة، افتح F12 وخذ لقطات شاشة للمحتوى المناسب.
|
||||
|
||||
### 3.1 متى تحتاج إلى إضافة معلومات
|
||||
|
||||
قد يرد الذكاء الاصطناعي هكذا:
|
||||
- "يرجى فتح Console لمعرفة ما إذا كانت هناك أخطاء"
|
||||
- "التقط لقطة شاشة للوحة Network لأراها"
|
||||
- "يحتاج إلى معلومات الخطأ المحددة"
|
||||
|
||||
عندها، اتبع الإرشادات أدناه لإضافة لقطات الشاشة.
|
||||
|
||||
### 3.2 إضافة معلومات Console (صفحة بيضاء/أخطاء)
|
||||
|
||||
::: tip خطوات العملية
|
||||
|
||||
**الخطوة الأولى: اضغط F12 لفتح أدوات المطورين**
|
||||
|
||||
على Mac: `Cmd+Option+I`، أو انقر بزر الماوس الأيمن على الصفحة واختر "فحص".
|
||||
|
||||
**الخطوة الثانية: انتقل إلى علامة تبويب Console**
|
||||
|
||||
**الخطوة الثالثة: التقط لقطة شاشة لرسائل الخطأ الحمراء**
|
||||
|
||||
**الخطوة الرابعة: أرسلها للذكاء الاصطناعي**
|
||||
|
||||
```
|
||||
أخطاء Console كما يلي:
|
||||
|
||||
[لقطة شاشة]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.3 إضافة معلومات Network (مشاكل البيانات/أخطاء API)
|
||||
|
||||
::: tip خطوات العملية
|
||||
|
||||
**الخطوة الأولى: اضغط F12 لفتح أدوات المطورين**
|
||||
|
||||
**الخطوة الثانية: انتقل إلى علامة تبويب Network**
|
||||
|
||||
**الخطوة الثالثة: كرر العملية** (انقر على حفظ/حدّث الصفحة)
|
||||
|
||||
**الخطوة الرابعة: ابحث عن الطلب المقابل، وخذ لقطة شاشة**
|
||||
|
||||
- تحقق من URL ورمز الحالة
|
||||
- تحقق من Payload (المعلمات المرسلة)
|
||||
- تحقق من Response (النتيجة المرجعة)
|
||||
|
||||
**الخطوة الخامسة: أرسلها للذكاء الاصطناعي**
|
||||
|
||||
```
|
||||
معلومات Network كما يلي:
|
||||
|
||||
الطلب: [لقطة شاشة 1]
|
||||
المعلمات: [لقطة شاشة 2]
|
||||
النتيجة: [لقطة شاشة 3]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.4 إضافة معلومات Elements (مشاكل التنسيق)
|
||||
|
||||
::: tip خطوات العملية
|
||||
|
||||
**الخطوة الأولى: انقر بزر الماوس الأيمن على العنصر ← "فحص"**
|
||||
|
||||
ستنتقل أدوات المطورين تلقائيًا إلى العنصر.
|
||||
|
||||
**الخطوة الثانية: التقط لقطة شاشة للوحة Styles**
|
||||
|
||||
**الخطوة الثالثة: أرسلها للذكاء الاصطناعي**
|
||||
|
||||
```
|
||||
أنماط العنصر كما يلي:
|
||||
|
||||
[لقطة شاشة]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 4. الخطوة الثالثة: التكرار حتى الحل
|
||||
|
||||
### 4.1 الممارسات غير الفعالة
|
||||
|
||||
هذه الممارسات ستضيع وقتك:
|
||||
|
||||
الذعر عند رؤية الخطأ، والبدء في تعديل التعليمات البرمجية بشكل عشوائي
|
||||
قضاء نصف ساعة في البحث عن حلول للأخطاء
|
||||
محاولة فهم معنى كل خطأ بنفسك
|
||||
تصحيح الأخطاء بمفردك حتى وقت متأخر من الليل
|
||||
|
||||
### 4.2 الممارسات الفعالة
|
||||
|
||||
اتبع هذه العملية:
|
||||
|
||||
صف الظاهرة مباشرة وخذ لقطة شاشة واسأل
|
||||
عندما يقول الذكاء الاصطناعي إنه يحتاج إلى مزيد من المعلومات، افتح F12 وأضفها
|
||||
اتبع الاقتراحات لتعديل الكود
|
||||
بعد التعديل، اختبر، وإذا استمرت المشكلة، استمر في أخذ لقطات شاشة والسؤال
|
||||
|
||||
## 5. الملخص: العملية الكاملة
|
||||
|
||||
```
|
||||
مواجهة مشكلة
|
||||
↓
|
||||
وصف الظاهرة مباشرة + لقطة شاشة
|
||||
↓
|
||||
أرسلها للذكاء الاصطناعي: "ماذا أفعل؟"
|
||||
↓
|
||||
هل حلها الذكاء الاصطناعي مباشرة؟
|
||||
↓ نعم
|
||||
اتبع تعليمات الذكاء الاصطناعي
|
||||
↓
|
||||
اختبر ما إذا تم الحل
|
||||
↓
|
||||
↓ لا / يحتاج الذكاء الاصطناعي إلى مزيد من المعلومات
|
||||
افتح F12، وأضف المعلومات الرئيسية
|
||||
↓
|
||||
أرسلها مرة أخرى للذكاء الاصطناعي
|
||||
↓
|
||||
كرر حتى يتم الحل
|
||||
```
|
||||
@@ -0,0 +1,641 @@
|
||||
---
|
||||
title: 'أفكار ملهمة لسيناريوهات الاستهلاك الموجهة للمستهلك'
|
||||
description: 'يلخص هذا المستند الاتجاهات الإبداعية لتطبيقات النماذج اللغوية الكبيرة LLM في سيناريوهات الاستهلاك الموجهة للمستهلك، ويغطي سيناريوهات ملهمة في مجالات نمط الحياة، والرفقة العاطفية، والترفيه، والنمو الشخصي، والتفاعل الاجتماعي، مما يوفر مرجعاً لمطوري تطبيقات الذكاء الاصطناعي الموجهة للمستهلكين العاديين.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'حوالي <strong>4 ساعات</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// تجمع المواضيع لكل سيناريو - التأكيد على المشاعر، والأجواء، والإيحاءات النفسية
|
||||
const topicPool = {
|
||||
'lifestyle': [
|
||||
{ title: 'مساعد طقوس الصباح', desc: 'يولد طقوس صباحية حصرية بناءً على الطقس والجدول الزمني والمزاج، ليجعل كل يوم يبدأ بشكل جميل' },
|
||||
{ title: 'مصمم أجواء للمعيشة المستقلة', desc: 'يصمم حلول أجواء منزلية لمن يعيشون بمفردهم، مع اقتراحات ذكية للإضاءة والموسيقى والروائح' },
|
||||
{ title: 'مولد خطط الاسترخاء المنزلي في عطلة نهاية الأسبوع', desc: 'يوصي بمزيج مثالي للبقاء في المنزل بناءً على مزاجك الحالي: فيلم + وجبات خفيفة + ترتيب الأجواء' },
|
||||
{ title: 'إذاعة لتهدئة الروح قبل النوم', desc: 'يولد قصصاً لطيفة وتأملات موجهة، كإذاعة خاصة لمرافقتك في النوم' },
|
||||
{ title: 'ملهم جماليات الحياة', desc: 'يكتشف الجمال في الأشياء اليومية الصغيرة، ويولد اقتراحات لجماليات الحياة وإرشادات لإضفاء الطقوس' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'مستمع في وقت متأخر من الليل', desc: 'سلة لتفريغ المشاعر متاحة على مدار 24 ساعة، تتقبل كل الهموم دون إصدار أحكام' },
|
||||
{ title: 'مرافق للتعافي من الفراق', desc: 'يقدم رفقة لطيفة ونصائح للتعافي ومنفذاً للمشاعر خلال فترة انخفاض الروح المعنوية بعد الفراق' },
|
||||
{ title: 'مدرب تنفس لتخفيف القلق', desc: 'يستشعر مشاعر القلق، ويوجه تمارين التنفس والتأمل الذهني' },
|
||||
{ title: 'مرشد لإعادة بناء الثقة بالنفس', desc: 'من خلال الحوار الإيجابي والإيحاءات النفسية، يساعد في إعادة بناء الهوية الذاتية والشعور بالقيمة' },
|
||||
{ title: 'تحليل ذكي ليوميات المشاعر', desc: 'يحلل يوميات المشاعر، ويكتشف أنماطها، ويقدم رؤى دافئة واقتراحات' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'ماستر لغز القتل الغامر', desc: 'يلعب دور مقدم لعبة لغز القتل، ويخلق أجواء الغموض، ويدفع الحبكة للأمام' },
|
||||
{ title: 'شخصية NPC بروح حية في عالم مفتوح', desc: 'شخصية NPC نابضة بالحياة، تتذكر قصص اللاعب وتخلق روابط عاطفية حقيقية' },
|
||||
{ title: 'توليد محتوى بودكاست مخصص', desc: 'يولد بودكاست حصري بناءً على اهتماماتك، بطبيعية كأنك تتحدث مع صديق' },
|
||||
{ title: 'فريق أجواء الحفلات الموسيقية الافتراضية', desc: 'يخلق إحساس الحفل المباشر للحفلات عبر الإنترنت، مع تفاعل فوري وتشجيع وتعزيز الأجواء' },
|
||||
{ title: 'شريك إبداع مشترك للروايات التفاعلية', desc: 'يشارك القراء في كتابة القصة، حيث يؤثر كل خيار على مسار العالم' }
|
||||
],
|
||||
'growth': [
|
||||
{ title: 'شاهد على النمو الشخصي', desc: 'يسجل مسار النمو، ويقدم التشجيع والمراجعة في المحطات المهمة' },
|
||||
{ title: 'مدرب يلعب العادات لتصبح لعبة', desc: 'يحول بناء العادات المملة إلى لعبة مغامرة ممتعة' },
|
||||
{ title: 'مطابق لشريك تعلم المهارات', desc: 'يجد شركاء تعلم من ذوي التفكير المماثل للترابط المتبادل ومشاركة التقدم' },
|
||||
{ title: 'مكتشف السعادة الصغيرة اليومية', desc: 'يساعد في اكتشاف الأشياء الجميلة الصغيرة في الحياة، ويزرع الامتنان والعقلية الإيجابية' },
|
||||
{ title: 'محاكي تجارب الحياة', desc: 'يحاكي خيارات الحياة المختلفة لتجربة احتمالات أخرى في أكوان موازية' }
|
||||
],
|
||||
'social': [
|
||||
{ title: 'مولد مواضيع لكسر الجليد', desc: 'يقدم مواضيع مثيرة للاهتمام في المناسبات الاجتماعية لكسر الحواجز وتقريب المسافات' },
|
||||
{ title: 'مصمم أجواء نصوص وسائل التواصل', desc: 'يولد نصوصاً أنيقة لوسائل التواصل الاجتماعي بناءً على الصور والمزاج' },
|
||||
{ title: 'مخطط أجواء المواعيد', desc: 'يصمم خطة أجواء كاملة للمواعيد، من المكان إلى المواضيع والمفاجآت' },
|
||||
{ title: 'روح التجمعات عن بعد', desc: 'ينشط الأجواء في التجمعات عبر الإنترنت، وينظم الألعاب ويوجه التفاعل' },
|
||||
{ title: 'مساعد إدارة الطاقة الاجتماعية', desc: 'يساعد الانطوائيين في إدارة طاقتهم الاجتماعية وإيجاد وتيرة مريحة' }
|
||||
],
|
||||
'creative': [
|
||||
{ title: 'حقيبة إسعافات جفاف الإلهام', desc: 'يوفر شرارات إلهام غير متوقعة عند الوصول إلى عنق الزجاجة الإبداعي' },
|
||||
{ title: 'دليل استكشاف الأسلوب الشخصي', desc: 'يساعد في اكتشاف أسلوبك الشخصي الفريد، من الملابس إلى التعبير' },
|
||||
{ title: 'مستشار جماليات دفاتر الملاحظات واليوميات', desc: 'يقدم اقتراحات جمالية لتخطيط دفاتر الملاحظات وتنسيق الألوان وأفكار المحتوى' },
|
||||
{ title: 'دليل أجواء تكوين الصور الفوتوغرافية', desc: 'يقدم اقتراحات للتصوير وتحرير الصور بناءً على المشهد والإحساس المطلوب' },
|
||||
{ title: 'مطابق الموسيقى مع المزاج', desc: 'يوصي بمزيج موسيقي مثالي بناءً على مزاجك الحالي والمشهد' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'دليل استكشاف المدينة سيراً على الأقدام', desc: 'استكشف المدينة كالسكان المحليين واكتشف الأماكن المخفية والكنوز' },
|
||||
{ title: 'توليد يوميات مزاج الرحلة', desc: 'يحول صور ومشاعر الرحلة إلى يوميات وذكريات جميلة' },
|
||||
{ title: 'مساعد مرافق للسفر الفردي', desc: 'يوفر الرفقة والنصائح والشعور بالأمان للمسافرين بمفردهم' },
|
||||
{ title: 'معاينة أجواء الوجهة', desc: 'اختبر أجواء الوجهة بشكل غامر قبل المغادرة لتبدأ في الاستعداد مبكراً' },
|
||||
{ title: 'دليل أجواء التصوير الفوتوغرافي للسفر', desc: 'توجيه لالتقاط صور سفر تحكي قصصًا بناءً على المشهد والإضاءة' }
|
||||
],
|
||||
'health': [
|
||||
{ title: 'محفز الدافعية للرياضة', desc: 'تقديم التشجيع والدافع المناسبين عندما لا تشعر بالرغبة في الحركة' },
|
||||
{ title: 'مطبخ الإلهام للأكل الصحي', desc: 'إعداد وصفات صحية مريحة بناءً على المزاج والمكونات المتاحة' },
|
||||
{ title: 'خبير تحسين أجواء جودة النوم', desc: 'تهيئة أجواء نوم عالية الجودة بشكل شامل، من البيئة المحيطة إلى الحالة النفسية' },
|
||||
{ title: 'مرشد الإدراك الجسدي', desc: 'توجيه الانتباه إلى إشارات الجسم وبناء التواصل بين العقل والجسد' },
|
||||
{ title: 'مساعد تذكير العناية بالذات', desc: 'تذكيرك بالتوقف والاهتمام بنفسك وسط الانشغال' }
|
||||
],
|
||||
'learning': [
|
||||
{ title: 'دليل استكشاف المعرفة بالأسلوب اللعبي', desc: 'تحويل التعلم الممل إلى مغامرة استكشافية ممتعة' },
|
||||
{ title: 'رفيق تعلم اللغات عبر السيناريوهات', desc: 'تقمص شخصيات مختلفة لاكتساب اللغة بشكل طبيعي من خلال الحوارات' },
|
||||
{ title: 'مساعد إشباع الفضول', desc: 'الإجابة على مختلف الأفكار الخيالية وإشباع الفضول تجاه العالم' },
|
||||
{ title: 'ملهم أفكار ملاحظات القراءة', desc: 'المساعدة في تنظيم أفكار القراءة واكتشاف زوايا تفكير جديدة' },
|
||||
{ title: 'خلق أجواء مشاركة المعرفة', desc: 'تحويل المعرفة المكتسبة إلى محتوى مشاركة ممتع' }
|
||||
],
|
||||
'relationship': [
|
||||
{ title: 'مدرب التواصل في العلاقات الحميمية', desc: 'المساعدة في التعبير عن المشاعر الصعبة وتحسين العلاقات الحميمية' },
|
||||
{ title: 'مساعد تذكير الاهتمام بالعائلة', desc: 'تذكيرك بالاهتمام بعائلتك وتقديم اقتراحات تفاعل دافئة' },
|
||||
{ title: 'خبير أجواء الحفاظ على الصداقات', desc: 'المساعدة في الحفاظ على الصداقات عن بعد وخلق مواضيع مشتركة' },
|
||||
{ title: 'مخطط مفاجآت وإعلانات الحب', desc: 'تخطيط لحظات رومانسية ومفاجآت لا تُنسى للأشخاص المهمين' },
|
||||
{ title: 'توجيه أجواء تخفيف التوتر', desc: 'تقديم اقتراحات وعبارات لتخفيف حدة التوتر عند حدوث أزمات في العلاقات' }
|
||||
],
|
||||
'pet': [
|
||||
{ title: 'يوميات الحيوانات الأليفة بالشخصية المجسّمة', desc: 'إنشاء يوميات من منظور الحيوان الأليف لتسجيل اللحظات الدافئة اليومية مع المالك' },
|
||||
{ title: 'مفسّر سلوك الحيوانات الأليفة', desc: 'تفسير لغة سلوك الحيوانات الأليفة لتعميق التواصل معها' },
|
||||
{ title: 'مخطط أوقات رفقة الحيوانات الأليفة', desc: 'تصميم أنشطة إبداعية للتفاعل مع الحيوانات الأليفة لتعزيز المودة' },
|
||||
{ title: 'مولّد قصص تذكارية للحيوانات الأليفة', desc: 'تحويل صور وذكريات الحيوانات الأليفة إلى قصص دافئة' },
|
||||
{ title: 'دليل الطمأنينة للمربين الجدد', desc: 'توفير مرافقة دافئة وإرشاد لأصحاب الحيوانات الأليفة المبتدئين' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'مساعد إدراك مشاعر الاستهلاك', desc: 'إدراك المشاعر الكامنة وراء الاستهلاك الاندفاعي وبناء عادات استهلاك صحية' },
|
||||
{ title: 'تحفيز مرئي لأهداف الادخار', desc: 'تحويل أهداف الادخار إلى تقدم مرئي للأحلام' },
|
||||
{ title: 'تعلم المعرفة المالية بسهولة', desc: 'تعلم المعرفة المالية بطريقة سهلة وممتعة' },
|
||||
{ title: 'مهدّئ القلق المالي', desc: 'تقديم الدعم العاطفي ونصائح عملية عند مواجهة الضغوط المالية' },
|
||||
{ title: 'لعبة تجربة الاستثمار بمبالغ صغيرة', desc: 'تجربة الاستثمار بطريقة محاكاة لعبة لتقليل حاجز الدخول' }
|
||||
],
|
||||
'career': [
|
||||
{ title: 'رفيق مرحلة الحيرة المهنية', desc: 'تقديم الاستماع والاستكشاف ونصائح التوجيه خلال فترات الحيرة المهنية' },
|
||||
{ title: 'محفز الشعور بالإنجاز في العمل', desc: 'المساعدة في اكتشاف القيمة والمعنى في العمل لإعادة إشعال الشغف' },
|
||||
{ title: 'مساعد أجواء التواصل المهني', desc: 'تقديم مواضيع خفيفة واقتراحات تفاعلية للتواصل الاجتماعي في بيئة العمل' },
|
||||
{ title: 'ملهم أفكار الأعمال الجانبية', desc: 'تحفيز أفكار إبداعية للأعمال الجانبية بناءً على الاهتمامات والمهارات الشخصية' },
|
||||
{ title: 'محطة تعزيز الثقة قبل المقابلة', desc: 'تقديم الاستعداد النفسي والتشجيع على الثقة قبل المقابلات' }
|
||||
],
|
||||
'home': [
|
||||
{ title: 'مصمم أجواء المساحة المنزلية', desc: 'تصميم مخططات أجواء المنزل بناءً على المزاج والفصول' },
|
||||
{ title: 'دليل تغيير ديكور المنزل حسب الفصول', desc: 'تغيير ترتيب المنزل مع تغير الفصول للحفاظ على الشعور بالتجديد' },
|
||||
{ title: 'سحر المساحات الصغيرة', desc: 'جعل المساحات الصغيرة تتمتع أيضًا بأجواء مريحة ودافئة' },
|
||||
{ title: 'صانع الطقوس المنزلية', desc: 'خلق شعور بالطقوس للأنشطة المنزلية اليومية' },
|
||||
{ title: 'مرافق نفسي لعملية التخلص من الأشياء', desc: 'تقديم الدعم النفسي ونصائح اتخاذ القرارات عند ترتيب الأشياء' }
|
||||
],
|
||||
'food': [
|
||||
{ title: 'طبخ مريح لشخص واحد', desc: 'تصميم مخططات طبخ بسيطة ومريحة لمن يعيشون بمفردهم' },
|
||||
{ title: 'تصميم أجواء مائدة الأعياد', desc: 'تصميم ترتيب مائدة بطابع احتفالي للمناسبات الخاصة' },
|
||||
{ title: 'مطابق الأطباق للمزاج', desc: 'اقتراح الأطعمة وطرق التحضير المناسبة بناءً على المزاج الحالي' },
|
||||
{ title: 'بناء ثقة المبتدئين في المطبخ', desc: 'توفير تشجيع دافئ ووصفات بسيطة لمن ليس لديهم خبرة في الطبخ' },
|
||||
{ title: 'دليل أجواء تصوير الطعام', desc: 'جعل الأطباق المنزلية تبدو شهية وجذابة في الصور أيضًا' }
|
||||
],
|
||||
'fashion': [
|
||||
{ title: 'لوحة مزاج الإطلالة اليومية', desc: 'توليد إلهام للإطلالات بناءً على الطقاس والمناسبة والمزاج' },
|
||||
{ title: 'منسق خزانة الملابس الأساسية', desc: 'خلق احتمالات تنسيق لا حصر لها باستخدام قطع محدودة' },
|
||||
{ title: 'رحلة استكشاف الأسلوب الشخصي', desc: 'المساعدة في اكتشاف وبناء أسلوب شخصي فريد' },
|
||||
{ title: 'مبدع إعادة ارتداء الملابس القديمة', desc: 'تقديم إلهام جديد لتنسيق الملابس القديمة' },
|
||||
{ title: 'مستشار إطلالات المناسبات الخاصة', desc: 'تصميم إطلالات تمنح الثقة للمناسبات المهمة' }
|
||||
]
|
||||
}
|
||||
|
||||
// جدول تعيين مسارات التوصية المحددة مسبقًا - بناءً على الأجواء والمشاعر
|
||||
const recommendationMap = {
|
||||
// نقطة الأجواء: شفائي
|
||||
'healing': {
|
||||
'relax': ['emotion', 'lifestyle', 'health', 'home'],
|
||||
'inspire': ['creative', 'growth', 'learning', 'entertainment'],
|
||||
'connect': ['relationship', 'social', 'pet', 'emotion'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// نقطة الأجواء: نمو
|
||||
'growth': {
|
||||
'relax': ['growth', 'learning', 'creative', 'health'],
|
||||
'inspire': ['career', 'learning', 'creative', 'growth'],
|
||||
'connect': ['social', 'relationship', 'career', 'learning'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// نقطة الأجواء: اجتماعي
|
||||
'social': {
|
||||
'relax': ['social', 'pet', 'food', 'home'],
|
||||
'inspire': ['social', 'creative', 'entertainment', 'travel'],
|
||||
'connect': ['relationship', 'social', 'pet', 'travel'],
|
||||
'escape': ['social', 'travel', 'entertainment', 'creative']
|
||||
},
|
||||
// نقطة الأجواء: استكشاف
|
||||
'explore': {
|
||||
'relax': ['travel', 'creative', 'lifestyle', 'food'],
|
||||
'inspire': ['travel', 'creative', 'learning', 'entertainment'],
|
||||
'connect': ['travel', 'social', 'relationship', 'pet'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// نقطة الأجواء: يومي
|
||||
'daily': {
|
||||
'relax': ['lifestyle', 'home', 'health', 'emotion'],
|
||||
'inspire': ['creative', 'food', 'fashion', 'home'],
|
||||
'connect': ['relationship', 'social', 'pet', 'lifestyle'],
|
||||
'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
|
||||
}
|
||||
}
|
||||
|
||||
const vibeOptions = [
|
||||
{ label: 'شفائي', value: 'healing', desc: 'دافئ، مهدئ، علاجي' },
|
||||
{ label: 'نمو', value: 'growth', desc: 'تقدم، اختراق، تحول' },
|
||||
{ label: 'اجتماعي', value: 'social', desc: 'تواصل، مشاركة، تفاعل' },
|
||||
{ label: 'استكشاف', value: 'explore', desc: 'فضول، مغامرة، اكتشاف' },
|
||||
{ label: 'يومي', value: 'daily', desc: 'عادي، حقيقي، اللحظة الحالية' }
|
||||
]
|
||||
|
||||
const feelingOptions = [
|
||||
{ label: 'أريد الاسترخاء', value: 'relax', desc: 'تخفيف التوتر، تصفية الذهن' },
|
||||
{ label: 'البحث عن الإلهام', value: 'inspire', desc: 'تحفيز الإبداع، الحصول على الوحي' },
|
||||
{ label: 'التوق للتواصل', value: 'connect', desc: 'التواصل مع الآخرين، المشاركة العاطفية' },
|
||||
{ label: 'هروب مؤقت', value: 'escape', desc: 'الهروب من الواقع، الانغماس في التجربة' }
|
||||
]
|
||||
|
||||
const scenarios = [
|
||||
{ key: 'lifestyle', name: 'نمط الحياة', anchor: '#_1-نمط-الحياة' },
|
||||
{ key: 'emotion', name: 'الرفقة العاطفية', anchor: '#_2-الرفقة-العاطفية' },
|
||||
{ key: 'entertainment', name: 'الترفيه والتسلية', anchor: '#_3-الترفيه-والتسلية' },
|
||||
{ key: 'growth', name: 'النمو الشخصي', anchor: '#_4-النمو-الشخصي' },
|
||||
{ key: 'social', name: 'التفاعل الاجتماعي', anchor: '#_5-التفاعل-الاجتماعي' },
|
||||
{ key: 'creative', name: 'التعبير الإبداعي', anchor: '#_6-التعبير-الإبداعي' },
|
||||
{ key: 'travel', name: 'استكشاف السفر', anchor: '#_7-استكشاف-السفر' },
|
||||
{ key: 'health', name: 'الصحة البدنية والنفسية', anchor: '#_8-الصحة-البدنية-والنفسية' },
|
||||
{ key: 'learning', name: 'استكشاف المعرفة', anchor: '#_9-استكشاف-المعرفة' },
|
||||
{ key: 'relationship', name: 'إدارة العلاقات', anchor: '#_10-إدارة-العلاقات' },
|
||||
{ key: 'pet', name: 'مرافقة الحيوانات الأليفة', anchor: '#_11-مرافقة-الحيوانات-الأليفة' },
|
||||
{ key: 'finance', name: 'الصحة المالية', anchor: '#_12-الصحة-المالية' },
|
||||
{ key: 'career', name: 'التطوير المهني', anchor: '#_13-التطوير-المهني' },
|
||||
{ key: 'home', name: 'المساحة المنزلية', anchor: '#_14-المساحة-المنزلية' },
|
||||
{ key: 'food', name: 'فنون الطهي', anchor: '#_15-فنون-الطهي' },
|
||||
{ key: 'fashion', name: 'أسلوب الأزياء', anchor: '#_16-أسلوب-الأزياء' }
|
||||
]
|
||||
|
||||
// حساب نتائج التوصية - سحب عشوائي من مجموعة المواضيع
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!vibePoint.value || !feeling.value) return []
|
||||
|
||||
const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
|
||||
const topics = []
|
||||
|
||||
// سحب 1-2 موضوع عشوائياً من كل سيناريو موصى به
|
||||
keys.forEach(key => {
|
||||
const scenario = scenarios.find(item => item.key === key)
|
||||
const scenarioTopics = topicPool[key] || []
|
||||
|
||||
if (scenario && scenarioTopics.length > 0) {
|
||||
// سحب 1-2 موضوع عشوائياً
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
scenarioKey: key,
|
||||
scenarioName: scenario.name,
|
||||
scenarioAnchor: scenario.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// ترتيب عشوائي وتقييد العدد الإجمالي
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// الحصول على وصف الاختيار الحالي
|
||||
const currentSelection = computed(() => {
|
||||
const vibe = vibeOptions.find(i => i.value === vibePoint.value)
|
||||
const feel = feelingOptions.find(p => p.value === feeling.value)
|
||||
return {
|
||||
vibe: vibe?.label || '',
|
||||
feeling: feel?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// تأخير التمرير لضمان اكتمال تحديث DOM
|
||||
setTimeout(() => {
|
||||
// محاولة البحث عبر ID (يدعم تنسيقات متعددة)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// إذا لم يتم العثور عليه، تجربة تنسيقات ID أخرى محتملة
|
||||
if (!element) {
|
||||
// محاولة إزالة بادئة الشرطة السفلية
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// إذا لم يتم العثور عليه بعد، البحث عبر نص العنوان
|
||||
if (!element) {
|
||||
// استخراج اسم السيناريو من نقطة الارتساء
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// مطابقة تامة أو مطابقة جزئية
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// تمييز الفقرة المستهدفة
|
||||
element.style.backgroundColor = '#fdf2f8'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
vibePoint.value = ''
|
||||
feeling.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# مرجع إلهام سيناريوهات الاستهلاك الموجه للمستهلك (C-end)
|
||||
|
||||
## مقدمة الفصل
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['تطبيقات C-end', 'نمط الحياة', 'التجربة العاطفية', 'خلق الأجواء']" coreOutput="اكتشاف 15+ إلهامًا لسيناريوهات الحياة" expectedOutput="إيجاد اتجاه منتج يلمس المستخدمين">
|
||||
|
||||
يلخص هذا المستند <strong>الاتجاهات الإبداعية لتطبيقات النماذج الكبيرة LLM في سيناريوهات الاستهلاك الموجه للمستهلك (C-end)</strong>. على عكس قطاع B-end الذي يركز على الكفاءة ونقاط الألم، تركز منتجات C-end بشكل أكبر على <strong>خلق الإحساس، والإيحاءات النفسية، والأجواء</strong>، مما يتيح للمستخدمين الحصول على صدى عاطفي وتجربة رائعة أثناء الاستخدام.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## اختيار سريع لأجواء السيناريو
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">ابحث عن إلهام السيناريو الذي يلمسك</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
اختر الأجواء التي ترغب بها والمشاعر الحالية، وسيقوم النظام بترشيح اتجاهات السيناريوهات ذات الصلة، انقر على العلامة للانتقال إلى الفصل المقابل.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="vibePoint" placeholder="اختر نوع الأجواء" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in vibeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="feeling" placeholder="اختر الشعور الحالي" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in feelingOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
|
||||
السيناريوهات الموصى بك لـ {{ currentSelection.vibe }} × {{ currentSelection.feeling }} :
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<el-tag
|
||||
v-for="topic in recommendationTopics"
|
||||
:key="topic.title"
|
||||
type="danger"
|
||||
effect="light"
|
||||
style="cursor: pointer; margin-bottom: 4px;"
|
||||
@click="scrollToAnchor(topic.scenarioAnchor)"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
|
||||
إعادة الاختيار
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
---
|
||||
|
||||
## 1. نمط الحياة
|
||||
|
||||
> 💡 **الفكرة الأساسية**: جعل الروتين اليومي العادي ذا طابع احتفالي، وإيجاد الجمال في التفاصيل
|
||||
|
||||
| الرقم | اسم السيناريو | وظيفة السيناريو |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | مساعد طقوس الصباح الاستيقاظ | دمج واجهة برمجة تطبيقات الطقس وبيانات التقويم، توليد خطة صباحية مخصصة بواسطة LLM؛ تشغيل موسيقى مخصصة عبر مكبرات صوت ذكية، وإضاءة تدريجية للإضاءة الذكية |
|
||||
| 2 | خالق أجواء الحياة المستقلة | الاتصال بأجهزة المنزل الذكي (الإضاءة، الصوت، جهاز نشر الروائح)، يقوم LLM بتعديل المعلمات تلقائيًا بناءً على الوقت/المزاج؛ التعلم من تفضيلات المستخدم للتحسين المستمر |
|
||||
| 3 | مولد خطة الاستشفاء المنزلي لعطلة نهاية الأسبوع | ربط واجهة برمجة تطبيقات منصات البث للحصول على قوائم الأفلام، وإنشاء خطة تجمع بين الأفلام + الطعام + الديكور بناءً على التفضيلات السابقة للمستخدم |
|
||||
| 4 | إذاعة لتهدئة الروح قبل النوم | توليد قصص لطيفة باستخدام تحويل النص إلى كلام (TTS)، خوارزمية خلط الضوضاء البيضاء، خفض تدريجي ذكي للصوت؛ تعديل المحتوى بناءً على بيانات النوم |
|
||||
| 5 | ملتقط إلهام الجماليات الحياتية | التعرف على الصور لتحليل صور بيئة المستخدم، توليد اقتراحات جمالية بواسطة LLM؛ توصية محتوى بأسلوب Pinterest/Xiaohongshu |
|
||||
|
||||
---
|
||||
|
||||
## 2. الرفقة العاطفية
|
||||
> 💡 **الفكرة الأساسية**: القبول والرفقة غير المشروطة، لتكون حاوية رقيقة للمشاعر
|
||||
|
||||
| الرقم | اسم السيناريو | وظيفة السيناريو |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | المستمع المتعاطف في وقت متأخر من الليل | تشفير من طرف إلى طرف لضمان الخصوصية، تحليل المشاعر بواسطة LLM لفهم المشاعر، تخزين الذاكرة طويلة المدى لقصص المستخدم، حوار متعدد الجولات لمرافقته باستمرار |
|
||||
| 2 | مرافق التعافي من الفراق | خوارزمية تحديد المرحلة العاطفية، تقديم دعم مختلف لكل مرحلة (مرحلة الفضفضة ← مرحلة التنفيس ← مرحلة إعادة البناء)؛ استرجاع RAG لقاعدة المعرفة النفسية |
|
||||
| 3 | مدرب التنفس لتخفيف القلق | ربط بيانات المستشعرات الحيوية (معدل ضربات القلب/التنفس)، مراقبة مستوى القلق في الوقت الفعلي؛ التوجيه الصوتي لإيقاع التنفس، إرشادات الاسترخاء العضلي التدريجي |
|
||||
| 4 | مرشد إعادة بناء الثقة بالنفس | إطار حوار علم النفس الإيجابي، تسجيل وتقديم ملاحظات حول الإنجازات الصغيرة للمستخدم؛ تقنيات إعادة البناء المعرفي للمساعدة في تغيير الحوار الذاتي السلبي |
|
||||
| 5 | التفسير الذكي ليوميات المشاعر | نموذج NLP للتعرف على المشاعر، تحليل السلاسل الزمنية لاكتشاف أنماط المشاعر؛ رسم بياني مرئي للمشاعر، إنذار تنبؤي للمشاعر |
|
||||
|
||||
---
|
||||
|
||||
## 3. الترفيه والتسلية
|
||||
|
||||
> 💡 **الفكرة الأساسية**: خلق تجارب غامرة، لجعل الترفيه ملاذًا للروح
|
||||
|
||||
| الرقم | اسم السيناريو | وظيفة السيناريو |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | حكم (DM) غامر لألعاب القصص | توليد فروع القصة في الوقت الفعلي بواسطة LLM، تشخيص شخصيات NPC عبر تحويل النص إلى كلام، تعديل الصعوبة والإيقاع ديناميكيًا بناءً على ردود فعل اللاعبين؛ عرض مشاهد AR/VR |
|
||||
| 2 | شخصيات NPC روحانية في ألعاب العالم المفتوح | قاعدة بيانات الذاكرة طويلة المدى لتخزين تاريخ تفاعلات اللاعب، توليد حوار مخصص بواسطة LLM؛ الحساب العاطفي يجعل شخصيات NPC تمتلك ردود فعل عاطفية حقيقية |
|
||||
| 3 | توليد محتوى بودكاست مخصص | توليد محتوى حصري بناءً على خريطة اهتمامات المستخدم، استنساخ الصوت المفضل للمستخدم عبر TTS؛ تفاعل مباشر للإجابة على أسئلة المستمعين |
|
||||
| 4 | فرقة الأجواء في الحفلات الموسيقية الافتراضية | عرض الصور الرمزية الافتراضية، تفاعل التعليقات المنبثقة في الوقت الفعلي، عصي التوهج/أدوات الدعم الافتراضية؛ تقنية الصوت المكاني لخلق شعور بالحضور |
|
||||
| 5 | شريك إبداع مشترك للروايات التفاعلية | توليد القصة في الوقت الفعلي بواسطة LLM، اختيارات المستخدم تؤثر على مسار القصة؛ تصميم بنهايات متعددة، تطور ديناميكي لعلاقات الشخصيات |
|
||||
|
||||
---
|
||||
|
||||
## 4. النمو الشخصي
|
||||
|
||||
> 💡 **الفكرة الأساسية**: النمو ليس زهدًا، بل رحلة اكتشاف ذات ممتعة
|
||||
|
||||
| الرقم | اسم السيناريو | وظيفة السيناريو |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | شاهد النمو الشخصي | عرض مرئي لمسار النمو عبر جدول زمني، وضع علامات تلقائية للمعالم؛ رسوم بيانية مقارنة تظهر "أنا في الماضي" مقابل "أنا الآن" |
|
||||
| 2 | مدرب لعبة بناء العادات | آليات لعب (نقاط الخبرة، المستويات، الشارات)، لوحة المتصدرين الاجتماعية، لعب دور مدرب AI (مثل "مرشد المغامرات") |
|
||||
| 3 | التوافق مع شريك تعلم المهارات | خوارزمية التوافق بناءً على الاهتمامات وأهداف التعلم، مجتمع مجموعات التعلم، آلية مراقبة وتسجيل متبادلة |
|
||||
| 4 | مكتشف السعادة الصغيرة اليومية | التعرف على الصور لاكتشاف اللحظات الجميلة في الحياة، توجيه دفتر الامتنان (gratitude journal)، مراجعة اللحظات الجميلة أسبوعيًا |
|
||||
| 5 | محاكي تجارب الحياة | محاكاة نتائج الخيارات المختلفة عبر قصص متعددة الفروع، مقارنة الحيوات المتوازية؛ عرض مرئي لعواقب القرارات |
|
||||
|
||||
---
|
||||
|
||||
## 5. التفاعل الاجتماعي
|
||||
|
||||
> 💡 **الفكرة الأساسية**: جعل التواصل الاجتماعي سهلاً وطبيعيًا، وإيجاد طرق اتصال مريحة
|
||||
|
||||
| الرقم | اسم السيناريو | وظيفة السيناريو |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | مولد مواضيع كسر الجليد | توصية ذكية للمواضيع بناءً على المناسبة والمشاركين، تحليل المحادثات في الوقت الفعلي لتقديم اقتراحات لاستكمال الموضوع؛ تلميحات لإنقاذ المواقف المحرجة |
|
||||
| 2 | خبير أجواء نصوص منشورات Moments | تحليل محتوى الصور، توليد نصوص بأنماط متعددة (أدبي/فكاهي/عميق) باستخدام LLM؛ توصية ذكية للرموز التعبيرية والتنسيق |
|
||||
| 3 | مخطط أجواء المواعيد | توليد خطط مواعد بناءً على اهتمامات الطرفين، توصيات بالمطاعم/الأنشطة، اقتراحات لمواضيع المحادثة؛ تذكيرات بالطقس وحركة المرور في الوقت الفعلي |
|
||||
| 4 | روح الأجواء في التجمعات عن بُعد | مكتبة ألعاب عبر الإنترنت، مولد أنشطة لكسر الجليد، عجلة المواضيع؛ خلفيات افتراضية وفلاتر لتحسين الأجواء |
|
||||
| 5 | مساعد إدارة الطاقة الاجتماعية | تقييم استنزاف الطاقة بعد الأنشطة الاجتماعية، اقتراحات للتعافي (توصيات بأنشطة فردية)؛ تخطيط ذكي للتقويم الاجتماعي |
|
||||
|
||||
---
|
||||
|
||||
## 6. التعبير الإبداعي
|
||||
|
||||
> 💡 **الفكرة الأساسية**: كل شخص يمتلك الإبداع، يحتاج فقط إلى من يوقظه
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | حقيبة إسعافات جفاف الإلهام | خوارزمية الترابط عبر المجالات، توليد كلمات تحفيزية عشوائية، مكتبة prompt إبداعية؛ أداة تفريغ إلهام على شكل خريطة ذهنية |
|
||||
| 2 | مرشد استكشاف الأسلوب الشخصي | تحليل الصور لتحديد الأسلوب الحالي للمستخدم، توصيات اتجاهات الأسلوب، تجربة افتراضية للملابس/المكياج؛ خط زمني لتطور الأسلوب |
|
||||
| 3 | مستشار جماليات دفاتر الملاحظات واليوميات | توصيات قوالب التنسيق، توليد مخططات الألوان، اقتراحات عناصر الزينة؛ التعرف على الخط اليدوي وتجميل المحتوى |
|
||||
| 4 | دليل أجواء التكوين التصويري | التعرف على المشهد واقتراحات التكوين، توصيات أنماط الفلاتر، تعديل ذكي لمعلمات تحرير الصور؛ مسار تعلم تقنيات التصوير |
|
||||
| 5 | مزامن الموسيقى مع المزاج | خوارزمية تحليل المشاعر الموسيقية، التعرف على مزاج المستخدم، توليد قوائم تشغيل مخصصة؛ قصص الموسيقى ومقدمة خلفية |
|
||||
|
||||
---
|
||||
|
||||
## 7. استكشاف السفر
|
||||
|
||||
> 💡 **الفكرة الأساسية**: السفر ليس مجرد رؤية المناظر الطبيعية، بل هو الشعور بأسلوب حياة مختلف
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | مرشد استكشاف المشي في المدينة | تجميع محتوى خبراء محليين، توصيات أماكن غير تقليدية، تنقل بتقنية AR؛ ترجمة فورية وشرح صوتي |
|
||||
| 2 | توليد يوميات مزاج الرحلة | تصنيف وانتقاء تلقائي للصور، توليد يوميات سفر جميلة باستخدام LLM، خط زمني مع علامات جغرافية؛ توليد فيديو رحلة بنقرة واحدة |
|
||||
| 3 | مساعد مرافق للسفر الفردي | مشاركة الموقع في الوقت الفعلي وتنبيهات السلامة، جهات اتصال طوارئ محلية، مرافقة صوتية لمرشد AI سياحي؛ مجتمع تواصل للمسافرين منفردين |
|
||||
| 4 | معاينة أجواء الوجهة | معاينة بانورامية بتقنية VR/360°، محاكاة الأصوات والروائح المحلية، تقديم الخلفية الثقافية؛ تجربة "إقامة تجريبية" افتراضية |
|
||||
| 5 | توجيه أجواء تصوير السفر | تذكيرات بالوقت الذهبي، خطوط مساعدة التكوين، توصيات نقاط التصوير المحلية المميزة؛ اقتراحات أنماط تلوين ما بعد التصوير |
|
||||
|
||||
---
|
||||
|
||||
## 8. الصحة البدنية والنفسية
|
||||
|
||||
> 💡 **الفكرة الأساسية**: الصحة ليست هدفاً، بل هي رعاية ذاتية لطيفة
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | موقظ دوافع الرياضة | توصية ذكية بنوع التمارين بناءً على حالة المستخدم، خيارات تمارين دقيقة (5 دقائق)، تحديات رياضية قائمة على الألعاب؛ تسجيل الوصول الاجتماعي للتمارين |
|
||||
| 2 | مطبخ إلهام الأكل الصحي | التعرف على مكونات الثلاجة، توصيات وصفات مخصصة، تحليل التغذية والتوافق؛ إرشادات طبخ خطوة بخطوة |
|
||||
| 3 | خبير تحسين أجواء جودة النوم | تحليل بيانات مراقبة النوم، توليد طقوس ما قبل النوم، اقتراحات تحسين البيئة (الحرارة/الرطوبة/الإضاءة)؛ استيقاظ ذكي |
|
||||
| 4 | مرشد إدراك الجسد | توجيه تأمل مسح الجسد، الربط العاطفي لأجزاء الجسم، تمارين الاتصال بين العقل والجسد؛ تصوير الملاحظات الحيوية |
|
||||
| 5 | مساعد تذكير الرعاية الذاتية | مراقبة شدة العمل، تذكيرات منتظمة لأخذ قسط من الراحة، اقتراحات أنشطة رعاية دقيقة (شرب الماء/التمدد/التنفس العميق)؛ سجل الرعاية الذاتية |
|
||||
|
||||
---
|
||||
|
||||
## 9. استكشاف المعرفة
|
||||
|
||||
> 💡 **الفكرة الأساسية**: التعلم مغامرة لا تنتهي أبداً، والفضول هو أفضل معلم
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | مرشد تعزيز استكشاف المعرفة | تصور خريطة النقاط المعرفية، مسار تعلم قائم على اجتياز المراحل، نظام شارات الإنجاز؛ لعب دور مرشد AI |
|
||||
| 2 | شريك سيناريوهات تعلم اللغة | لعب LLM لأدوار مختلفة لإجراء محادثات، تصحيح النطق، تقديم الخلفية الثقافية؛ محاكاة سيناريوهات غامرة |
|
||||
| 3 | مساعد إشباع الفضول | الاتصال بويكيبيديا/رسم المعرفة، تبسيط المفاهيم المعقدة، توصيات المعارف ذات الصلة؛ تسجيل الفضول |
|
||||
| 4 | ملهم إلهام ملاحظات القراءة | تحليل محتوى الكتب، استخراج وربط الأفكار، توصيات بزوايا التفكير؛ قوالب وتجميل ملاحظات القراءة |
|
||||
| 5 | خالق أجواء مشاركة المعرفة | توليد تلقائي لبطاقات المعرفة، تحسين نصوص المشاركة، تجميل بصري؛ تغذية راجعة لبيانات المشاركة الاجتماعية |
|
||||
|
||||
---
|
||||
|
||||
## 10. إدارة العلاقات
|
||||
|
||||
> 💡 **الفكرة الأساسية**: العلاقات الجيدة تحتاج إلى اهتمام، والاهتمام لا يحتاج إلى أن يكون معقداً
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | مدرب التواصل في العلاقات الحميمة | توليد قوالب للتعبير عن المشاعر، إرشادات مهارات التواصل غير العنيف، عبارات حل النزاعات؛ تقييم صحة العلاقة |
|
||||
| 2 | مساعد تذكير رعاية الأسرة | تذكيرات بالمواعيد المهمة (أعياد الميلاد/الذكرى السنوية)، اقتراحات عبارات الرعاية، توصيات بأنشطة عائلية؛ توليد ألبوم عائلي |
|
||||
| 3 | خبير أجواء صيانة الصداقات | تسجيل تفاعلات الأصدقاء، توصيات بالموضوعات المشتركة، تنظيم تجمعات عن بُعد؛ خط زمني للصداقة وتوليد الذكريات |
|
||||
| 4 | مخطط الإفصاح والمفاجآت | توليد خطط مفاجآت مخصصة، توصيات بالهدايا، اقتراحات عبارات رومانسية؛ جدول زمني للتنفيذ وتذكيرات |
|
||||
| 5 | توجيه أجواء تخفيف النزاعات | عبارات تهدئة المشاعر، توجيه التفكير بمنظور الطرف الآخر، اقتراحات خطوات المصالحة؛ تتبع إصلاح العلاقة |
|
||||
|
||||
---
|
||||
|
||||
## 11. مرافقة الحيوانات الأليفة
|
||||
|
||||
> 💡 **الفكرة الأساسية**: الحيوانات الأليفة هي عائلة، ومرافقتها تستحق أن تُسجل وتُقدر
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | يوميات أنسنة الحيوانات الأليفة | تحليل سلوك الحيوان الأليف، توليد يوميات بصيغة المتكلم، إضافة صور تلقائية؛ "Moments" للحيوانات الأليفة |
|
||||
| 2 | مفسر سلوك الحيوانات الأليفة | تحليل فيديو سلوك الحيوان الأليف، إنذارات صحية، اقتراحات للتدريب؛ قاعدة معرفية بخصائص السلالات |
|
||||
| 3 | مخطط وقت مرافقة الحيوانات الأليفة | توصيات بأنشطة للحيوانات الأليفة، دروس صنع ألعاب DIY، توصيات بأماكن صديقة للحيوانات الأليفة؛ التوافق الاجتماعي للحيوانات الأليفة |
|
||||
| 4 | مولد قصص تذكارية للحيوانات الأليفة | انتقاء الصور ومقاطع الفيديو، توليد قصة على خط زمني، إضافة الموسيقى؛ توليد تلقائي لألبوم/فيديو تذكاري |
|
||||
| 5 | دليل الطمأنينة للمبتدئين في تربية الحيوانات الأليفة | دليل رعاية مرحلي، إجابات للأسئلة الشائعة، التعامل مع حالات الطوارئ؛ دعم مجتمع المبتدئين |
|
||||
|
||||
---
|
||||
|
||||
## 12. الصحة المالية
|
||||
|
||||
> 💡 **الفكرة الأساسية**: الحرية المالية ليست هدفاً، بل الصحة المالية هي الهدف
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | مساعد الوعي بالمزاج الاستهلاكي | تحليل سجلات الاستهلاك، تحليل الارتباط بين المزاج والاستهلاك، إنذار الشراء الاندفاعي؛ اقتراحات الإشباع البديل |
|
||||
| 2 | التحفيز المرئي لأهداف الادخار | تصور تقدم الهدف، عرض مشاهد الأحلام، الاحتفال بالإنجازات؛ ألعاب بناء عادات الادخار |
|
||||
| 3 | تعلم المعرفة المالية بسهولة | دفع المعرفة المجزأة، تدريس الحالات القائمة على السيناريو، أسئلة وأجوبة تفاعلية؛ اختبارات المعرفة والشهادات |
|
||||
| 4 | مهدئ القلق المالي | تقييم صحة الوضع المالي، تقنيات إدارة الضغط، خطط عمل بخطوات صغيرة؛ استشارات الصحة النفسية المالية |
|
||||
| 5 | لعبة تجربة الاستثمار الصغير | محاكاة استثمار افتراضية، التثقيف حول المخاطر، لعبة محفظة الاستثمار؛ توجيه للاستثمار الحقيقي الصغير |
|
||||
|
||||
---
|
||||
|
||||
## 13. التطور المهني
|
||||
|
||||
> 💡 **الفكرة الأساسية**: المهنة ليست مساراً ثابتاً، بل هي أرض برية يمكن استكشافها
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | رفيق الحيرة المهنية | تقييم الاهتمامات المهنية، جرد القدرات، توصيات بمعلومات الصناعة؛ حوار مع مرشد مهني |
|
||||
| 2 | ميقظ الشعور بالإنجاز في العمل | تسجيل إنجازات العمل، استخلاص القيمة، تصور الإنجازات؛ جمع التعليقات الإيجابية من الزملاء/العملاء |
|
||||
| 3 | مساعد أجواء التواصل المهني | توصيات بمواضيع العمل، مهارات networking، توصيات بالفعاليات الصناعية؛ تحسين محتوى LinkedIn |
|
||||
| 4 | محفز أفكار العمل الجانبي | مطابقة المهارات-الاهتمامات-طلب السوق، مكتبة حالات العمل الجانبي، دليل البدء؛ تواصل مجتمع العمل الجانبي |
|
||||
| 5 | محطة تعزيز الثقة قبل المقابلة | مقابلة محاكاة، التحضير للأسئلة الشائعة، تقنيات تعزيز الثقة؛ نصائح حول المظهر |
|
||||
|
||||
---
|
||||
|
||||
## 14. المساحة المنزلية
|
||||
|
||||
> 💡 **الفكرة الأساسية**: المنزل ليس مجرد مكان للعيش، بل هو ملاذ للروح
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | مصمم أجواء المساحة المنزلية | تحليل صور المساحة، توصيات بالأنماط، توصيات بالأثاث/الديكور؛ معاينة AR للتأثير |
|
||||
| 2 | دليل تغيير ديكور المنزل حسب الفصول | توصيات ب themes موسمية، نصائح التخزين والعرض، حلول ديكور الأعياد؛ إنشاء قائمة تسوق |
|
||||
| 3 | سحر مساحات المساحات الصغيرة | خوارزميات تحسين المساحة، توصيات بأثاث متعدد الاستخدامات، نصائح التخزين؛ تقنيات التوسع البصري للمساحة |
|
||||
| 4 | صانع الطقوس المنزلية | تصميم طقوس يومية (صباحية/مسائية/عطلة نهاية الأسبوع)، تذكيرات بتنفيذ الطقوس؛ تقييم تأثير الطقوس |
|
||||
| 5 | الرفقة النفسية للتخلص من الأشياء | تقييم القيمة العاطفية للأشياء، إرشادات خطوات التخلص من الأشياء، الدعم النفسي؛ توصيات بقنوات التبرع/إعادة التدوير |
|
||||
|
||||
---
|
||||
|
||||
## 15. الطبخ وفنون الطهي
|
||||
|
||||
> 💡 **الفكرة الأساسية**: الطعام هو لغة الحب، والطبخ هو طريقة للتعبير عنه
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | طبخ الشفاء لشخص واحد | التعرف على مكونات الثلاجة، توصيات بوصفات بسيطة، إرشادات step-by-step؛ جماليات تقديم الطعام لشخص واحد |
|
||||
| 2 | تصميم أجواء مائدة الأعياد | قائمة طعام ب theme الأعياد، حلول ترتيب مائدة الطعام، تقنيات خلق الأجواء؛ تحسين تجربة الضيوف |
|
||||
| 3 | مطابق الحالة المزاجية للطعام | خوارزمية الارتباط بين المزاج والطعام، وصفات تنظيم المشاعر، توصيات comfort food؛ توجيه الشفاء من خلال الطبخ |
|
||||
| 4 | بناء ثقة المبتدئين في المطبخ | وصفات فائقة البساطة، تقنيات إنقاذ الفشل، عبارات بناء الثقة؛ زيادة تدريجية في الصعوبة |
|
||||
| 5 | دليل أجواء تصوير الطعام | نصائح لتقديم الطعام، استخدام الإضاءة الطبيعية، إرشادات زوايا التصوير؛ اقتراحات للفلاتر والتعديل اللاحق |
|
||||
|
||||
---
|
||||
|
||||
## 16. أسلوب الأزياء والملابس
|
||||
|
||||
> 💡 **الفكرة الأساسية**: الأزياء هي تعبير عن الذات، والأسلوب هو انعكاس للداخل
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | لوحة مزاج ملابس اليوم | توصيات شاملة بناءً على الطقس/المناسبة/المزاج، تجربة الملابس الافتراضية، إلهام التنسيق؛ إدارة خزانة الملابس |
|
||||
| 2 | منسق خزانة الملابس الكبسولية | جرد خزانة الملابس، تركيبات القطع، حلول ارتداء القطعة الواحدة بطرق متعددة؛ نصائح التسوق (لسد الثغرات) |
|
||||
| 3 | رحلة استكشاف الأسلوب الشخصي | اختبار الأسلوب، توصيات ب icon مرجعي، مسار تطور الأسلوب؛ بناء الثقة |
|
||||
| 4 | صانع أفكار ارتداء الملابس القديمة بشكل جديد | إلهام لتحويل الملابس القديمة، طرق تنسيق جديدة، تقنيات إضافة الإكسسوارات؛ مفهوم الموضة المستدامة |
|
||||
| 5 | مستشار الإطلالات للمناسبات الخاصة | تفسير dress code للمناسبة، إنشاء حلول الإطلالات، نصائح للمكياج وتسريحات الشعر؛ تناسق الإطلالة الشاملة |
|
||||
|
||||
---
|
||||
|
||||
## المبادئ الأساسية لتصميم منتجات C-side
|
||||
|
||||
### 1. من "الوظيفة" إلى "الشعور"
|
||||
|
||||
تركز منتجات B-side على "أي مشكلة يمكن أن تحلها هذه الوظيفة"، بينما تركز منتجات C-side على "ما الشعور الذي يمكن أن تجلبه هذه الوظيفة".
|
||||
|
||||
| تفكير B-side | تفكير C-side |
|
||||
|---------|---------|
|
||||
| زيادة الكفاءة | توفير الوقت للقيام بالأشياء المحبوبة |
|
||||
| خفض التكاليف | جعل كل فلس يُنفق يستحق ذلك |
|
||||
| حل نقاط الألم | خلق تجارب رائعة |
|
||||
| اكتمال الوظائف | الشعور المثالي |
|
||||
|
||||
### 2. المستويات الثلاثة لخلق الأجواء
|
||||
|
||||
**المستوى الحسي**: تصميم البصر والسمع واللمس
|
||||
- ألوان دافئة
|
||||
- أصوات مهدئة
|
||||
- تأثيرات حركية سلسة
|
||||
|
||||
**المستوى العاطفي**: التواصل مع المشاعر وتوجيهها
|
||||
- فهم مزاج المستخدم
|
||||
- تقديم الدعم العاطفي
|
||||
- خلق مشاعر إيجابية
|
||||
|
||||
**مستوى المعنى**: تقبل القيم والانتماء
|
||||
- جعل المستخدم يشعر بأنه مفهوم
|
||||
- خلق شعور بالانتماء
|
||||
- إضفاء معنى على الفعل
|
||||
|
||||
### 3. قوة الإيحاء النفسي
|
||||
|
||||
تصميم ونصوص منتجات C-end تنقل إيحاءات نفسية:
|
||||
|
||||
- **إيحاء إيجابي**: "لقد قمت بعمل رائع بالفعل"، "خذ وقتك، لا بأس"
|
||||
- **إيحاء بالانتماء**: "الكثيرون مثلك"، "أنت لست وحدك"
|
||||
- **إيحاء بالنمو**: "كل محاولة هي تقدم"، "أنت تتحسن"
|
||||
|
||||
### 4. اجعل المستخدم يصبح نسخة أفضل من نفسه
|
||||
|
||||
أفضل منتجات C-end لا تغير المستخدم، بل تساعده على أن يصبح النسخة التي يرغب في أن يكونها.
|
||||
|
||||
- ليس "يجب عليك..."، بل "يمكنك..."
|
||||
- ليس "يجب أن..."، بل "إذا كنت تريد..."
|
||||
- ليس "أنت لست بعد..."، بل "أنت بالفعل..."
|
||||
|
||||
---
|
||||
|
||||
> 🌟 **تذكر**: ما يشتريه المستخدم النهائي ليس الميزات، بل الشعور؛ وليس الأدوات، بل الرفقة؛ وليس الخدمات، بل الفهم.
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,544 @@
|
||||
---
|
||||
title: 'نموذج الألماس المزدوج: افعل الشيء الصحيح أولاً، ثم افعل الشيء بشكل صحيح'
|
||||
description: 'مقالة تمهيدية عن نموذج الألماس المزدوج Double Diamond للقراء بدون خبرة سابقة. فهم المراحل الأربع Discover و Define و Develop و Deliver، وتجنب الاستعجال في صنع النماذج الأولية قبل توضيح المشكلة.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'حوالي <strong>1.5 ساعة</strong>'
|
||||
</script>
|
||||
|
||||
# نموذج الألماس المزدوج: افعل الشيء الصحيح أولاً، ثم افعل الشيء بشكل صحيح
|
||||
|
||||
<a id="top-dd"></a>
|
||||
|
||||
## دليل هذا الفصل
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Double Diamond', 'التفكير التصميمي', 'تحليل المتطلبات', 'تصميم الحلول']"
|
||||
coreOutput="تعريف مشكلة أوضح ونقطة تحقق أكثر منطقية"
|
||||
expectedOutput="عدم الاستعجال في رسم النموذج الأولي، بل معرفة التفكير في المشكلة أولاً ثم مقارنة الحلول"
|
||||
>
|
||||
|
||||
العديد من الأشخاص عند صنع منتجهم الأول، الخطأ الأكثر شيوعًا ليس "عدم بذل جهد كافٍ"، بل الدخول بسرعة كبيرة في الحل.
|
||||
|
||||
بمجرد أن يظهر اتجاه في الذهن، يبدأون في التفكير في كيفية رسم الصفحة، وأين يوضع الزر، وهل يتم توصيل AI، وهل يتم عمل تسجيل دخول، وبأي أداة يتم رسم النموذج الأولي. بعد جولة كاملة من العمل، يكتشفون أن المشكلة الأساسية لم يتم التفكير فيها بوضوح: هل لدى المستخدم نقطة ألم حقيقية؟ هل هذه المشكلة تستحق الحل الآن؟ تعتقد أنك تتقدم في المشروع، لكنك في الواقع تتسارع فقط في الاتجاه الخاطئ بجدية.
|
||||
|
||||
نموذج الألماس المزدوج (Double Diamond) مصمم لتجنب هذه الحالة.
|
||||
|
||||
أهم تذكير قدمه هو: **"عمل الشيء الصحيح" و"عمل الشيء بشكل صحيح" هما مرحلتان مختلفتان تمامًا.** إذا لم توضح المشكلة بعد، واستعجلت في صنع نموذج أولي، فعادةً ما ستجعل الاتجاه الخاطئ أكثر اكتمالاً فقط.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info الحد الأدنى من SOP
|
||||
**الهدف**: بعد القراءة، ستكون أكثر وضوحًا حول متى يجب التفكير في المشكلة أولاً ومتى يجب البدء في التفكير في الحلول والنماذج الأولية عند صنع المنتج، لتجنب العمل بجدية في الاتجاه الخاطئ منذ البداية.
|
||||
|
||||
**خطوات العمل**: اتبع الخطوات الأربع `Discover → Define → Develop → Deliver`، وقم فقط بما يجب القيام به في المرحلة الحالية.
|
||||
|
||||
**النتيجة**: ستحصل على تعريف مشكلة أوضح، والعديد من الحلول القابلة للمقارنة، وأصغر نسخة قابلة للتحقق.
|
||||
|
||||
**روابط سريعة**: [ما هو نموذج الألماس المزدوج](#dd-what) · [الألماس الأول](#dd-first) · [كيف يساعدك AI](#dd-ai)
|
||||
:::
|
||||
|
||||
## ما ستتعلمه في هذا الفصل
|
||||
|
||||
1. ما هو نموذج الألماس المزدوج، ولماذا هو مناسب للمبتدئين عند صنع المنتجات
|
||||
2. ماذا تفعل المراحل الأربع Discover و Define و Develop و Deliver على التوالي
|
||||
3. كيف نفرق بين "الآن يجب الاستمرار في التوسع" و"الآن يجب البدء في التضييق"
|
||||
4. كيفية استخدام نموذج الألماس المزدوج في منتجات AI وتصميم النماذج الأولية والتحقق من المتطلبات
|
||||
|
||||
<a id="dd-what"></a>
|
||||
## [1. ما هو نموذج الألماس المزدوج بالضبط](#top-dd)
|
||||
|
||||
نموذج الألماس المزدوج هو إطار عمل تصميم كلاسيكي روجت له **Design Council** البريطانية. يرسم عملية التصميم والابتكار الكاملة في شكل ألماسين متتاليين.
|
||||
|
||||
السبب في كونه "ألماسًا" هو أن كل ألماس يحتوي على نوعين من الأفعال المتعاكسة لكنها مهمة بنفس القدر:
|
||||
|
||||
- **التوسع**: افتح الأفق أولاً، وانظر إلى المزيد من الاحتمالات
|
||||
- **التضييق**: ثم ضيق النطاق، واتخذ القرارات والتضحيات
|
||||
|
||||
العملية الكاملة تتكون من أربع خطوات:
|
||||
|
||||
1. **Discover**: فهم واسع للمستخدمين والمشاكل والبيئة والسوق
|
||||
2. **Define**: استخلاص المشكلة الأساسية التي تستحق الحل حقًا من كمية كبيرة من المعلومات
|
||||
3. **Develop**: تطوير حلول متعددة متنوعة حول المشكلة الأساسية
|
||||
4. **Deliver**: الفرز، صنع النماذج الأولية، الاختبار، وتسليم الحل الأنسب
|
||||
|
||||
إذا ضغطت هذه الخطوات الأربع في جملة واحدة أسهل في التذكر، فهي:
|
||||
|
||||
- **الألماس الأول**: أوضح أولاً ما هي المشكلة التي يجب حلها بالضبط
|
||||
- **الألماس الثاني**: ثم قرر بأي حل ستحلها
|
||||
|
||||
وهذه هي الجملة الدقيقة التي قلتها:
|
||||
|
||||
- **الألماس الأول: عمل الشيء الصحيح**
|
||||
- **الألماس الثاني: عمل الشيء بشكل صحيح**
|
||||
|
||||
## 2. لماذا نموذج الألماس المزدوج مناسب بشكل خاص للمبتدئين
|
||||
|
||||
الإيقاع الأكثر شيوعًا بين المبتدئين عند صنع المنتجات غالبًا ما يكون هكذا:
|
||||
|
||||
- التفكير في فكرة
|
||||
- الشعور بأن هذا الاتجاه رائع
|
||||
- البدء فورًا في رسم النموذج الأولي
|
||||
- أثناء العمل، اكتشاف أن الوظائف تزداد أكثر فأكثر
|
||||
- في النهاية، عدم المعرفة ما هي المشكلة التي يتم حلها بالضبط
|
||||
|
||||
قيمة نموذج الألماس المزدوج ليست في جعل العملية معقدة، بل في **إجبارك على فصل "فهم المشكلة" و"تصميم الحل"**.
|
||||
|
||||
هذا الأمر يبدو عاديًا، لكنه مهم جدًا في الواقع. لأن العديد من المنتجات الفاشلة لم تفشل لأن التنفيذ لم يكن جادًا، بل لأن:
|
||||
|
||||
- تم اختيار المشكلة الخاطئة
|
||||
- تم سوء فهم المستخدم
|
||||
- تم تثبيت الحل مبكرًا جدًا
|
||||
- تم إنفاق الكثير من الوقت في صقل التفاصيل، دون التحقق من الاتجاه
|
||||
|
||||
نموذج الألماس المزدوج يذكرك باستمرار:
|
||||
|
||||
- لا تفترض أن المشكلة ثابتة لمجرد أن الفكرة مريحة
|
||||
- لا تفترض أن الحل يستحق التنفيذ لمجرد أنه يمكن صنعه
|
||||
- لا تفترض أن المستخدم سيحتاجه حقًا لمجرد أن النموذج الأولي يبدو كاملًا
|
||||
|
||||
<a id="dd-first"></a>
|
||||
## [3. الألماس الأول: عمل الشيء الصحيح](#top-dd)
|
||||
|
||||
الألماس الأول يركز على **المشكلة نفسها**، وليس الحل.
|
||||
|
||||
يمكنك فهمه كجملة واحدة: **لا تستعجل في العمل، أوضح أولاً ما إذا كان يستحق العمل أم لا.**
|
||||
|
||||
### 3.1 Discover: افتح مساحة المشكلة أولاً
|
||||
|
||||
المهمة الأساسية لمرحلة Discover هي **البحث الواسع، وليس الاستنتاج السريع**.
|
||||
|
||||
ما يتم فعله عادةً في هذه الخطوة يشمل:
|
||||
|
||||
- مشاهدة كيف يعمل المستخدمون في السيناريوهات الحقيقية
|
||||
- مقابلة المستخدمين المحتملين، ومعرفة متى واجهوا المشكلة آخر مرة
|
||||
- مراقبة كيف يتدبرون الأمر حاليًا
|
||||
- النظر إلى كيفية تعامل المنافسين والبدائل
|
||||
- جمع معلومات السوق والعمليات والقيود وسلسلة القيمة
|
||||
|
||||
العديد من الأشخاص يخطئون في الاعتقاد بأن Discover هو مجرد "مشاهدة المزيد من المعلومات". لكن الأهم هو: **تحتاج إلى فهم الأشخاص والسيناريوهات، وليس فقط البحث عن كومة من المعلومات.**
|
||||
|
||||
مثلاً، إذا كنت تريد صنع أداة "AI يساعد في تنظيم محاضر الاجتماعات"، ففي مرحلة Discover يجب أن تركز أكثر على:
|
||||
|
||||
- أين يكون المستخدم في أكثر ألم بعد الاجتماع
|
||||
- هل الصعوبة في التدوين، أم في التنظيم، أم في المشاركة
|
||||
- هل يكتبون بأنفسهم، أم يجعلون المتدربين يكتبون، أم يستمعون للتسجيل مرة أخرى، أم لا ينظمون أبدًا
|
||||
- أي سيناريوهات الاجتماعات تحتاج أكثر لمحاضر، وأيها لا تحتاج أبدًا
|
||||
|
||||
الهدف الأهم في هذه الخطوة ليس الوصول إلى إجابة، بل **لا تعتقد أنك تعرف الإجابة مبكرًا جدًا.**
|
||||
|
||||
### 3.2 Define: استخلص المشكلة الأساسية من كومة المعلومات
|
||||
|
||||
إذا كان Discover هو فتح الأفق، فإن Define هو بدء التضييق.
|
||||
|
||||
ما يجب فعله في مرحلة Define ليس الاحتفاظ بكل الملاحظات، بل السؤال:
|
||||
|
||||
- أي مشكلة هي الأكثر استحقاقًا للحل أولاً
|
||||
- أي مشكلة هي الأكثر تكرارًا والأكثر ألمًا والأكثر قيمة
|
||||
- أي سيناريو سنستهدفه فقط في النسخة الأولى
|
||||
|
||||
جوهر هذه الخطوة هو تحويل موضوع واسع إلى تعريف مشكلة واضح.
|
||||
|
||||
مثلاً، في البداية قد تقول:
|
||||
|
||||
> أريد صنع أداة AI لتحسين كفاءة الاجتماعات.
|
||||
|
||||
في مرحلة Define، قد يصبح التعبير الأفضل:
|
||||
|
||||
> سنحل أولاً مشكلة عدم قدرة فرق المشاريع على إخراج محضر يتضمن المهام والمسؤولين والمواعيد النهائية في غضون 10 دقائق بعد اجتماعات التعاون التي تستمر من 30 إلى 60 دقيقة.
|
||||
|
||||
هنا تبدأ المشكلة في الوضوح:
|
||||
|
||||
- من هو المستخدم
|
||||
- ما هو السيناريو
|
||||
- ما هو العائق
|
||||
- ما هو معيار النجاح
|
||||
|
||||
جوهر Define هو **التضييق من "مشاكل كثيرة" إلى "أي مشكلة سنحلها أولاً هذه المرة".**
|
||||
|
||||
## 4. الألماس الثاني: عمل الشيء بشكل صحيح
|
||||
|
||||
عندما تكمل الألماس الأول، حينها فقط تكون مناسبًا حقًا للدخول في الألماس الثاني. لأنك في هذه اللحظة لا تحل اتجاهًا غامضًا، بل مشكلة محددة تم تضييقها.
|
||||
|
||||
### 4.1 Develop: تطوير حلول متنوعة حول المشكلة الأساسية
|
||||
|
||||
تركيز مرحلة Develop هو **استكشاف حلول محتملة متعددة حول نفس المشكلة**.
|
||||
|
||||
لاحظ أن التوسع هنا يختلف عن مرحلة Discover.
|
||||
|
||||
- توسع Discover هو استكشاف مساحة المشكلة
|
||||
- توسع Develop هو استكشاف مساحة الحلول
|
||||
|
||||
بالعودة إلى مثال محاضر الاجتماعات، في مرحلة Develop، يمكنك البدء في التفكير:
|
||||
|
||||
- هل نصنع أداة ويب أم إضافة للاجتماعات
|
||||
- هل نعالج بعد رفع التسجيل أم نسجل في الوقت الفعلي
|
||||
- هل نعمل ملخص فقط أم نركز على استخراج المهام
|
||||
- هل نؤكد على الكفاءة الشخصية أم على مزامنة الفريق
|
||||
- هل نعطي المستخدم حرية التعديل أم نخرج قالبًا منظمًا مباشرة
|
||||
|
||||
هذه الخطوة مناسبة جدًا للعصف الذهني، ومناسبة جدًا أيضًا للعمل مع الفريق لفتح الحلول.
|
||||
|
||||
لكن هناك شرط مسبق: **جميع الحلول يجب أن تخدم نفس المشكلة المحددة.**
|
||||
إذا لم يتم تعريف المشكلة بوضوح، فمن السهل أن يتحول Develop مرة أخرى إلى فوضى في الوظائف.
|
||||
|
||||
### 4.2 Deliver: اختيار الحل، صنع النموذج الأولي، الاختبار والتسليم
|
||||
|
||||
مرحلة Deliver هي مرحلة التضييق في الألماس الثاني.
|
||||
|
||||
ما يجب عليك فعله هنا ليس الاستمرار في التفكير في المزيد، بل بدء الحكم:
|
||||
|
||||
- أي حل هو الأنسب للمرحلة الحالية
|
||||
- أي نسخة هي الأصغر لكنها الأكثر فائدة
|
||||
- أي الوظائف يجب تنفيذها أولاً وأيها يمكن تأجيله
|
||||
- كيفية صنع نموذج أولي واختباره والتحقق منه على نطاق صغير
|
||||
|
||||
العديد من الأشخاص يعتقدون أن Deliver يعني "الإطلاق". في الواقع معناه الأكثر دقة هو: **تحويل حل إلى شيء قابل للاختبار والتحقق والتكرار.**
|
||||
|
||||
قد يكون:
|
||||
|
||||
- مخطط تدفق منخفض الدقة
|
||||
- نموذج أولي Figma
|
||||
- MVP قابل للتشغيل
|
||||
- اختبار مستخدمين على نطاق صغير
|
||||
- نسخة مكررة بعد تغذية راجعة حقيقية
|
||||
|
||||
تركيز Deliver ليس "التسليم المثالي"، بل **وضع الحل في بيئة حقيقية للتحقق في أسرع وقت ممكن.**
|
||||
|
||||
## 5. جدول مقارنة سهل التذكر
|
||||
|
||||
إذا كنت دائمًا تخلط بين المراحل الأربع، يمكنك حفظ هذا الإصدار مباشرة:
|
||||
|
||||
| المرحلة | ماذا تفعل | الكلمات المفتاحية | المخرجات الشائعة |
|
||||
| --- | --- | --- | --- |
|
||||
| Discover | فهم المشكلة | بحث، مراقبة، مقابلات، جمع معلومات | رؤى المستخدمين، ملاحظات السيناريوهات، قائمة المشاكل |
|
||||
| Define | تعريف المشكلة | استخلاص، تركيز، تضحيات، إعادة صياغة المشكلة | تعريف المشكلة، الأولويات، نقطة دخول MVP |
|
||||
| Develop | استكشاف الحلول | عصف ذهني، مقارنة، إبداع مشترك، تصور النماذج الأولية | قائمة الحلول، مخططات التدفق، اتجاهات النماذج الأولية |
|
||||
| Deliver | التحقق من الحلول | نموذج أولي، اختبار، تكرار، تسليم | نموذج أولي، تغذية راجعة من الاختبار، نسخة محسنة |
|
||||
|
||||
وإذا ضغطنا أكثر، فهذا هو الشكل:
|
||||
|
||||
- **Discover / Define**: حل "عمل الشيء الصحيح"
|
||||
- **Develop / Deliver**: حل "عمل الشيء بشكل صحيح"
|
||||
|
||||
## 6. أخطاء نموذج الألماس المزدوج الأكثر شيوعًا
|
||||
|
||||
### 6.1 Discover لم يكتمل بعد، وتم الانتقال مباشرة إلى Deliver
|
||||
|
||||
هذا هو الأكثر شيوعًا. العديد من الأشخاص بمجرد أن تكون لديهم فكرة يبدأون في رسم النماذج الأولية وكتابة PRD وتوصيل النماذج وصنع الصفحات.
|
||||
|
||||
المشكلة ليست أنك لا تعمل بجدية، بل أنك ربما لم تؤكد بعد ما إذا كانت المشكلة تستحق الحل.
|
||||
|
||||
### 6.2 Discover لفترة طويلة، لكن Define لا يحدث أبدًا
|
||||
|
||||
النوع الآخر من المتطرفين هو البحث المستمر، والاطلاع المستمر على المواد، والمقابلات المستمرة، لكن عدم الجراءة على التضييق.
|
||||
|
||||
الألماس المزدوج ليس لجعلك تتوسع إلى ما لا نهاية، بل لتذكيرك: بعد التوسع يجب الدخول في الحكم والتضحيات.
|
||||
|
||||
### 6.3 بعد Define، يتم تعديل المشكلة سرًا
|
||||
|
||||
العديد من الفرق في مرحلة Develop، بسبب سهولة حل معين، تقوم بتعديل تعريف المشكلة بشكل عكسي ليتوافق مع الحل الموجود.
|
||||
|
||||
هذا خطير جدًا. لأنك ربما لا تحل المشكلة، بل تبحث عن مبرر للحل الذي تفضله.
|
||||
|
||||
### 6.4 سوء فهم Deliver على أنه "إطلاق شامل"
|
||||
|
||||
Deliver لا يعني أنه لا يُعد منتهيًا إلا بعد إكمال المنتج بالكامل. في كثير من الأحيان، نموذج أولي قابل للاختبار، أو جولة تجريب مستخدمين حقيقيين، هي بالفعل deliver جيد.
|
||||
|
||||
## 7. في منتجات AI، كيفية استخدام نموذج الألماس المزدوج
|
||||
|
||||
منتجات AI عرضة بشكل خاص للوقوع في فخ "القدرات أولاً"، لأن قدرات النموذج تبدو مغرية جدًا. ستشعر برغبة قوية في التفكير مباشرة:
|
||||
|
||||
- هل يتم توصيل الوسائط المتعددة
|
||||
- هل يتم عمل Agent
|
||||
- هل يتم إضافة سير عمل
|
||||
- هل يتم توصيل الصوت والصور والبحث عبر الإنترنت
|
||||
|
||||
لكن نموذج الألماس المزدوج سيجبرك على السؤال أولاً:
|
||||
|
||||
- أين يعلق المستخدم حقًا
|
||||
- هل هذه النقطة العائقية تتطلب AI حتمًا
|
||||
- إذا لم يتم استخدام AI، فأين أسوأ جزء في الطريقة الحالية
|
||||
- بعد إضافة AI، ما هو التقدم الأساسي
|
||||
|
||||
هذا يساعدك في تجنب حالة شائعة: **قدرات قوية جدًا، لكن القيمة ضعيفة جدًا.**
|
||||
|
||||
ترتيب عملي هو:
|
||||
|
||||
1. في مرحلة Discover، راقب كيف يتعامل المستخدمون مع المهام حاليًا
|
||||
2. في مرحلة Define، اكتب السيناريو الأكثر ألمًا كتعريف مشكلة واضح
|
||||
3. في مرحلة Develop، قارن أي قدرات AI هي الأنسب لخدمة هذه المشكلة
|
||||
4. في مرحلة Deliver، اصنع أصغر نسخة ودع المستخدمين الحقيقيين يختبرونها
|
||||
|
||||
## 8. قالب ألماس مزدوج يمكن استخدامه مباشرة
|
||||
|
||||
إذا كنت تصنع منتجك الخاص، يمكنك البدء بالكتابة وفقًا لهذا الترتيب:
|
||||
|
||||
### Discover
|
||||
|
||||
- من هم المستخدمون الذين لاحظتهم؟
|
||||
- متى واجهوا هذه المشكلة آخر مرة؟
|
||||
- كيف يحلونها حاليًا؟
|
||||
- أين يكون أكثر ما يزعجهم وأبطأهم وأقل ما يطمئنهم؟
|
||||
|
||||
### Define
|
||||
|
||||
- من بين هذه المشاكل، أيها الأكثر استحقاقًا للحل أولاً؟
|
||||
- أي سيناريو هو الأكثر تكرارًا أو الأكثر أهمية؟
|
||||
- من سنخدم في النسخة الأولى فقط، وماذا سنحل فقط؟
|
||||
- بعد الحل الناجح، ماذا سيتغير في حالة المستخدم؟
|
||||
|
||||
### Develop
|
||||
|
||||
- بالنسبة لهذه المشكلة، ما هي الحلول المحتملة؟
|
||||
- أي الحلول هي الأخف والأسرع والأسهل للتحقق؟
|
||||
- أيها يجب عمله، وأيها يمكن تأجيله؟
|
||||
|
||||
### Deliver
|
||||
|
||||
- ما هو أصغر شيء يمكننا تسليمه للتحقق من هذا الاتجاه؟
|
||||
- هل هو مخطط تدفق، أم نموذج أولي، أم MVP؟
|
||||
- من نحتاج لاختباره؟
|
||||
- بعد الاختبار، كيف نحكم على ما إذا كنا سنستمر أم نعدل أم نتخلى؟
|
||||
|
||||
## 9. مثال يمكن فهمه حتى من المبتدئين تمامًا
|
||||
|
||||
لنفترض أنك تريد صنع أداة AI "تساعد طلاب الجامعات في إعداد سيرهم الذاتية للبحث عن عمل".
|
||||
|
||||
العديد من الأشخاص في البداية سيدخلون مباشرة في الألماس الثاني، ويبدأون في التفكير:
|
||||
|
||||
- هل يتم تجميل تلقائي بنقرة واحدة
|
||||
- هل يتم إعادة كتابة ذكية
|
||||
- هل يتم مطابقة تلقائية مع وصف الوظيفة
|
||||
- هل يتم توليد مقدمة ذاتية
|
||||
|
||||
لكن وفقًا لنموذج الألماس المزدوج، العملية الأفضل ستكون:
|
||||
|
||||
### الألماس الأول
|
||||
|
||||
**Discover**
|
||||
|
||||
- تحدث مع الخريجين الجدد عن متى عدلوا سيرتهم الذاتية آخر مرة
|
||||
- انظر كيف يحولون سيرتهم القديمة إلى نسخة جديدة
|
||||
- افهم ما يزعجهم أكثر: "لا أعرف كيف أكتب" أم "لا أعرف كيف أعدل" أم "لا أعرف كيف أحكم على جودتها"
|
||||
|
||||
**Define**
|
||||
|
||||
- أخيرًا تضيق إلى مشكلة أكثر تحديدًا:
|
||||
- ليس "طلاب الجامعات لا يعرفون كيف يصنعون سيرة ذاتية"
|
||||
- بل "الطالب الذي يقدم على تدريب لأول مرة، يجد صعوبة في تحويل خبراته السابقة إلى تعبيرات تتناسب مع الوظيفة، ولذلك يؤخر التقديم"
|
||||
|
||||
### الألماس الثاني
|
||||
|
||||
**Develop**
|
||||
|
||||
- فكر في عدة حلول: مكتبة قوالب، إعادة كتابة AI، مقارنة مع الوظيفة، تقييم السيرة الذاتية، مراجع حالات
|
||||
|
||||
**Deliver**
|
||||
|
||||
- النسخة الأولى فقط "إعادة كتابة نقاط الخبرة بناءً على وصف الوظيفة"
|
||||
- جربها مع 5 طلاب، وانظر ما إذا كانوا سيقدمون النسخة الأولى من سيرتهم الذاتية بشكل أسرع
|
||||
|
||||
ستكتشف أنه بمجرد أن يتم تنفيذ الألماس الأول بشكل متين، سيكون الألماس الثاني أوضح بكثير.
|
||||
|
||||
## 10. ملخص
|
||||
|
||||
أقوى جانب في نموذج الألماس المزدوج هو أنه يساعدك في تقسيم كتلة الفوضى الكاملة إلى أربع حركات أوضح:
|
||||
|
||||
- توسع أولاً لفهم المشكلة
|
||||
- ثم ضيق لتعريف المشكلة
|
||||
- ثم توسع لاستكشاف الحلول
|
||||
- وأخيرًا ضيق لتسليم الحل
|
||||
|
||||
إنه لا يجعلك أبطأ، بل يجعلك **توفر الكثير من المسارات التي تبدو مشغولة لكنها في الاتجاه الخاطئ.**
|
||||
|
||||
خاصة في عصر AI، حيث أصبح صنع الأشياء أسرع فأسرع، يصبح نموذج الألماس المزدوج أكثر أهمية. لأنه عندما يصبح "الصنع" أسهل فأسهل، ستكون القدرة النادرة حقًا هي: **هل تحل مشكلة تستحق الحل، وهل تستخدم الطريقة المناسبة لحلها.**
|
||||
|
||||
تذكر هذه الجملة فقط:
|
||||
|
||||
**افعل الشيء الصحيح أولاً، ثم افعل الشيء بشكل صحيح.**
|
||||
|
||||
<a id="dd-ai"></a>
|
||||
## [11. كيفية استخدام AI لمساعدتك في تشغيل عملية الألماس المزدوج](#top-dd)
|
||||
|
||||
نموذج الألماس المزدوج نفسه ليس أداة AI، لكن AI مناسب جدًا ليكون "مسرعًا" في المراحل الأربع. المفتاح ليس جعل AI يتخذ القرارات بدلاً منك، بل جعله يساعدك في توسيع الأفق وتنظيم المعلومات ومقارنة الحلول وتوليد مواد التحقق.
|
||||
|
||||
### 11.1 في مرحلة Discover، استخدم AI للقيام بجولة تمهيدية للمعلومات
|
||||
|
||||
قبل المقابلات والبحث الرسمي، يمكنك جعل AI يساعدك في عمل مسح خفيف للمشاكل، مثلاً:
|
||||
|
||||
- ما هي البدائل الشائعة في السوق
|
||||
- عما يشكو المستخدمون أكثر في المجتمعات العامة
|
||||
- في أي سيناريوهات ومجموعات تظهر هذه المشكلة عادةً
|
||||
- ما الذي تتجاهله المنتجات الحالية عادةً
|
||||
|
||||
هذه الخطوة لا يمكنها استبدال البحث الحقيقي، لكنها مناسبة جدًا لمساعدتك في بناء خريطة مشاكل بسرعة.
|
||||
|
||||
إدخال بسيط للمبتدئين يمكن أن يكون:
|
||||
|
||||
```text
|
||||
أريد صنع أداة تساعد طلاب الجامعات في تعديل سيرهم الذاتية.
|
||||
لا تساعدني في التفكير في الوظائف أولاً، بل ساعدني في رؤية ما هي المشاكل الأكثر شيوعًا التي يواجهها الناس في هذه المسألة.
|
||||
```
|
||||
|
||||
AI قد يخرج:
|
||||
|
||||
```text
|
||||
خريطة المشاكل الأولية:
|
||||
|
||||
1. لا أعرف ما هي الخبرات التي يجب كتابتها
|
||||
2. لا أعرف كيف أعدل لتناسب الوظيفة
|
||||
3. عدلت عدة نسخ لكنني لا أزال غير متأكد مما إذا كانت جيدة بما فيه الكفاية
|
||||
4. أحتاج شخصًا يراجع لي، لكن من المحرج أن أزعج الآخرين في كل مرة
|
||||
5. بسبب عدم اليقين، أؤخر التقديم دائمًا
|
||||
```
|
||||
|
||||
هدف هذا النوع من المخرجات ليس أن يستنتج بدلاً منك، بل أن يساعدك في الدخول إلى Discover بشكل أسرع.
|
||||
|
||||
### 11.2 في مرحلة Define، دع AI يساعدك في تضييق تعريف المشكلة
|
||||
|
||||
العديد من الأشخاص بعد جمع كومة من المواد، أصعب شيء هو ضغط المشكلة في جملة واحدة واضحة حقًا. يمكنك تسليم ملاحظات البحث إلى AI وجعله يساعدك في ضغطها في عدة تعريفات مشاكل مرشحة:
|
||||
|
||||
```text
|
||||
فيما يلي ملاحظات البحث وتغذية المستخدمين التي جمعتها في مرحلة Discover:
|
||||
[ألصق المحتوى]
|
||||
|
||||
ساعدني في ثلاثة أشياء:
|
||||
1. تلخيص أنماط المشاكل الأكثر تكرارًا
|
||||
2. ترتيب 3 مشاكل تستحق الحل أولاً حسب تكرار المشكلة وشدة الألم وقابلية التحقق
|
||||
3. اكتب كل مشكلة كتعريف مشكلة محدد في جملة واحدة
|
||||
```
|
||||
|
||||
هذا سيساعدك على الدخول إلى Define بشكل أسهل، بدلاً من البقاء في حالة "المشاكل كثيرة".
|
||||
|
||||
يمكنك حتى كتابة الإدخال ببساطة شديدة:
|
||||
|
||||
```text
|
||||
المشاكل التي جمعتها حاليًا هي:
|
||||
1. الجميع لا يعرف ماذا يكتب في السيرة الذاتية
|
||||
2. الجميع لا يعرف كيف يعدل
|
||||
3. الجميع يشعر دائمًا بأنه لم يعدل بشكل جيد ويخاف من التقديم
|
||||
|
||||
ساعدني في رؤية أي مشكلة أنسب للحل أولاً في النسخة الأولى.
|
||||
```
|
||||
|
||||
AI قد يخرج:
|
||||
|
||||
```text
|
||||
المشكلة المقترح حلها أولاً:
|
||||
|
||||
"الطالب الذي يقدم على تدريب لأول مرة، غير متأكد مما إذا كانت سيرته الذاتية قد وصلت إلى مستوى قابل للتقديم، ولذلك يعدلها مرارًا ويؤخر التقديم."
|
||||
|
||||
الأسباب:
|
||||
1. هذه المشكلة أكثر تحديدًا
|
||||
2. يمكنها تفسير سلوك التأجيل
|
||||
3. أسهل في تصميم نسخة صغيرة للتحقق
|
||||
```
|
||||
|
||||
هذا النوع من المخرجات مفيد جدًا، لأنه يساعدك على التضييق من كومة مشاكل غامضة إلى تعريف أقرب إلى نقطة بداية MVP.
|
||||
|
||||
### 11.3 في مرحلة Develop، استخدم AI لتوسيع حلول متعددة
|
||||
|
||||
العديد من الأشخاص بمجرد تعريف المشكلة، يركزون فقط على الحل الأول الذي يتبادر إلى الذهن. AI مناسب جدًا في هذه الخطوة لمساعدتك في التوسيع الإجباري:
|
||||
|
||||
```text
|
||||
لقد عرفت المشكلة الأساسية: [تعريف مشكلتك]
|
||||
لا تعطيني إجابة نهائية مباشرة، بل اقترح 2-3 اتجاهات حل من كل من الزوايا التالية:
|
||||
1. MVP الأخف
|
||||
2. الحل الأنسب للتحقق من الطلب
|
||||
3. الحل الأنسب لتحسين التجربة
|
||||
4. حل لا يعتمد على AI
|
||||
5. حل يعتمد على AI
|
||||
أخيرًا قارن مزايا ومخاطر وتكلفة التحقق لكل حل.
|
||||
```
|
||||
|
||||
بهذه الطريقة لن تكون مقيدًا بحل واحد في مرحلة مبكرة جدًا.
|
||||
|
||||
يمكنك كتابة إدخال بسيط:
|
||||
|
||||
```text
|
||||
تعريف مشكلتي الحالي هو:
|
||||
"طالب الجامعة غير متأكد مما إذا كانت سيرته الذاتية يمكن تقديمها، ولذلك يؤخر التقديم دائمًا."
|
||||
|
||||
ساعدني في التفكير في 4 حلول مختلفة، لا تعطيني واحدًا فقط.
|
||||
```
|
||||
|
||||
AI قد يخرج:
|
||||
|
||||
```text
|
||||
الحل 1: قائمة تحقق لقابلية تقديم السيرة الذاتية
|
||||
الحل 2: إعادة كتابة مستهدفة بناءً على وصف الوظيفة
|
||||
الحل 3: تقديم تحذيرات المخاطر بعد أن يحمل المستخدم سيرته الذاتية
|
||||
الحل 4: تقديم مقارنة مع حالات ممتازة لمساعدة المستخدم في تقييم الفجوة
|
||||
```
|
||||
|
||||
هذا يجعل من الأسهل الدخول في "مقارنة الحلول" بدلاً من التركيز فقط على اتجاه إعادة كتابة AI منذ البداية.
|
||||
|
||||
### 11.4 في مرحلة Deliver، استخدم AI لتوليد نصوص النماذج الأولية ومواد الاختبار
|
||||
|
||||
عندما تدخل مرحلة Deliver، AI مناسب جدًا لتسريع هذه الأعمال:
|
||||
|
||||
- توليد نصوص الصفحات في النماذج الأولية منخفضة الدقة
|
||||
- تنظيم سكريبت اختبار المستخدمين
|
||||
- توليد عدة إصدارات قابلة للمقارنة من العناوين والأزرار والتعليمات
|
||||
- تنظيم التغذية الراجعة وقائمة المشاكل بعد الاختبار
|
||||
|
||||
مثلاً، يمكنك جعل AI يساعدك في توليد سكريبت اختبار مستخدمين لمدة 20 دقيقة، أو مساعدتك في تنظيم تغذية 5 مستخدمين راجعة إلى أساس حكم "استمر / عدل الاتجاه / توقف".
|
||||
|
||||
إدخال بسيط يمكن أن يكون:
|
||||
|
||||
```text
|
||||
صنعت نموذجًا أوليًا بسيطًا جدًا:
|
||||
المستخدم يحمل سيرته الذاتية، والنظام يخبره بأي الأماكن لا تزال غير مناسبة للتقديم.
|
||||
|
||||
ساعدني في توليد سكريبت اختبار مستخدمين لمدة 15 دقيقة.
|
||||
```
|
||||
|
||||
AI قد يخرج:
|
||||
|
||||
```text
|
||||
سكريبت اختبار 15 دقيقة:
|
||||
|
||||
1. اطلب من المستخدم أولًا وصف تجربة تقديم السيرة الذاتية الأخيرة
|
||||
2. دع المستخدم يكمل تحميل السيرة الذاتية بشكل مستقل
|
||||
3. راقب ما إذا كان يفهم نتائج التغذية الراجعة
|
||||
4. اسأل: أي من هذه التلميحات كانت الأكثر فائدة، وأيها أربكك
|
||||
5. اسأل: قبل التقديم المرة القادمة، هل تريد استخدامه مرة أخرى
|
||||
```
|
||||
|
||||
هذا النوع من المخرجات عملي جدًا، لأنه يساعدك على الانتقال من "أنهيت النموذج الأولي" إلى "كيف أختبر بعد ذلك".
|
||||
|
||||
### 11.5 دع AI يلعب دور "حارس المرحلة"
|
||||
|
||||
أكثر المشاكل شيوعًا في نموذج الألماس المزدوج هو أن الأشخاص يتخطون المراحل. يمكنك جعل AI مباشرة يعمل كحارس، يذكرك في أي مرحلة أنت بالضبط:
|
||||
|
||||
```text
|
||||
العب دور مدرب عملية المنتج.
|
||||
فيما يلي حالة مشروعي الحالية: [وصفك]
|
||||
احكم على ما إذا كنت أشبه بالوجود في Discover أم Define أم Develop أم Deliver.
|
||||
وأخبرني:
|
||||
1. هل قفزت مبكرًا جدًا إلى المرحلة التالية
|
||||
2. ما هو الإجراء الأكثر أهمية الذي يجب إكماله في المرحلة الحالية
|
||||
3. أي الأشياء يجب ألا أفعلها الآن
|
||||
```
|
||||
|
||||
هذا مفيد جدًا للمبتدئين، لأنك تتسرع بسهولة في "رسم النموذج الأولي قبل أن توضح المشكلة".
|
||||
|
||||
## 📚 الواجبات
|
||||
|
||||
يرجى إكمال الواجبات التالية بناءً على المحتوى أعلاه:
|
||||
|
||||
1. اختر فكرة منتج تريد صنعها مؤخرًا، واكتب مسودتها في أربع خطوات Discover و Define و Develop و Deliver
|
||||
2. في مرحلة Define، أجبر نفسك على تقليص المشكلة إلى جملة واحدة محددة
|
||||
3. في مرحلة Develop، اذكر 3 حلول مختلفة على الأقل، بدلاً من التركيز فقط على أول فكرة تتبادر إلى الذهن
|
||||
4. في مرحلة Deliver، اكتب أصغر نسخة تحقق يمكن تسليمها في غضون أسبوع
|
||||
|
||||
## قراءة إضافية
|
||||
|
||||
هذه المقالة تشير أساسًا إلى المواد الرسمية من Design Council حول Double Diamond، وهي مناسبة للمتابعة والقراءة:
|
||||
|
||||
- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
|
||||
- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
|
||||
- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'من أين تأتي الأفكار: 3 مصادر مرجعية مناسبة جدًا للمبتدئين'
|
||||
description: 'مقالة تمهيدية حول مصادر أفكار المنتجات للقراء بدون خبرة سابقة. تركز على تنظيم المواقع المناسبة لتصفح الأفكار ومصادر الاتجاهات والأعمال الحقيقية وقوائم المستثمرين، لمساعدتك في العثور على اتجاهات أكثر تحديدًا بسرعة.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'حوالي <strong>1.5 ساعة</strong>'
|
||||
</script>
|
||||
|
||||
# من أين تأتي الأفكار: 3 مصادر مرجعية الأكثر ملاءمة للمبتدئين
|
||||
|
||||
<a id="top-idea-sources"></a>
|
||||
|
||||
## دليل هذا الفصل
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['البحث عن أفكار', 'اتجاه المنتج', 'اكتشاف الاحتياجات', 'مراقبة الصناعة']"
|
||||
coreOutput="اتجاه منتج أكثر تحديدًا يستحق المتابعة"
|
||||
expectedOutput="معرفة أين تتصفح وكيف تنظر وما الذي تنظر إليه أولاً، بدلاً من البقاء مع أفكار فارغة مثل 'AI + صناعة معينة'"
|
||||
>
|
||||
|
||||
العديد من الأشخاص يتعثرون في الخطوة الأولى، ليس لأنهم لا يملكون أي إلهام على الإطلاق، بل لأنهم بعد تصفح الكثير من المحتوى، ما يبقى في أذهانهم هم مجرد مصطلحات كبيرة:
|
||||
|
||||
- AI for education
|
||||
- AI for healthcare
|
||||
- AI for finance
|
||||
- AI agent for business
|
||||
|
||||
هذه ليست أفكارًا بعد. إنها فقط تخبرك بأن "الاتجاه كبير"، لكنها لا تخبرك بـ:
|
||||
|
||||
- من يستخدمه
|
||||
- في أي سيناريو يُستخدم
|
||||
- كيف يتعاملون معه حاليًا
|
||||
- أي خطوة تستحق البدء بها أولاً
|
||||
|
||||
هذه المقالة لا تتحدث عن منهجيات فارغة، بل تنظم مباشرة مجموعة من المصادر الأكثر فائدة لك.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info الحد الأدنى من SOP
|
||||
**الهدف**: بعد القراءة، ستتعرف على أين تتصفح عندما لا يكون لديك أفكار، وأي الروابط مناسبة لرؤية "الاحتياجات المحددة"، وأيها مناسب لرؤية "الاتجاهات"، وأيها مناسب لرؤية "الأعمال الحقيقية".
|
||||
|
||||
**خطوات العمل**: تصفح قائمة الأفكار أولاً، ثم انظر إلى المنتجات الصغيرة المربحة، ثم اطلع على الاتجاهات والمصادر الأكثر ارتباطًا بالأعمال، وأخيرًا احتفظ باتجاه واحد أنت مستعد لمواصلته.
|
||||
|
||||
**النتيجة**: ستحصل على اتجاه أكثر تحديدًا يستحق التحقق، بدلاً من التوقف عند المصطلحات الكبيرة.
|
||||
|
||||
**روابط سريعة**: [قائمة التطبيقات المرجعية](#idea-apps) · [مصادر الاتجاهات](#idea-trends) · [مصادر أكثر ارتباطًا بالأعمال](#idea-business) · [مصادر VC / المسرعات](#idea-vc) · [أقصر مسار](#idea-path) · [كيف يساعدك AI](#idea-ai)
|
||||
:::
|
||||
|
||||
## ما ستتعلمه في هذا الفصل
|
||||
|
||||
1. أي المواقع مناسبة لتصفح الأفكار مباشرة
|
||||
2. أي المواقع مناسبة لرؤية المنتجات الصغيرة المربحة بالفعل
|
||||
3. أي المصادر مناسبة لرؤية الاتجاهات والتغيرات في الصناعة
|
||||
4. أي المصادر أقرب إلى الأعمال الحقيقية والمدفوعات الحقيقية
|
||||
5. أقصر مسار استخدام مناسب للمبتدئين تمامًا
|
||||
|
||||
<a id="idea-apps"></a>
|
||||
## [1. قائمة التطبيقات المرجعية: انظر أولاً إلى ما يفعله الآخرون بالفعل](#top-idea-sources)
|
||||
|
||||
هذا هو أكثر نقاط البداية ملاءمة للمبتدئين، لأنه الأكثر تحديدًا.
|
||||
|
||||
### المستوى الأول: افتح وستجد قائمة أفكار، اختر مباشرة
|
||||
|
||||
- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
الغرض الأساسي من هذا الـ subreddit هو: المستخدمون الحقيقيون ينشرون مباشرة "أتمنى لو صنع أحدهم XX". كل منشور عادةً ما يكون طلب منتج محدد، مع بعض وصف السيناريو. بعد الدخول، رتب حسب `Top -> Past Month` أو `Top -> Past Year`، وفي 20 دقيقة يمكنك استعراض مجموعة من الاحتياجات الحقيقية.
|
||||
- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
مشابه لما سبق، لكنه يميل أكثر إلى البرمجيات / التطبيقات. التنسيق الشائع للمنشورات هو "أحتاج تطبيقًا يمكنه عمل XX"، بتفاصيل أكثر دقة، والعديد منها عبارة عن أفكار صغيرة وجميلة.
|
||||
- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
أكثر اكتمالاً من الاثنين السابقين. العديد من المنشورات ليست مجرد طلب من جملة واحدة، بل تتضمن بعض تحليل السوق ونموذج العمل ولماذا يستحق القيام به الآن.
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
ينشر أسبوعيًا أفكار ريادة أعمال غير متحقق منها، وتشمل الحقول الشائعة المستخدم المستهدف وطريقة تحقيق الدخل وأفكار التحقق الأولية. التنسيق موحد ومناسب للاستعراض السريع.
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
يستخدم AI لتوليد أفكار ريادة أعمال، ويمكنك الاستمرار في التصفح. الجودة غير مستقرة، لكنه مناسب جدًا لتحفيز الإلهام عندما "لا تشعر بأي شيء"، ثم النزول بنفسك إلى سيناريوهات أكثر تحديدًا.
|
||||
|
||||
### المستوى الثاني: انظر إلى المنتجات الصغيرة المربحة التي يصنعها الآخرون بالفعل، واستنتج الأفكار بشكل عكسي
|
||||
|
||||
منطق هذا النوع من المنصات هو: الآخرون قد تحققوا بالفعل من الطلب، بل وبدأوا بالفعل في كسب المال. أنت تنظر إليها ليس للنسخ، بل لرؤية "ما هي المشكلة الصغيرة التي يدفع لها الأشخاص بالفعل".
|
||||
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
يجمع العديد من حالات الأعمال الصغيرة الحقيقية، عادةً مع مقابلات مع المؤسسين وبيانات الدخل وعملية البداية. ركز على المنتجات الصغيرة ذات الدخل الشهري من 10 آلاف إلى 100 ألف دولار، فعادةً ما تكون أكثر تخصصًا وأقرب إلى حجم المنتج الذي يمكن للشخص العادي فهمه.
|
||||
- [Indie Hackers — Products](https://www.indiehackers.com/products)
|
||||
المكان الذي يعرض فيه المطورون المستقلون منتجاتهم، والعديد منهم يعلنون عن الدخل والنمو publicly. رتب حسب الدخل، وانظر إلى المنتجات التي تكسب من بضعة آلاف إلى بضعة عشر ألف دولار شهريًا لترى أي مشاكل محددة يحلونها.
|
||||
- [MicroConf Blog](https://microconf.com/blog)
|
||||
يميل أكثر نحو Micro SaaS. مناسب لرؤية "منتجات صغيرة بما يكفي، لكن شخص ما مستعد للدفع مقابلها".
|
||||
- [1000 Tools](https://1000.tools/)
|
||||
موقع تجميع لأدوات AI. مناسب لرؤية أي الفئات قد صنعها شخص ما بالفعل، لكن بشكل متوسط، أو أي الاتجاهات لم يتم تغطيتها جيدًا بعد في السوق المحلي / في صناعة معينة.
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
انظر إلى أنواع المنتجات التي تظهر بشكل متكرر مؤخرًا، لا تركز فقط على المنتج الأول، بل ركز على أي الفئات يستمر الأشخاص في صنعها ولكن لا يوجد فائز واضح بعد.
|
||||
- [BetaList](https://betalist.com/)
|
||||
مناسب لرؤية المنتجات المبكرة والفرق التي لا تزال تجرب الاتجاهات.
|
||||
|
||||
### عند النظر إلى المنتجات، لا تنظر فقط إلى المنتج نفسه، بل انظر أيضًا إلى التقييمات السلبية و"خدمات الوكالة"
|
||||
|
||||
- [G2](https://www.g2.com/)
|
||||
طريقة الاستخدام: انظر إلى التقييمات من نجمة واحدة ونجمتين. في التقييمات السلبية عادةً ما تكون مخفية "أين لم ينجح المنتج الحالي".
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
طريقة الاستخدام: مشابهة لـ G2، مناسبة لرؤية الشكاوى الحقيقية حول منتجات SaaS.
|
||||
- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhubajie
|
||||
طريقة الاستخدام: ابحث عن "وكالة" و"تنظيم بالنيابة" و"إدخال بيانات بالنيابة" و"تفريغ بالنيابة". إذا كانت خدمة يدوية معينة تُباع جيدًا، فعادةً ما يكون هناك عملية قابلة للتكرار وقابلة لتحويلها إلى منتج.
|
||||
|
||||
الحكم على الإشارات بسيط:
|
||||
|
||||
- المستخدمون يشكون بالفعل من الأدوات الحالية
|
||||
- المستخدمون يدفعون بالفعل لشخص آخر للقيام بالأمر بالنيابة عنهم
|
||||
- المستخدمون يستثمرون بالفعل الكثير من الجهد والوقت في هذه العملية
|
||||
|
||||
### المستوى الرابع: شاهد الفيديوهات، فهناك من يساعدك مباشرة في تحليل الأفكار
|
||||
|
||||
إذا كنت لا تحب تصفح المنتديات والقوائم، وتميل أكثر إلى "شخص يساعدني في تحليل الأفكار"، فإن الفيديوهات والبودكاست مناسبة جدًا أيضًا.
|
||||
|
||||
- ابحث عن `Greg Isenberg startup ideas`
|
||||
مناسب لرؤية شخص يحلل مباشرة 2 إلى 3 أفكار محددة، مع الحديث عن حجم السوق وتحليل المنافسة ونقطة الدخول.
|
||||
- ابحث عن `My First Million podcast`
|
||||
المقدمان غالبًا ما يقومان بعصف ذهني لأفكار تجارية طوال الحلقة، بكثافة عالية، وغالبًا ما تظهر أفكار متخصصة محددة جدًا.
|
||||
- ابحث عن `YC startup ideas` أو `Michael Seibel startup ideas`
|
||||
مناسب للمبتدئين، المحتوى مباشر، والعديد يتحدثون مباشرة عن كيفية اختيار الاتجاه.
|
||||
|
||||
<a id="idea-trends"></a>
|
||||
## [2. مصادر الاتجاهات: انظر إلى الاتجاهات التي ترتفع](#top-idea-sources)
|
||||
|
||||
دور مواقع الاتجاهات ليس إعطاءك أفكارًا مباشرة، بل مساعدتك في الحكم: هل الاتجاه معين يرتفع، وهل يستحق المتابعة.
|
||||
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
يتتبع بالبيانات المواضيع وفئات المنتجات التي تنمو بسرعة لكنها لم تدخل بعد الوعي العام. مناسب لرؤية الاتجاهات "التي ترتفع لكنها ليست مزدحمة جدًا بعد".
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
ابحث عن كلمات مفتاحية، وانظر إلى خط الاتجاه خلال العام الماضي، ثم انظر إلى "الاستعلامات ذات الصلة" في قسم "الارتفاع".
|
||||
- [Glimpse](https://meetglimpse.com/)
|
||||
مشابه لـ Google Trends.
|
||||
- صفحات ملخص تقارير الصناعة
|
||||
مناسب عندما يكون لديك اتجاه بالفعل وتريد رؤية موقع هذا الاتجاه في الصناعة بسرعة.
|
||||
- محتوى الاتجاهات من McKinsey / BCG / Gartner
|
||||
يميل أكثر نحو منظور المؤسسات والصناعات الكبيرة، مناسب للجانب B، الصناعات التقليدية.
|
||||
- [State of AI Report](https://www.stateof.ai/)
|
||||
إذا كان اتجاهك مرتبطًا بتقنية AI نفسها، فإن هذا النوع من التقارير السنوية مناسب جدًا لبناء صورة شاملة.
|
||||
|
||||
عند النظر إلى الاتجاهات، ركز فقط على ثلاثة أشياء:
|
||||
|
||||
- هل هذه الكلمة ترتفع باستمرار
|
||||
- في أي سيناريو محدد تقع
|
||||
- من سيكون أول من يدفع وقتًا أو تكلفة تحويل أو ميزانية لها
|
||||
|
||||
<a id="idea-business"></a>
|
||||
## [3. مصادر أكثر ارتباطًا بالأعمال: انظر إلى من ينفق المال ومن يشكو ومن يبيع خدمات يدوية](#top-idea-sources)
|
||||
|
||||
إذا كنت تبحث عن اتجاه "أقرب إلى الأعمال الحقيقية" وليس فقط "يبدو رائعًا"، فعليك النظر في مصادر أقرب إلى سير العمل.
|
||||
|
||||
### انظر إلى من ينفق المال حقيقية على ماذا
|
||||
|
||||
- [موقع المشتريات الحكومية الصيني](https://www.ccgp.gov.cn/)
|
||||
طريقة الاستخدام: ابحث عن كلمات مثل "موقع ذكي" و"نظام إدارة مختبرات" و"جمع بيانات" و"إدارة عيادة" و"نظام تسعير"، وانظر إلى الميزانيات والمتطلبات التقنية وسيناريوهات الاستخدام.
|
||||
- مراكز الموارد العامة للمقاطعات والمدن
|
||||
طريقة الاستخدام: انظر إلى ما تشتريه الحكومات المحلية والشركات المملوكة للدولة بالفعل من أنظمة.
|
||||
- منصات المناقصات المختلفة
|
||||
طريقة الاستخدام: انظر إلى احتياجات الشراء من جانب الشركات وأنواع الأنظمة المتكررة.
|
||||
|
||||
الإشارة القوية من هذه المصادر هي: لا يتعلق الأمر بالحديث عن المستقبل، بل يكشف عن "شخص ما مستعد بالفعل لدفع المال مقابل هذا الأمر اليوم".
|
||||
|
||||
### انظر إلى من يشكو حقيقية من ماذا
|
||||
|
||||
- الصناعة التحويلية: مجتمعات الآلات، منتديات التحكم الصناعي
|
||||
- الطب: Dingxiangyuan، Yimaitong
|
||||
- البناء / الهندسة: Tumugangxian، Glodon Community
|
||||
- المالية / المحاسبة: منتدى China Accounting Vision
|
||||
- التجارة الخارجية: Fubu Foreign Trade Forum، Mike Circle
|
||||
- المطاعم / التجزئة:zhiye canyin wang، Lianshangwang Forum
|
||||
- الأقسام الرأسية على [Reddit](https://www.reddit.com/): `r/smallbusiness`، `r/Entrepreneur`، `r/SaaS`، `r/healthcare`، `r/manufacturing`
|
||||
- [V2EX](https://www.v2ex.com/)
|
||||
- Jike
|
||||
- Xiaohongshu
|
||||
|
||||
عند البحث، لا تبحث فقط عن "AI" و"innovation"، بل الأكثر فعالية هو البحث عن:
|
||||
|
||||
- مزعج جدًا
|
||||
- هل هناك طريقة أفضل
|
||||
- أطلب توصية بأداة
|
||||
- Excel لم يعد يكفي
|
||||
- I wish there was
|
||||
- is there a tool for
|
||||
- I hate
|
||||
|
||||
### انظر إلى من يبيع خدمات يدوية متكررة
|
||||
|
||||
- [Fiverr](https://www.fiverr.com/)
|
||||
- [Upwork](https://www.upwork.com/)
|
||||
- Zhubajie
|
||||
- Taobao
|
||||
- Xianyu
|
||||
|
||||
إذا رأيت هذه الخدمات تُباع جيدًا، فمن الجدير بالمتابعة:
|
||||
|
||||
- نساعدك في تحويل عروض أسعار PDF إلى Excel
|
||||
- نساعدك في تنظيم بيانات العملاء بشكل جماعي
|
||||
- نساعدك في تعديل السيرة الذاتية / تعديل النصوص / التفريغ / الأرشفة
|
||||
|
||||
وراء هذا النوع من الخدمات عادةً ليس احتياجًا لمرة واحدة، بل سير عمل يتكرر.
|
||||
|
||||
### انظر إلى سير العمل الكامل، وليس فقط إلى قائمة الأفكار
|
||||
|
||||
أحيانًا الطريقة الأكثر مباشرة هي اختيار صناعة، ومراجعة العملية بالكامل، والعثور على الخطوات التي لا تزال تعتمد على WeChat و Excel والورق والقلم والهاتف.
|
||||
|
||||
- التجارة الخارجية: البحث عن موردين، الاستفسار عن الأسعار، مقارنة الأسعار، إعداد عروض الأسعار، الإرسال للعملاء، متابعة الردود، ترتيب التفتيش، حجز الشحن، التخليص الجمركي.
|
||||
نقطة الدخول الجديرة بالمشاهدة: تنظيم عروض أسعار الموردين في عروض أسعار للعملاء.
|
||||
- عيادة الأسنان: الاستقبال، التصوير، قراءة الأشعة، التواصل حول الخطة، المتابعة، العلاج، إعادة الكشف.
|
||||
نقطة الدخول الجديرة بالمشاهدة: شرح الخطة للمريض والمتابعة المستمرة.
|
||||
- مواقع البناء: التفتيش، التصوير، الإرسال إلى المجموعة، تنظيم التقرير، التسليم للعميل.
|
||||
نقطة الدخول الجديرة بالمشاهدة: من صور الموقع إلى التقرير المتوافق.
|
||||
|
||||
<a id="idea-vc"></a>
|
||||
## [4. مصادر VC / المسرعات: انظر إلى "أين تتجه الأمواج"](#top-idea-sources)
|
||||
|
||||
هذا النوع من المصادر مناسب لمساعدتك في العثور على الاتجاهات الكبيرة، وليس مناسبًا لاستبدال التحقق مباشرة.
|
||||
|
||||
- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
طريقة الاستخدام: مناسب للعثور على نقاط الدخول، لأنه غالبًا ما يقول مباشرة "نريد أن نرى شخصًا يصنع هذا".
|
||||
- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
طريقة الاستخدام: يميل أكثر نحو الاتجاهات الكبيرة وحكم القطاعات، مناسب لبناء إحساس بالصناعة.
|
||||
- [NFX](https://www.nfx.com/)
|
||||
طريقة الاستخدام: مناسب للاستعراض السريع لمجموعة من مواضيع ريادة الأعمال.
|
||||
- [Sequoia Capital](https://www.sequoiacap.com/article/)
|
||||
طريقة الاستخدام: لا يسرد الأفكار بالضرورة مباشرة، لكنه غالبًا ما يتحدث عن نوع معين من تحولات المنصة والفرص.
|
||||
- [First Round Review](https://review.firstround.com/)
|
||||
طريقة الاستخدام: مناسب للحفر العميق في اتجاه معين، ليس بالضرورة قائمة أفكار، لكن جودة المقالات عادةً عالية جدًا.
|
||||
|
||||
مزايا هذا النوع من المصادر:
|
||||
|
||||
- يمكن أن تخبرك بالاتجاهات المستقبلية التي تستحق المشاهدة
|
||||
- يمكن أن تخبرك أي القطاعات قد تستمر في الدفع
|
||||
- يمكن أن تدخلك بسرعة في سياق قطاع معين
|
||||
|
||||
قيود هذا النوع من المصادر:
|
||||
|
||||
- عادةً من منظور المستثمر
|
||||
- لا تخبرك بالضرورة بأي دور هو الأكثر ألمًا
|
||||
- لا تخبرك بالضرورة بأي خطوة من العملية هي الأكثر إعاقة
|
||||
- لا تخبرك بالضرورة من يدفع المال بالفعل مقابل هذا اليوم
|
||||
|
||||
لذا الطريقة الأفضل للاستخدام هي: استخدمها أولاً للعثور على الاتجاه، ثم عد إلى المنتجات المرجعية ومنتديات الصناعة ومعلومات المشتريات وسير العمل الحقيقية للعثور على نقاط دخول أكثر تحديدًا.
|
||||
|
||||
<a id="idea-path"></a>
|
||||
## [5. أقصر مسار استخدام مناسب لـ "من ليس لديه أفكار ويعرف فقط أنه يريد أن يصنع مساعدًا"](#top-idea-sources)
|
||||
|
||||
إذا كنت تسلك مسارًا واحدًا فقط هو الأقصر، يمكنك القيام بذلك على النحو التالي:
|
||||
|
||||
1. الخطوة الأولى، 30 دقيقة.
|
||||
افتح [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)، رتب حسب `Top -> Past Year`، واستعرض بسرعة 50 منشورًا، واحفظ جميع الاتجاهات التي تشعر أنها "يبدو أنني أستطيع صنعها".
|
||||
2. الخطوة الثانية، 30 دقيقة.
|
||||
افتح [Starter Story](https://www.starterstory.com/) أو [Indie Hackers Products](https://www.indiehackers.com/products)، رتب حسب الدخل، وانظر إلى المنتجات متوسطة الدخل، لا تنظر فقط إلى الأكثر نجاحًا. اعثر على الاتجاهات المرتبطة بالخطوة الأولى، وانظر لمن يبيعون تحديدًا وأي خطوة يحلونها.
|
||||
3. الخطوة الثالثة، 20 دقيقة.
|
||||
اذهب إلى [Google Trends](https://trends.google.com/) وابحث عن الكلمات المفتاحية ذات الصلة، وانظر إلى ما إذا كان الاتجاه ينمو، ثم انظر إلى كلمات "الارتفاع" في "الاستعلامات ذات الصلة".
|
||||
4. الخطوة الرابعة، 20 دقيقة.
|
||||
اذهب إلى G2 / Capterra / منتديات الصناعة / منصات المناقصات / Fiverr والأماكن المشابهة، وانظر إلى أين تكون المشكلة الأكثر إزعاجًا اليوم في هذا الاتجاه، وأين لا يزال الاعتماد على العمل اليدوي.
|
||||
|
||||
بعد الانتهاء، يكفي أن تتمكن من قول الجملة التالية بوضوح:
|
||||
|
||||
- نوع معين من الأشخاص، في سيناريو معين، عالقين في خطوة معينة من العملية، يعتمدون حاليًا بشكل أساسي على طريقة معينة غير فعالة.
|
||||
|
||||
<a id="idea-ai"></a>
|
||||
## [6. كيف يساعدك AI](#top-idea-sources)
|
||||
|
||||
تركيز هذه المقالة ليس على AI، لكن AI مناسب جدًا للتنظيم.
|
||||
|
||||
الاستخدامات الأكثر عملية هي اثنتان فقط:
|
||||
|
||||
- أرسل الروابط وعناوين المنشورات وكلمات المستخدمين الأصلية التي تصفحتها إلى AI، ودعه يساعدك في تصنيفها إلى "مجموعة مستخدمين / سيناريو / نقطة ألم / بديل".
|
||||
- دع AI يساعدك في جمع المعلومات المبعثرة إلى 3 اتجاهات مرشحة، بدلاً من الاستمرار في التوسع في 50 وظيفة.
|
||||
|
||||
يمكنك السؤال مباشرة هكذا:
|
||||
|
||||
```text
|
||||
لقد تصفحت هذه المصادر مؤخرًا:
|
||||
1. [ألصق العنوان أو الكلمات الأصلية]
|
||||
2. [ألصق العنوان أو الكلمات الأصلية]
|
||||
3. [ألصق العنوان أو الكلمات الأصلية]
|
||||
|
||||
لا تعطني قائمة وظائف.
|
||||
قم بثلاثة أشياء فقط:
|
||||
1. صنّف حسب المجموعة المستهدفة والسيناريو
|
||||
2. ابحث عن خطوات المشاكل المتكررة
|
||||
3. ساعدني في تنظيمها في 3 اتجاهات مرشحة أكثر تحديدًا
|
||||
```
|
||||
|
||||
## قراءة إضافية
|
||||
|
||||
- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
- [NFX](https://www.nfx.com/)
|
||||
- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
- [Indie Hackers - Products](https://www.indiehackers.com/products)
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
- [BetaList](https://betalist.com/)
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
- [G2](https://www.g2.com/)
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
@@ -0,0 +1,764 @@
|
||||
---
|
||||
title: 'مرجع لسيناريوهات التطبيق الصناعي لقطاع الأعمال (B2B)'
|
||||
description: 'يلخص هذا المستند تطبيقات النماذج اللغوية الكبيرة (LLM) في سيناريوهات قطاع الأعمال، بما في ذلك التصنيع الصناعي، خدمة العملاء الذكية، قطاع التعليم، البرمجة الذكية، المجال الطبي، الأمن السيبراني، الإدارة المالية، وخدمات المؤسسات، لتوفير مرجع لمطوري تطبيقات الذكاء الاصطناعي الموجهة لعملاء المؤسسات.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'حوالي <strong>6 ساعات</strong>'
|
||||
|
||||
const interestPoint = ref('')
|
||||
const purpose = ref('')
|
||||
|
||||
// مجموعة المواضيع لكل صناعة
|
||||
const topicPool = {
|
||||
'manufacturing': [
|
||||
{ title: 'منصة تصميم مظهر حافلات الطاقة الجديدة بمساعدة الذكاء الاصطناعي', desc: 'تصميم مفاهيم المظهر بناءً على نماذج توليد الصور' },
|
||||
{ title: 'مساعد التصميم والمراجعة الذكي للمخططات', desc: 'بناء قاعدة معرفة لمعايير تصميم المؤسسة باستخدام تقنية RAG' },
|
||||
{ title: 'التوليد والإدارة التلقائية للوثائق الفنية', desc: 'التوليد التلقائي لمواصفات المنتج وأدلة التشغيل بناءً على LLM' },
|
||||
{ title: 'مساعد التوليد التلقائي لتقارير فحص معدات الإنتاج', desc: 'وصف حالة المعدات صوتيًا، وتوليد تقرير فحص منظم' },
|
||||
{ title: 'مساعد أسئلة وأجوبة معرفي لتشخيص أعطال المعدات الصناعية', desc: 'بناء قاعدة معرفة متجهة بناءً على حالات الأعطال التاريخية' }
|
||||
],
|
||||
'customer-service': [
|
||||
{ title: 'نظام الرد التلقائي للخدمة الذكية متعدد القنوات وتوليد أوامر العمل', desc: 'التكامل مع رسائل قنوات متعددة، وفهم النية عبر LLM ثم توليد الردود' },
|
||||
{ title: 'مساعد اكتشاف العملاء المحتملين واقتراحات المتابعة', desc: 'تحليل سجلات المحادثات التاريخية لتحديد العملاء ذوي النية العالية' },
|
||||
{ title: 'البحث الذكي عن المعرفة الداخلية للمؤسسة ومساعد الأسئلة والأجوبة', desc: 'بناء قاعدة معرفة متجهة بناءً على الوثائق الداخلية' },
|
||||
{ title: 'أداة التلخيص الذكي لمحادثات خدمة العملاء وتوليد أوامر العمل', desc: 'التوليد التلقائي لملخصات المحادثات واستخراج المعلومات الرئيسية' },
|
||||
{ title: 'نظام قاعدة معرفة توصية أفضل النصوص لخدمة العملاء', desc: 'تحليل الحالات المتميزة واستخلاص قوالب أفضل النصوص' }
|
||||
],
|
||||
'education': [
|
||||
{ title: 'نظام تخطيط مسار تعلم اللغات المخصص والتوجيه الذكي', desc: 'تقييم مستوى المتعلم وتخطيط المهام اليومية' },
|
||||
{ title: 'منصة الكتابة الآلية للخطط الدراسية وعرض الموارد التعليمية', desc: 'توليد إطار الخطة الدراسية بناءً على المنهج الدراسي' },
|
||||
{ title: 'نظام التصحيح الآلي للواجبات وتحليل تشخيص حالة التعلم', desc: 'التصحيح التلقائي للأسئلة الذاتية وتوليد اقتراحات التصحيح' },
|
||||
{ title: 'بناء نموذج كفاءة المواهب للوظائف وخريطة التعلم', desc: 'تحليل وصف الوظيفة (JD) لاستخلاص متطلبات القدرات' },
|
||||
{ title: 'تدريب عملي محاكاة لمحادثة اللغة الأجنبية الفردية', desc: 'يقوم LLM بلعب أدوار مختلفة لإجراء محادثات لفظية' }
|
||||
],
|
||||
'programming': [
|
||||
{ title: 'مساعد الإكمال التلقائي للكود وإصلاح الأخطاء (Bugs) الذكي', desc: 'مكون IDE الإضافي يوفر اقتراحات إكمال الكود في الوقت الفعلي' },
|
||||
{ title: 'منصة بناء التطبيقات منخفضة الكود (Low-code) وأتمتة العمليات', desc: 'وصف المتطلبات بلغة طبيعية وتحويلها إلى تكوينات منخفضة الكود' },
|
||||
{ title: 'نظام توليد حالات اختبار الوحدة', desc: 'تحليل الشفرة المصدرية عبر AST وتوليد حالات اختبار للشروط الحدية' },
|
||||
{ title: 'أداة التحليل الذكي للكود والترحيل بين لغات البرمجة', desc: 'تحليل جودة الكود وتقديم اقتراحات التحسين' },
|
||||
{ title: 'أداة التوليد التلقائي لكود واجهة المستخدم الأمامية (UI)', desc: 'التعرف على صور التصميم وتوليد CSS متجاوب' }
|
||||
],
|
||||
'healthcare': [
|
||||
{ title: 'مساعد التفسير الذكي لتقارير الفحوصات الطبية', desc: 'التعرف على المؤشرات الرئيسية عبر OCR وتفسير القيم غير الطبيعية' },
|
||||
{ title: 'خبير استشارات صحية يعتمد على تقنية استرجاع المعرفة', desc: 'بناء رسم بياني للمعرفة الطبية، واسترجاع وتوليد الإجابات عبر RAG' },
|
||||
{ title: 'منصة تحليل قرارات بيانات الأبحاث السريرية', desc: 'دمج بيانات EMR والمساعدة في توليد شفرات التحليل الإحصائي' },
|
||||
{ title: 'أداة التوليد التلقائي لتقارير التصوير الطبي', desc: 'وصف خصائص الصورة والتوليد التلقائي لتقرير منظم' },
|
||||
{ title: 'مساعد ذكي لتذكير إدارة الأدوية للأمراض المزمنة', desc: 'توليد تذكيرات أدوية مخصصة ودعم فحص موانع استعمال الأدوية' }
|
||||
],
|
||||
'security': [
|
||||
{ title: 'محرك اكتشاف وإصلاح الثغرات الأمنية في الكود', desc: 'فحص الكود عبر SAST وتحليل مبادئ الثغرات' },
|
||||
{ title: 'نظام التعرف والاعتراض الذكي لرسائل التصيد الاحتيالي المولدة عبر الذكاء الاصطناعي', desc: 'تحليل محتوى البريد الإلكتروني للتعرف على رسائل التصيد المولدة عبر AI' },
|
||||
{ title: 'مساعد التوليد التلقائي للتقارير اليومية للعمليات الأمنية', desc: 'تجميع السجلات والاستخراج التلقائي للأحداث الرئيسية' },
|
||||
{ title: 'مساعد التوليد الذكي لتقارير اختبار الاختراق', desc: 'التوليد التلقائي للتقارير بناءً على وصف الثغرات' },
|
||||
{ title: 'مساعد الاستعلام والتحليل الذكي لمعلومات التهديدات', desc: 'التكامل مع مصادر متعددة لمعلومات التهديدات وتفسير محتواها' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'مساعد التوليد الذكي لتقارير العناية الواجبة للائتمان', desc: 'إدخال البيانات المالية والتوليد التلقائي لتقارير العناية الواجبة للائتمان' },
|
||||
{ title: 'مستشار ذكي لإدارة الثروات في البنوك الخاصة', desc: 'تحليل ملف تعريف مخاطر العميل وتوليد توصيات تخصيص الأصول' },
|
||||
{ title: 'مساعد التوليد الذكي والتحقق من الامتثال لنشرات الاكتتاب العام (IPO)', desc: 'قوالب معيارية والتعبئة التلقائية لوصف الأعمال' },
|
||||
{ title: 'نظام التوليد التلقائي للتقارير المالية للمؤسسات والإنذار المبكر للشذوذ التشغيلي', desc: 'التوليد التلقائي للتحليل المالي ومناقشة الإدارة' },
|
||||
{ title: 'تدريب على النصوص الذكي لوكلاء التأمين', desc: 'محاكاة المحادثات وتقييم امتثال النصوص وقوة الإقناع' }
|
||||
],
|
||||
'enterprise': [
|
||||
{ title: 'منصة مراجعة الامتثال واقتراحات التعديل لدورة حياة عقود المؤسسات بالكامل', desc: 'مقارنة البنود مع قاعدة القوانين وتوليد تقرير مراجعة الامتثال' },
|
||||
{ title: 'تفريغ صوتي لمحادثات المبيعات وتوصية بالنصوص', desc: 'تفريغ عبر ASR وتحليل المحادثة وتوصية بأفضل النصوص' },
|
||||
{ title: 'نظام التوليد الذكي والتصميم للمحتوى التسويقي', desc: 'توليد النصوص التسويقية واستخلاص نقاط البيع' },
|
||||
{ title: 'منصة تحليل إعلانات المنافسين', desc: 'جمع إعلانات المنافسين وتحليل استراتيجيات الإعلان' },
|
||||
{ title: 'نظام التحليل الذكي لاختيار المواضيع الرائجة على الإنترنت وتوصية المحتوى', desc: 'تحليل اتجاهات المواضيع الرائجة والتوصية بزوايا المواضيع' }
|
||||
],
|
||||
'content': [
|
||||
{ title: 'منصة مساعدة إنشاء محتوى الأفلام والروايات', desc: 'توفير مخططات القصة، وتصميم الشخصيات، وتوليد الحوار' },
|
||||
{ title: 'مساعد الكتابة الذكية لقصص العلامة التجارية للمؤسسات والمقالات الدعائية', desc: 'إدخال كلمات مفتاحية للعلامة التجارية وتوليد نصوص بأساليب متعددة' },
|
||||
{ title: 'نظام إدارة تفاعل البث المباشر للشخصيات الرقمية الافتراضية والدفع', desc: 'صورة الشخصية الرقمية + صوت TTS + محادثة LLM' },
|
||||
{ title: 'توليد نصوص الفيديو القصير والمونتاج الذكي', desc: 'توليد نصوص الفيديو القصير واللوحات القصصية' },
|
||||
{ title: 'نظام التوليد الذكي والتصميم للمحتوى التسويقي', desc: 'توليد النصوص التسويقية واستخلاص نقاط البيع' }
|
||||
],
|
||||
'government': [
|
||||
{ title: 'نظام التوجيه الصوتي الذكي والتوزيع التلقائي للخط الساخن الحكومي 12345', desc: 'التعرف على الصوت، وفهم الطلبات والتوزيع الذكي' },
|
||||
{ title: 'روبوت التوجيه الذكي والأسئلة والأجوبة حول السياسات لقاعات الخدمات الحكومية', desc: 'استرجاع RAG لقاعدة المعرفة الحكومية' },
|
||||
{ title: 'منصة المطابقة الذكية والدفع الدقيق للسياسات الداعمة للمؤسسات', desc: 'ملف تعريف المؤسسة يطابق تلقائيًا السياسات المعمول بها' },
|
||||
{ title: 'مساعد المراجعة المسبقة الذكية والتحقق من الامتثال لمواد الموافقات الإدارية', desc: 'التعرف عبر OCR واستخراج المعلومات الرئيسية' },
|
||||
{ title: 'منصة ذكية لإدارة وتحديد أحداث الشبكة الحضرية', desc: 'تحديد أنواع الأحداث وتوزيعها' }
|
||||
],
|
||||
'legal': [
|
||||
{ title: 'وكيل للكشف بنقرة واحدة عن ثغرات ومخاطر العقود', desc: 'مطابقة قائمة المخاطر لتحديد المشاكل المحتملة' },
|
||||
{ title: 'مستشار تقييم ذكي بنسبة فوز القضايا المماثلة باستخدام AI', desc: 'استخراج سمات القضية، مطابقة واسترجاع القضايا المماثلة' },
|
||||
{ title: 'رادار للرصد الآني لتغييرات القوانين واللوائح وتحليل تأثيرها على الأعمال', desc: 'تحليل محتوى التغييرات وتقييم تأثيرها على الأعمال' },
|
||||
{ title: 'أداة صياغة تلقائية لخطابات المحامين باستخدام AIGC', desc: 'إدخال وقائع الحقائق، توليد خطابات محاماة معيارية' },
|
||||
{ title: 'إضافة لـ "ترجمة" البنود القانونية المعقدة إلى لغة مبسطة', desc: 'توليد تفسيرات سهلة الفهم' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'مولّد خطط سفر للمسافر الكسول باستخدام AIGC', desc: 'توليد جدول الرحلة اليومية' },
|
||||
{ title: 'روبوت للتنبؤ باتجاه أسعار تذاكر الطيران والفنادق عبر الإنترنت وقفل الأسعار المنخفضة تلقائيًا', desc: 'نماذج ML للتنبؤ باتجاهات الأسعار' },
|
||||
{ title: 'نظام فحص مسبق ذكي لمستندات التأشيرة ومساعد آلي لتعبئة النماذج', desc: 'التحقق من اكتمال المعلومات عبر التعرف البصري على الحروف OCR' },
|
||||
{ title: 'مترجم صوتي آني للسفر الخارجي ومدير تعريب القوائم بصريًا', desc: 'ترجمة صوتية بدون اتصال، OCR لصور القوائم' },
|
||||
{ title: 'مساعد لتوليد يوميات سفر جميلة ونصوص لمنصات التواصل الاجتماعي تلقائيًا من مسارات الرحلة', desc: 'استخراج معلومات الصور، توليد نصوص اليوميات' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'رفيق افتراضي لمرافقة عميقة على مدار 24 ساعة باستخدام النماذج اللغوية الكبيرة LLM', desc: 'نظام ذاكرة لتخزين سجل المحادثات' },
|
||||
{ title: 'مستشار AI للتعرف على المشاعر متعددة الوسائط والتوجيه النفسي', desc: 'تحليل نبرة الصوت + التعرف على مشاعر النص' },
|
||||
{ title: 'إنسان رقمي للتدريب الإدراكي واسترجاع الذاكرة لكبار السن المصابين بمرض آلزهايمر باستخدام AI', desc: 'تدريب عبر ألعاب إدراكية، تحفيز الذاكرة بالصور القديمة' },
|
||||
{ title: 'مدرب محاكاة تواصل اجتماعي باستخدام AIGC للأشخاص ذوي القلق الاجتماعي', desc: 'محاكاة مشاهد تواصل اجتماعي افتراضية' },
|
||||
{ title: 'مساعد مراقبة مزاج على مدار الساعة وتحفيز المشاعر الإيجابية باستخدام AI', desc: 'تحليل اتجاهات المزاج وتوليد محتوى تحفيزي' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'محرك قرارات مستقلة لـ NPC في ألعاب العالم المفتوح مدعوم بـ LLM', desc: 'دمج شجرة سلوك NPC مع قرارات LLM' },
|
||||
{ title: 'أداة استنتاج قصص ألعاب أدوار الغمر باستخدام AIGC ومساعد التحكم في سير اللعبة لـ DM', desc: 'اختيارات اللاعب تؤدي إلى تفرعات في القصة' },
|
||||
{ title: 'معدّل توليدي لنهايات الروايات التفاعلية', desc: 'اختيارات القارئ تؤثر على مسار القصة' },
|
||||
{ title: 'تحليل بصري CV لمعارك الرياضات الإلكترونية ومعلق ذكي AI', desc: 'تحليل الآني للشاشة أثناء اللعب' },
|
||||
{ title: 'نظام توليد تلقائي للكتب الصوتية عبر تركيب الكلام TTS متعدد الأدوار', desc: 'توزيع أدوار النص، توليد نبرات صوت مخصصة' }
|
||||
],
|
||||
'ecommerce': [
|
||||
{ title: 'أداة إنتاج دفعة واحدة لصفحات تفاصيل المنتجات بمعدل تحويل عالٍ باستخدام AIGC', desc: 'توليد نصوص نقاط البيع وأوصاف المشاهد' },
|
||||
{ title: 'مصنع لتوليد فيديوهات العرض والتجربة الافتراضية للملابس على موديلات باستخدام AI', desc: 'توليد تأثيرات ارتداء الموديلات الافتراضية' },
|
||||
{ title: 'مساعد ترجمة وتلميع محلي بلغات متعددة للتجارة الإلكترونية عبر الحدود باستخدام LLM', desc: 'ترجمة وصف المنتج بلغات متعددة' },
|
||||
{ title: 'نظام بث مباشر لبيع المنتجات عبر إنسان رقمي باستخدام AIGC على مدار 24 ساعة', desc: 'صورة إنسان رقمي + توليد الآني للنصوص الترويجية' },
|
||||
{ title: 'محرك رؤى لاتجاهات السوق المستوحاة من AI والتنبؤ بالمنتجات الأكثر مبيعاً', desc: 'رؤى نقاط الاتجاه، اقتراحات اختيار المنتجات' }
|
||||
],
|
||||
'energy': [
|
||||
{ title: 'مستشار تحليل سلوك استهلاك الكهرباء المنزلية باستخدام AI واستراتيجيات توفير الطاقة', desc: 'تحليل أنماط استهلاك الكهرباء، توليد اقتراحات توفير الطاقة' },
|
||||
{ title: 'نظام التعرف البصري CV للطائرات بدون طيار للكشف عن عيوب الوحدات الكهروضوئية', desc: 'تصوير تفتيش الطائرات بدون طيار، تحليل الصور بالأشعة تحت الحمراء الحرارية' },
|
||||
{ title: 'وكيل استراتيجية التنبؤ باتجاه أسعار تداول الكهرباء الفوري وتحقيق الربح الآلي باستخدام AI', desc: 'نموذج التنبؤ بالأسعار، توليد الاستراتيجيات' },
|
||||
{ title: 'مساعد الحساب الآلي لانبعاثات الكربون على طول سلسلة القيمة للمؤسسات وتوليد تقارير ESG', desc: 'حساب معامل انبعاثات الكربون، توليد تقارير ESG' },
|
||||
{ title: 'نظام التنبؤ بحمل الكهرباء في الطقس القاسي والقيادة بجدولة الطوارئ باستخدام AI', desc: 'نموذج التنبؤ بالحمل، توليد استراتيجيات الجدولة' }
|
||||
],
|
||||
'av-media': [
|
||||
{ title: 'أداة التعرف على المقاطع المثيرة في الفيديوهات الطويلة والمونتاج الآلي للفيديوهات القصيرة باستخدام AI', desc: 'تحليل محتوى الفيديو، التعرف على الإطارات الرئيسية' },
|
||||
{ title: 'مساعد الفصل الذكي لضوضاء الخلفية في الفيديو وتحسين الصوت البشري باستخدام AI', desc: 'نموذج فصل الصوت، إزالة ضوضاء الخلفية' },
|
||||
{ title: 'محطة عمل لاستعادة الصور القديمة بدقة 4K فائقة والتلوين الذكي باستخدام AI', desc: 'نموذج الدقة الفائقة للفيديو، تلوين آلي عبر AI' },
|
||||
{ title: 'نظام تحويل النص إلى تعليق صوتي بمستوى بشري عبر TTS والتحكم في المشاعر', desc: 'نماذج TTS متعددة النبرات، التحكم في المشاعر' },
|
||||
{ title: 'مساعد النسخ الذكي لتسجيلات الاجتماعات واستخراج المهام الأساسية باستخدام AI', desc: 'فصل وتحويل الصوت في الاجتماعات متعددة المشاركين' }
|
||||
],
|
||||
'ai-marketing': [
|
||||
{ title: 'محرك كتابة تلقائية لنصوص المنشورات الرائجة على شياوهونغشو (RED) باستخدام AIGC', desc: 'توليد نصوص ترويجية، تحسين الرموز التعبيرية' },
|
||||
{ title: 'أداة التنضيد الذكي لملصقات التسويق والتكيف مع أحجام متعددة باستخدام AI', desc: 'المطابقة الذكية لقوالب الملصقات' },
|
||||
{ title: 'منصة توليد إبداعي لشعارات العلامات التجارية AIGC وبناء نظام الهوية البصرية VI', desc: 'توليد إبداعي للشعار، توليد معايير VI' },
|
||||
{ title: 'مساعد تتبع الاتجاهات السائدة عبر الإنترنت وتوليد أفكار التسويق الاستغلالية باستخدام AI', desc: 'تحليل زوايا التسويق، توليد خطط إبداعية' },
|
||||
{ title: 'مساعد توليد إبداعي لنصوص الفيديوهات القصيرة وإرشادات القصص المصورة باستخدام AIGC', desc: 'توليد النصوص والقصص المصورة، اقتراحات التصوير' }
|
||||
],
|
||||
'data-intelligence': [
|
||||
{ title: 'أداة توليد تلقائي لعبارات SQL من اللغة الطبيعية', desc: 'تحويل استعلامات اللغة الطبيعية إلى SQL' },
|
||||
{ title: 'نظام جرد وتصنيف ذكي لكتالوج أصول البيانات المؤسسية', desc: 'جمع البيانات الوصفية، تصنيف تلقائي' },
|
||||
{ title: 'محرك الكشف الآلي عن الحالات الشاذة لجودة البيانات واقتراحات الإصلاح', desc: 'محرك القواعد + نماذج ML للكشف عن الحالات الشاذة' },
|
||||
{ title: 'مساعد توليد التقارير الذكية وتكوين التصورات', desc: 'تكوين التقارير عبر المحادثات' },
|
||||
{ title: 'مساعد الإجابة على الأسئلة الذكي حول تعريفات المقاييس', desc: 'بناء قاعدة معرفية بناءً على مستندات تعريف المقاييس' }
|
||||
]
|
||||
}
|
||||
|
||||
// جدول تعيين مسارات التوصيات المحددة مسبقاً
|
||||
const recommendationMap = {
|
||||
// نقطة الاهتمام: المحتوى الإبداعي
|
||||
'creative-content': {
|
||||
'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
|
||||
'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
|
||||
'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
|
||||
'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
|
||||
},
|
||||
// نقطة الاهتمام: الخدمات التقنية
|
||||
'tech-service': {
|
||||
'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
|
||||
'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
|
||||
'improve-experience': ['customer-service', 'enterprise', 'programming'],
|
||||
'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
|
||||
},
|
||||
// نقطة الاهتمام: الذكاء البياني
|
||||
'data-intel': {
|
||||
'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
|
||||
'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
|
||||
'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
|
||||
'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
|
||||
},
|
||||
// نقطة الاهتمام: خدمة المستخدمين
|
||||
'user-service': {
|
||||
'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
|
||||
'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
|
||||
'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
|
||||
'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
|
||||
},
|
||||
// نقطة الاهتمام: حلول الصناعة
|
||||
'industry-solution': {
|
||||
'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
|
||||
'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
|
||||
'improve-experience': ['healthcare', 'education', 'government', 'travel'],
|
||||
'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
|
||||
}
|
||||
}
|
||||
|
||||
const interestOptions = [
|
||||
{ label: 'إنشاء محتوى إبداعي', value: 'creative-content', desc: 'محتوى إبداعي مثل النصوص والصور والفيديو' },
|
||||
{ label: 'أدوات الخدمة التقنية', value: 'tech-service', desc: 'أدوات التطوير والأتمتة والمساعدة في البرمجة' },
|
||||
{ label: 'تحليل البيانات الذكي', value: 'data-intel', desc: 'تحليل البيانات والتنبؤ واتخاذ القرارات الذكية' },
|
||||
{ label: 'تجربة خدمة المستخدمين', value: 'user-service', desc: 'خدمة العملاء والتسويق وتجربة المستخدم' },
|
||||
{ label: 'حلول الصناعة', value: 'industry-solution', desc: 'تطبيقات متعمقة لصناعات محددة' }
|
||||
]
|
||||
|
||||
const purposeOptions = [
|
||||
{ label: 'رفع الكفاءة', value: 'increase-efficiency', desc: 'الأتمتة وتسريع العمليات' },
|
||||
{ label: 'خفض التكاليف', value: 'reduce-cost', desc: 'تقليل العمالة وتحسين الموارد' },
|
||||
{ label: 'تحسين التجربة', value: 'improve-experience', desc: 'رضا المستخدمين وجودة الخدمة' },
|
||||
{ label: 'ابتكار الأعمال', value: 'innovate-business', desc: 'منتجات ونماذج جديدة' }
|
||||
]
|
||||
|
||||
const industries = [
|
||||
{ key: 'manufacturing', name: 'الصناعة التحويلية', anchor: '#_1-الصناعة-التحويلية' },
|
||||
{ key: 'customer-service', name: 'خدمة العملاء الذكية', anchor: '#_2-خدمة-العملاء-الذكية' },
|
||||
{ key: 'education', name: 'قطاع التعليم', anchor: '#_3-قطاع-التعليم' },
|
||||
{ key: 'programming', name: 'البرمجة الذكية', anchor: '#_4-البرمجة-الذكية' },
|
||||
{ key: 'healthcare', name: 'القطاع الطبي', anchor: '#_5-القطاع-الطبي' },
|
||||
{ key: 'security', name: 'الأمن السيبراني', anchor: '#_6-الأمن-السيبراني' },
|
||||
{ key: 'finance', name: 'الإدارة المالية والتأمين والقطاع المصرفي', anchor: '#_7-الإدارة-المالية-والتأمين-والقطاع-المصرفي' },
|
||||
{ key: 'enterprise', name: 'خدمات المؤسسات', anchor: '#_8-خدمات-المؤسسات' },
|
||||
{ key: 'content', name: 'إنتاج المحتوى والتشغيل', anchor: '#_9-إنتاج-المحتوى-والتشغيل' },
|
||||
{ key: 'government', name: 'الإدارة الحكومية الذكية', anchor: '#_10-الإدارة-الحكومية-الذكية' },
|
||||
{ key: 'legal', name: 'الشؤون القانونية وإدارة العقود', anchor: '#_11-الشؤون-القانونية-وإدارة-العقود' },
|
||||
{ key: 'travel', name: 'خدمات السفر والتنقل', anchor: '#_12-خدمات-السفر-والتنقل' },
|
||||
{ key: 'emotion', name: 'الرفقة العاطفية', anchor: '#_13-الرفقة-العاطفية' },
|
||||
{ key: 'entertainment', name: 'الترفيه والتسلية', anchor: '#_14-الترفيه-والتسلية' },
|
||||
{ key: 'ecommerce', name: 'خدمات التجارة الإلكترونية', anchor: '#_15-خدمات-التجارة-الإلكترونية' },
|
||||
{ key: 'energy', name: 'الطاقة', anchor: '#_16-الطاقة' },
|
||||
{ key: 'av-media', name: 'الصوت والفيديو', anchor: '#_17-الصوت-والفيديو' },
|
||||
{ key: 'ai-marketing', name: 'تسويق الذكاء الاصطناعي', anchor: '#_18-تسويق-الذكاء-الاصطناعي' },
|
||||
{ key: 'data-intelligence', name: 'ذكاء البيانات', anchor: '#_19-ذكاء-البيانات' }
|
||||
]
|
||||
|
||||
// حساب نتائج التوصية - سحب عشوائي من مجموعة المواضيع
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!interestPoint.value || !purpose.value) return []
|
||||
|
||||
const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
|
||||
const topics = []
|
||||
|
||||
// استخراج عشوائي لـ 1-2 موضوع من كل صناعة موصى بها
|
||||
keys.forEach(key => {
|
||||
const industry = industries.find(item => item.key === key)
|
||||
const industryTopics = topicPool[key] || []
|
||||
|
||||
if (industry && industryTopics.length > 0) {
|
||||
// استخراج عشوائي لـ 1-2 موضوع
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
industryKey: key,
|
||||
industryName: industry.name,
|
||||
industryAnchor: industry.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// فرز عشوائي وتقييد العدد الإجمالي
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// الحصول على وصف الاختيار الحالي
|
||||
const currentSelection = computed(() => {
|
||||
const interest = interestOptions.find(i => i.value === interestPoint.value)
|
||||
const pur = purposeOptions.find(p => p.value === purpose.value)
|
||||
return {
|
||||
interest: interest?.label || '',
|
||||
purpose: pur?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// تأخير التمرير لضمان اكتمال تحديث DOM
|
||||
setTimeout(() => {
|
||||
// محاولة البحث عبر ID (يدعم تنسيقات متعددة)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// إذا لم يتم العثور عليه، جرب تنسيقات ID محتملة أخرى
|
||||
if (!element) {
|
||||
// محاولة إزالة بادئة الشرطة السفلية
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// إذا لم يتم العثور عليه بعد، ابحث عبر نص العنوان
|
||||
if (!element) {
|
||||
// استخراج اسم الصناعة من نقطة الارتساء
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// مطابقة تامة أو مطابقة جزئية
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// تمييز الفقرة المستهدفة
|
||||
element.style.backgroundColor = '#f0f9ff'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
interestPoint.value = ''
|
||||
purpose.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# مرجع لاتجاهات سيناريوهات التطبيق الصناعي للجانب B
|
||||
|
||||
## مقدمة الفصل
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['تطبيقات الجانب B', 'التطبيقات الصناعية', 'سيناريوهات AI', 'مرجع التطبيق', 'حلول الصناعة']" coreOutput="التعرف على 15+ سيناريو تطبيق صناعي للجانب B" expectedOutput="العثور على اتجاه المشروع المناسب لعملاء المؤسسات">
|
||||
|
||||
يُلخص هذا المستند <strong>التطبيقات العملية لنماذج LLM الكبيرة في سيناريوهات مؤسسات الجانب B</strong>. على عكس الجانب C الذي يركز على تجربة المستخدم والمشاعر، تركز منتجات الجانب B بشكل أكبر على <strong>حل احتياجات العمل الفعلية، وتحسين الكفاءة، وتقليل التكاليف</strong>. يتمتع كل سيناريو <strong>بجدوى التطبيق العملي</strong>، ويغطي المنهجية الكاملة من <strong>تحليل المتطلبات إلى التنفيذ التقني</strong>، وهو مناسب كمرجع لمطوري تطبيقات AI الموجهة لعملاء المؤسسات.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## الاختيار السريع لاتجاه الصناعة
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">ابحث عن سيناريو التطبيق المناسب لك</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
اختر اهتمامك والهدف الذي تريد تحقيقه، وسيقوم النظام بتوصية سيناريوهات الصناعة ذات الصلة، انقر على العلامة للانتقال إلى القسم المقابل.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="interestPoint" placeholder="اختر اهتمامك" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in interestOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="purpose" placeholder="اختر غرض التنفيذ" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in purposeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- عرض نتائج التوصية - تنسيق الجدول -->
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
|
||||
نوصي لك بـ {{ recommendationTopics.length }} سيناريو تطبيق
|
||||
<span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
|
||||
({{ currentSelection.interest }} + {{ currentSelection.purpose }})
|
||||
</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="recommendationTopics"
|
||||
style="width: 100%; cursor: pointer;"
|
||||
@row-click="(row) => scrollToAnchor(row.industryAnchor)"
|
||||
highlight-current-row>
|
||||
<el-table-column prop="title" label="سيناريو التطبيق" min-width="300">
|
||||
<template #default="scope">
|
||||
<div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="industryName" label="الصناعة التابعة" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px; font-size: 12px; color: #909399;">
|
||||
💡 انقر على أي صف في الجدول للانتقال إلى قسم الصناعة المقابل
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- مطالبة عند عدم الاختيار بالكامل -->
|
||||
<div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
|
||||
<span v-if="!interestPoint && !purpose">💡 يرجى اختيار اهتمامك والغرض من التنفيذ</span>
|
||||
<span v-else-if="!interestPoint">💡 يرجى اختيار اهتمامك</span>
|
||||
<span v-else>💡 يرجى اختيار غرض التنفيذ</span>
|
||||
</div>
|
||||
|
||||
<!-- زر إعادة التعيين -->
|
||||
<div v-if="interestPoint || purpose" style="margin-top: 12px;">
|
||||
<el-button size="small" @click="resetSelection">إعادة الاختيار</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## مقدمة سريعة عن الصناعات
|
||||
|
||||
### الاختيار التقني السائد
|
||||
|
||||
في تطوير تطبيقات الذكاء الاصطناعي، تشمل الاتجاهات التقنية الشائعة:
|
||||
|
||||
1. **LLM (النموذج اللغوي الكبير)**: بارع في معالجة مهام اللغة الطبيعية، مثل الحوار، وإنشاء النصوص، والتلخيص، والترجمة، وغيرها، ومناسب لبناء تطبيقات خدمة العملاء الذكية، وإنشاء المحتوى، والمعرفة والأسئلة والأجوبة.
|
||||
2. **VLM (نموذج اللغة المرئية)**: يجمع بين الفهم البصري وقدرات اللغة، ويمكنه تحقيق وصف الصور، والإجابة على الأسئلة المرئية، وإنشاء المحتوى متعدد الوسائط، وغيرها من الوظائف، وهو مناسب لسيناريوهات مثل تحليل الصور الطبية، وفحص الجودة الصناعية، والتصميم الإبداعي.
|
||||
3. **GenAI (الذكاء الاصطناعي التوليدي)**: يشمل إنشاء النصوص، وإنشاء الصور (مثل Stable Diffusion، DALL·E)، وإنشاء الفيديو وغيرها من التقنيات، ويمكنه إنشاء محتوى إبداعي بسرعة، وهو مناسب لمجالات مثل التصميم المساعد، وإنتاج مواد التسويق، والتعليم والتدريب.
|
||||
|
||||
### استراتيجية الاختيار
|
||||
|
||||
يمكن للمتعلمين اختيار اتجاه التطبيق المناسب لهم بناءً على الأبعاد التالية:
|
||||
|
||||
1. **التوجه بالاهتمام**: إعطاء الأولوية للصناعة أو الاتجاه التقني الذي يهمك، للحفاظ على الدافع للتعلم. على سبيل المثال:
|
||||
- مهتم بالتصميم الإبداعي: يمكنك تجربة تطبيقات إنتاج المحتوى والتصميم الصناعي
|
||||
- مهتم بالتحديات التقنية: يمكنك تجربة تطبيقات الأمن السيبراني والاتجاه الطبي
|
||||
- مهتم بالقيمة الاجتماعية: يمكنك تجربة تطبيقات الحكومة الذكية وصناعة التعليم
|
||||
|
||||
2. **التكيف مع الصناعة**: اختيار السيناريوهات بناءً على خلفيتك الصناعية أو مزايا الموارد:
|
||||
- العاملون في الصناعة التحويلية: يمكن إعطاء الأولوية لتطبيقات التصنيع الصناعي وخدمات المؤسسات
|
||||
- العاملون في التعليم: يمكن التركيز أولاً على تطبيقات صناعة التعليم وإنتاج المحتوى
|
||||
- العاملون في المجال الطبي: يمكن استكشاف التطبيقات الطبية وإدارة الصحة
|
||||
|
||||
3. **الصعوبة التقنية**: اختيار مستوى التعقيد المناسب بناءً على أساسك التقني:
|
||||
- مستوى المبتدئين: خدمة العملاء الذكية، إنشاء المحتوى، أنظمة الأسئلة والأجوبة البسيطة
|
||||
- المستوى المتوسط: فحص الجودة الصناعية، تحليل الصور الطبية، مساعد الكود الذكي
|
||||
- المستوى الاحترافي: التحكم في المخاطر المالية، الأمن السيبراني، التطبيقات المعقدة متعددة الوسائط
|
||||
|
||||
## 1. الصناعة التحويلية
|
||||
|
||||
تدور سيناريوهات الصناعة التحويلية بشكل أساسي حول ثلاثة اتجاهات رئيسية: التصميم المساعد، وتحسين الإنتاج، والصيانة الذكية. تشمل التطبيقات الشائعة استخدام الذكاء الاصطناعي للمساعدة في تصميم مظهر المنتج، والمراجعة الآلية للمخططات، والإنشاء الذكي للوثائق التقنية، وتشخيص أعطال المعدات الصناعية، مما يمكن أن يحسن بشكل كبير من كفاءة التصميم ويقلل من تكاليف الصيانة.
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| 1 | منصة التصميم المساعد بالذكاء الاصطناعي لمظهر حافلات الطاقة الجديدة | تصميم مفاهيم المظهر بناءً على نماذج توليد الصور، مع دمج LLM لإجراء فحوصات معايير التصميم والتكرار الإبداعي؛ تكامل خدمة العرض ثلاثي الأبعاد Three.js |
|
||||
| 2 | مساعد تصميم ومراجعة الرسومات الهندسية الذكي | استخدام تقنية RAG لبناء قاعدة معرفية لمعايير تصميم المؤسسة، و DALL·E لتوليد صور مرجعية تساعد في الفهم؛ تكامل CAD API لتحليل الرسومات الهندسية تلقائياً |
|
||||
| 3 | إنشاء وإدارة المستندات الفنية تلقائياً | إنشاء مواصفات المنتج وأدلة التشغيل تلقائياً من قاعدة بيانات المنتجات باستخدام LLM، وتخزين المستندات التاريخية في قاعدة بيانات المتجهات ChromaDB لدعم البحث الذكي |
|
||||
| 4 | مساعد إنشاء تقارير فحص معدات الإنتاج تلقائياً | يقوم مفتشو الصيانة بوصف حالة المعدات صوتياً، ويقوم LLM بإنشاء تقرير الفحص بشكل هيكلي؛ وربط سجلات الأعطال التاريخية تلقائياً |
|
||||
| 5 | نظام الجدولة الذكية وتخطيط المسارات لرافعات الشوك في المصانع | يقوم LLM بتحليل مهام الطلبات ومواقع المستودعات، ويتكامل مع Map API لإنشاء خطة جدولة مثالية |
|
||||
| 6 | مستودع بيانات قائم على استرجاع المعلومات عبر LLM | استخدام تقنية Text-to-SQL لتحويل اللغة الطبيعية إلى استعلامات قاعدة بيانات، و Superset لعرض نتائج الاستعلام بصرياً؛ استخدام Doris أو ClickHouse كمحرك OLAP |
|
||||
| 7 | مساعد أسئلة وأجوبة معرفي لتشخيص أعطال المعدات الصناعية | بناء قاعدة معرفية للمتجهات بناءً على حالات الأعطال التاريخية، ويقدم LLM اقتراحات التشخيص والحلول بناءً على وصف العطل |
|
||||
| 8 | إنشاء تقارير فحص جودة الإنتاج ذكياً وتصنيف العيوب | التعرف على العيوب في صور فحص الجودة عبر OCR، وإنشاء تقرير فحص هيكلي بواسطة LLM؛ وتصنيف أنواع العيوب ودرجة خطورتها تلقائياً |
|
||||
| 9 | مساعد جرد المخزون ذكي وإنشاء تقارير الجرد | إدخال بيانات الجرد، ومقارنة مخزون النظام تلقائياً وإنشاء تقرير الفروقات بواسطة LLM؛ إنذار مبكر للمخزون غير الطبيعي |
|
||||
| 10 | نظام أسئلة وأجوبة ذكي لاقتراحات تحسين العمليات | بناء قاعدة معرفية RAG بناءً على مستندات عمليات الإنتاج، ويقدم LLM اقتراحات للتحسين بناءً على مشاكل الإنتاج |
|
||||
|
||||
## 2. خدمة العملاء الذكية
|
||||
|
||||
تركز سيناريوهات خدمة العملاء الذكية على تحسين كفاءة خدمة العملاء وتحسين تجربة المستخدم. تغطي التطبيقات النموذجية تكامل خدمة العملاء متعددة القنوات، والإنشاء الذكي للردود، وتحليل مشاعر العملاء، والمعالجة الآلية لتذاكر الدعم، مما يساعد الشركات على تحقيق خدمة عملاء على مدار الساعة 7×24.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
|
||||
| 1 | نظام الرد الآلي وتوليد تذاكر الدعم لخدمة العملاء الذكية متعددة القنوات | التكامل مع رسائل WeChat و APP والموقع الرسمي متعددة القنوات، يقوم LLM بفهم النية ثم إنشاء رد وتأسيس تذكرة تلقائياً؛ استخدام LangChain لبناء تدفق الحوار، و MySQL لتخزين بيانات التذاكر |
|
||||
| 2 | مساعد اكتشاف العملاء المحتملين واقتراحات المتابعة | يقوم LLM بتحليل سجلات محادثات خدمة العملاء التاريخية، وتحديد خصائص العملاء ذوي النية العالية وتسجيلهم؛ نظام التوصيات مدمج مع خوارزمية التصفية التعاونية |
|
||||
| 3 | البحث المعرفي الذكي الداخلي للشركة ومساعد الأسئلة والأجوبة | بناء قاعدة معرفية للمتجهات بناءً على Confluence والمستندات الداخلية، يقوم LLM بتوليد الإجابات بالتكامل مع تقنية RAG |
|
||||
| 4 | نظام إدارة استطلاعات رضا العملاء وتحسين الخدمة | يقوم LLM بتحليل محتوى محادثات خدمة العملاء تلقائياً لتصنيف المشاعر وتقييم مستوى الرضا؛ تقارير BI لعرض نتائج التحليل |
|
||||
| 5 | أداة التلخيص الذكي لمحادثات خدمة العملاء وإنشاء التذاكر | بعد انتهاء خدمة العملاء للمحادثة، يقوم LLM بإنشاء ملخص للمحادثة تلقائياً واستخراج المعلومات الأساسية؛ تعبئة حقول التذكرة تلقائياً |
|
||||
| 6 | مساعد الكشف التلقائي عن امتثال نصوص خدمة العملاء | يقوم موظف خدمة العملاء بإدخال محتوى الرد، ويقوم LLM بالكشف الفوري عن امتثال النصوص والكلمات الحساسة؛ تقديم اقتراحات للتعديل |
|
||||
| 7 | أداة التلخيص التلقائي وتوليد التصنيفات لتذاكر خدمة العملاء | يقوم LLM بتوليد ملخصات لسجلات المحادثات الطويلة والتصنيف والوسم التلقائي؛ Elasticsearch يدعم البحث بالنص الكامل في التذاكر |
|
||||
| 8 | أداة مراقبة مشاعر العملاء والإنذار المبكر بالشذوذ | تحليل خصائص نبرة الصوت والمشاعر النصية في الوقت الفعلي، يتعرف LLM على المشاعر غير الطبيعية ويطلق إنذارات؛ WebSocket لدفع رسائل الإنذار |
|
||||
| 9 | نظام قاعدة معرفية لتوصية نصوص خدمة العملاء المثالية | يقوم LLM بتحليل حالات محادثات خدمة العملاء المتميزة، واستخراج قوالب النصوص المثالية؛ نظام التوصيات يوصي بالنصوص في الوقت الفعلي بناءً على سياق المحادثة |
|
||||
| 10 | مساعد تحليل محتوى المكالمات الصادرة الذكية والفحص | بعد تفريغ تسجيلات المكالمات الصادرة، يقوم LLM بتحليل المحتوى واستخراج المعلومات الأساسية؛ إنشاء تقارير فحص الجودة واقتراحات التحسين تلقائياً |
|
||||
|
||||
## 3. قطاع التعليم
|
||||
|
||||
تهدف سيناريوهات قطاع التعليم إلى تحقيق التعليم المخصص والإدارة التعليمية الذكية. تشمل التطبيقات الأساسية تخطيط مسارات التعلم الذكية، والتصحيح التلقائي للواجبات، وإنشاء خطط الدروس، وتحليل الأداء التعليمي، مما يدفع نحو التوزيع الأمثل للموارد التعليمية وتحقيق التعليم المخصص.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ---------------------------------------- | ------------------------------------------------------------------------------------------ |
|
||||
| 1 | تخطيط مسار تعلم اللغة المخصص ونظام التوجيه الذكي | يقيم LLM المستوى الحالي للمتعلم، ويخطط للمهام اليومية بناءً على أهداف التعلم؛ توصي خوارزمية التوصية بالموارد التعليمية بالدمج مع خريطة المعرفة |
|
||||
| 2 | منصة الكتابة الآلية لخطط الدروس وعرض الموارد التعليمية | ينشئ LLM إطار خطة الدرس والتصميم التعليمي بناءً على المنهج الدراسي؛ يخزن متجه المكتبة خطط الدروس والعروض التقديمية الممتازة، ويدعم البحث بالكلمات المفتاحية والتوصيات المماثلة |
|
||||
| 3 | نظام التصحيح الآلي للواجبات وتحليل تشخيص الحالة التعليمية | يقوم LLM بالتصحيح التلقائي للأسئلة الذاتية وإنشاء اقتراحات التصحيح، وتحدد خريطة المعرفة نقاط الضعف لدى الطلاب |
|
||||
| 4 | بناء نموذج كفاءة المواهب للوظائف وخريطة التعلم | يحلل LLM وصف الوظيفة (JD) لاستخراج متطلبات القدرات، وبناء ملف تعريف لقدرات الوظيفة؛ ينشئ خريطة تعلم مخصصة بناءً على الفجوة |
|
||||
| 5 | بناء نظام المناهج المدرسية وأدوات إعداد العروض التقديمية | يحلل LLM خصائص المدرسة واحتياجات الطلاب، وينشئ إطارًا للمناهج المدرسية؛ يتكامل مع واجهة إنشاء PPT لإعداد العروض التقديمية تلقائيًا |
|
||||
| 6 | التدريب العملي لمحاكاة المواقف الفردية لمحادثة اللغة الأجنبية | يتقمص LLM أدوارًا مختلفة لإجراء محادثات لفظية، وتتعرف ASR على النطق وتقيّمه؛ ينشئ TTS نموذجًا قياسيًا للنطق |
|
||||
| 7 | منصة التوجيه للتخطيط المهني والتوصية بالبيانات الضخمة لرغبات القبول الجامعي | يحلل LLM درجات الطالب، وترتيبه، واهتماماته، وغيرها من المعلومات، ويوصي بالجامعات والتخصصات بالدمج مع بيانات القبول |
|
||||
| 8 | مساعد البرمجة للأطفال | يشرح LLM منطق الكود ويقدم إرشادات برمجية، ويدعم التبديل بين لغة الكتل و Python |
|
||||
| 9 | أداة إنشاء خرائط ذهنية للمعلومات تلقائيًا وتوصية بمسار التعلم | عند إدخال موضوع الدرس، ينشئ LLM خريطة ذهنية للمعلومات تلقائيًا؛ ويوصي بالمحتوى التعليمي التالي بناءً على تقدم التعلم |
|
||||
| 10 | محرك التصحيح والتسجيل الآلي لمقالات اللغتين الصينية والإنجليزية | يسجل LLM ويقيم المقالات من أبعاد متعددة مثل الفكرة، والهيكل، واللغة، والتنوع، وينشئ تعليقات؛ ويقارنها بنماذج مقالات ممتازة |
|
||||
|
||||
## 4. البرمجة الذكية
|
||||
|
||||
تهدف سيناريوهات البرمجة الذكية إلى تحسين كفاءة التطوير وجودة الكود. تشمل التطبيقات النموذجية الإكمال التلقائي للكود، والإصلاح التلقائي للأخطاء (Bug)، وإنشاء الاختبارات الآلية، وتحويل الكود، مما يتيح للمطورين التركيز على منطق الأعمال بدلاً من أعمال الترميز المتكررة.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| 1 | مساعد الإكمال التلقائي للكود والإصلاح التلقائي للأخطاء (Bug) | نموذج كود مضبوط بدقة بناءً على CodeLlama، توفر إضافة IDE اقتراحات إكمال الكود في الوقت الفعلي؛ يحلل LLM تتبع الخطأ لتحديد موقع Bug تلقائيًا وإنشاء كود الإصلاح |
|
||||
| 2 | منصة بناء التطبيقات منخفضة التعليمات البرمجية وأتمتة العمليات | يصف المستخدم المتطلبات بلغة طبيعية، ويقوم LLM بتحويلها إلى تكوينات منخفضة التعليمات البرمجية أو أطر عمل برمجية |
|
||||
| 3 | نظام إنشاء حالات اختبار الوحدة | يقوم AST بتحليل الشفرة المصدرية لاستخراج منطق الدوال، ويقوم LLM بإنشاء حالات اختبار لشروط الحدود وسيناريوهات الاستثناء؛ التكامل مع Jest/Pytest لتشغيل الاختبارات |
|
||||
| 4 | أداة التحليل الذكي للشفرة البرمجية ونقل اللغات | تحليل بنية الشفرة البرمجية بناءً على Tree-sitter، ويقوم LLM بتحليل جودة الشفرة البرمجية وتقديم اقتراحات للتحسين؛ دمج محرك القواعد لتحقيق التحويل بين اللغات |
|
||||
| 5 | أداة التوليد التلقائي لعبارات SQL من اللغة الطبيعية | يقوم LLM بتحويل استعلامات اللغة الطبيعية إلى SQL، ويدعم استعلامات الربط المعقدة متعددة الجداول واستعلامات التجميع |
|
||||
| 6 | منصة الاختبار الآلي لواجهات API وتوليد الوثائق | يقوم LLM بتحليل تعليقات الشفرة البرمجية وتعريفات الواجهات، ويقوم تلقائيًا بإنشاء حالات الاختبار ووثائق API؛ تكامل Postman لتنفيذ الاختبارات |
|
||||
| 7 | أداة التسجيل الذكي والصيانة لبرامج اختبار واجهة المستخدم | يقوم ملحق المتصفح بتسجيل مسار عمليات المستخدم، ويقوم LLM بتحليل نية العملية لإنشاء نصوص اختبار برمجية؛ يقوم الذكاء الاصطناعي بإصلاح المحددات المعطلة |
|
||||
| 8 | تحليل سجلات النظام وتحديد الأعطال | تجميع بيانات السجلات عبر ELK Stack، ويقوم LLM بتحليل سجلات الاستثناء لاستخراج المعلومات الرئيسية وتحديد السبب الجذري؛ ويوصي بحلول الإصلاح |
|
||||
| 9 | أداة التوليد التلقائي لشفرة واجهة المستخدم الأمامية (UI) | التعرف على بنية التخطيط لمخططات التصميم عبر OCR، ويقوم LLM بإنشاء CSS المتجاوب وشفرة المكونات؛ تكامل TailwindCSS لدعم أطر عمل الأنماط المتعددة |
|
||||
| 10 | مساعد التصميم الذكي والنمذجة لهيكل قاعدة البيانات | إدخال مستندات متطلبات العمل إلى LLM، والتوليد التلقائي لمخططات ER وهياكل جداول البيانات؛ دعم تصدير نصوص إنشاء الجداول لـ MySQL/PostgreSQL |
|
||||
|
||||
## 5. القطاع الطبي
|
||||
|
||||
تسعى سيناريوهات القطاع الطبي إلى تحسين كفاءة التشخيص والعلاج وجودة الخدمات الطبية. تشمل التطبيقات الشائعة التوليد التلقائي للسجلات الطبية، والإجابة على الأسئلة الطبية المعرفية، والمساعدة في تحليل الصور الطبية، ودعم تطوير الأدوية، مما يدفع عجلة التحول الذكي في الصناعة الطبية.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ---------------------------------- | ------------------------------------------------------------------------------------- |
|
||||
| 1 | مساعد التفسير الذكي لتقارير الفحوصات الطبية | رفع صورة تقرير الفحص، والتعرف على المؤشرات الرئيسية عبر OCR، ويقوم LLM بتفسير القيم غير الطبيعية وإنشاء شرح مبسط |
|
||||
| 2 | خبير استشارات صحية قائم على تقنية استرجاع المعرفة | بناء شبكة معرفية طبية (ICD-10، نشرة معلومات الأدوية، إرشادات التشخيص والعلاج)، واسترجاع وإنشاء إجابات عبر RAG |
|
||||
| 3 | منصة تحليل القرار للبيانات السريرية والبحثية | دمج بيانات EMR ونتائج الفحوصات، ويقوم LLM بالمساعدة في إنشاء شفرات التحليل الإحصائي والمخططات المرئية؛ دعم دراسات الأتراب وتحليل البقاء على قيد الحياة |
|
||||
| 4 | نظام التوليد الذكي لأسئلة الامتحانات الطبية وتحليل الإجابات الخاطئة | إدخال فصول الكتب المدرسية ونقاط المعرفة، ويقوم LLM بإنشاء أسئلة تدريبية وشروحات؛ وجمع تلقائي للإجابات الخاطئة وإنشاء تحليل لنقاط الضعف |
|
||||
| 5 | خبير أسئلة وأجوبة ذكي لشبكة المعرفة في دورة تطوير الأدوية بالكامل | بناء شبكة معرفية للأدوية-الأهداف-الأمراض، ويقوم LLM بالإجابة على الأسئلة المتعلقة بالبحث والتطوير؛ دعم استرجاع الوثائق والتوصية بخطط التجارب |
|
||||
| 6 | مساعد أسئلة وأجوبة ذكي لنشرة معلومات الأدوية | رفع صورة نشرة معلومات الدواء أو إدخال اسم الدواء، ويقوم LLM بالإجابة على أسئلة حول الجرعة وطريقة الاستخدام، والآثار الجانبية، واحتياطات الاستخدام |
|
||||
| 7 | مساعد إنشاء مقالات التوعية بالأمراض | إدخال اسم المرض والجمهور المستهدف، ويقوم LLM بإنشاء مقالات توعوية سهلة الفهم؛ دعم إصدارات متعددة (نسخة المريض/نسخة الأسرة) |
|
||||
| 8 | أداة التوليد التلقائي لتقارير التصوير الطبي | يصف طبيب الأشعة خصائص الصورة، ويقوم LLM تلقائيًا بإنشاء تقرير منظم؛ دعم قوالب أنواع الفحوصات الشائعة |
|
||||
| 9 | مساعد التوليد الذكي لأرشيف السجلات الجراحية والتوثيق | إدخال صوتي للخطوات الرئيسية أثناء الجراحة، وLLM يولد سجلات جراحية مهيكلة؛ ربط تلقائي بأكواد العمليات الجراحية |
|
||||
| 10 | مساعد ذكي لتذكيرات أدوية الأمراض المزمنة | يدخل المريض قائمة الأدوية، وLLM يولد تذكيرات أدوية مخصصة؛ يدعم فحص موانع الاستخدام والأسئلة والأجوبة التفاعلية |
|
||||
|
||||
## 6. الأمن السيبراني
|
||||
|
||||
تركز سيناريوهات الأمن السيبراني على الحماية الأمنية وإدارة المخاطر. تشمل التطبيقات الأساسية اكتشاف الثغرات، وتحليل معلومات التهديدات، والتعرف على رسائل التصيد، والاستجابة للحوادث الأمنية، مما يبني نظام حماية أمني ذكي وشامل للمؤسسات.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ----------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| 1 | محرك اكتشاف وإصلاح ثغرات أمان الكود | أدوات تحليل الكود الثابت (SAST) تفحص الكود، وLLM يحلل مبادئ الثغرات ويولد اقتراحات الإصلاح؛ يتكامل مع خط أنابيب CI/CD |
|
||||
| 2 | نظام التعرف والاعتراض الذكي لرسائل التصيد الاحتيالي المولدة بواسطة AI | LLM يحلل محتوى البريد الإلكتروني وخصائص المرسل وأمان الروابط، للتعرف على رسائل التصيد المولدة بواسطة AI؛ يتصل ببوابة البريد للاعتراض في الوقت الفعلي |
|
||||
| 3 | مساعد التوليد التلقائي للتقارير اليومية للعمليات الأمنية | تجميع سجلات أجهزة الأمان، وLLM يستخرج الأحداث الرئيسية تلقائيًا ويولد تقارير يومية؛ تمييز الأحداث الشاذة بـ highlight |
|
||||
| 4 | مساعد الأسئلة والأجوبة الذكي لقاعدة المعرفة الأمنية | بناء قاعدة معرفة متجهة بناءً على وثائق الأمان وقاعدة بيانات CVE، وLLM يجيب على أسئلة تقنيات الأمان واقتراحات المعالجة |
|
||||
| 5 | مساعد التوليد الذكي لتقارير اختبار الاختراق | بعد اكتمال اختبار الاختراق، يقوم LLM بتوليد تقرير تلقائي بناءً على وصف الثغرة؛ توليد دفعي لاقتراحات إصلاح الثغرات |
|
||||
| 6 | حماية الأكواد الخبيثة ومراقبة الامتثال للخصوصية | تحليل سلوك الملفات المشبوهة في بيئة اختبار معزولة (Sandbox)، وLLM يتعرف على الميزات الخبيثة ويولد توقيعات؛ مسح وتحديد بيانات الخصوصية |
|
||||
| 7 | أداة توليد قوائم فحص الامتثال للتكوينات الأمنية | إدخال نوع النظام المستهدف، وLLM يولد قائمة فحص التكوين الأمني؛ يدعم معايير مثل حماية المستوى 2.0 (Dengbao 2.0) وCIS |
|
||||
| 8 | مساعد الاستعلام والتحليل الذكي لمعلومات التهديدات | الاتصال بمصادر متعددة لمعلومات التهديدات (مفتوحة المصدر، تجارية)، وLLM يفسر المعلومات ويربطها بأصول المؤسسة؛ يوصي باستراتيجيات الحماية |
|
||||
| 9 | مساعد توليد تقارير مراجعة الحوادث الأمنية | بعد وقوع حادث أمني، يقوم LLM بتوليد تقرير مراجعة تلقائي بناءً على الجدول الزمني؛ تحليل السبب الجذري واقتراحات التحسين |
|
||||
| 10 | مركز رصد وإنذار معلومات التهديدات العالمية | يجمع الروبوت (Crawler) الأخبار الأمنية العالمية والإفصاحات عن الثغرات، وLLM يستخرج المعلومات الرئيسية ويقيّم التأثير؛ إشعارات إنذار عبر البريد الإلكتروني/الرسائل النصية |
|
||||
|
||||
## 7. الإدارة المالية، التأمين والقطاع المصرفي
|
||||
|
||||
تتمحور سيناريوهات القطاع المالي حول التحكم في المخاطر والذكاء المالي. تشمل التطبيقات النموذجية تقييم مخاطر الائتمان، ومستشاري إدارة الثروات، وتوليد التقارير المالية، ومراقبة غسل الأموال، مما يعزز كفاءة التشغيل وقدرات إدارة المخاطر في المؤسسات المالية.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | -------------------------------------- | ------------------------------------------------------------------------------------ |
|
||||
| 1 | مساعد التوليد الذكي لتقارير التحقيق الائتماني | إدخال المعلومات الأساسية للشركة والبيانات المالية، وLLM يولد تلقائيًا تقرير التحقيق الائتماني؛ تحديد تلقائي لنقاط المخاطرة |
|
||||
| 2 | مستشار ذكي لإدارة الثروات في البنوك الخاصة | LLM يحلل تفضيلات المخاطر المالية للعميل وأهدافه المالية، ويولد اقتراحات تخصيص الأصول؛ يتصل بمنتجات التمويل وقاعدة بيانات الصناديق |
|
||||
| 3 | مساعد التوليد الذكي والتحقق من الامتثال لكتاب طرح عام أولي (IPO) | قوالب معيارية لمخطط طرح الأسهم، وLLM يملأ تلقائيًا وصف الأعمال وعوامل المخاطر؛ محرك قواعد التحقق من الامتثال للتحقق من الاتساق الداخلي والخارجي |
|
||||
| 4 | نظام التوليد التلقائي للتقارير المالية للشركات والإنذار المبكر بالحالات الشاذة | جمع البيانات تلقائيًا من الأنظمة المالية، وLLM يولد التحليل المالي وقسم مناقشة الإدارة؛ قواعد الإنذار المبكر للمؤشرات الشاذة |
|
||||
| 5 | مساعد استخراج معلومات المستندات المالية والأسئلة والأجوبة | تحميل صور الفواتير، والتعرف البصري على الحروف (OCR) لاستخراج المعلومات، وLLM يجيب على الأسئلة المتعلقة بالمستندات؛ يدعم فواتير ضريبة القيمة المضافة وتذاكر القطار، إلخ |
|
||||
| 6 | مساعد البحث الذكي والأسئلة والأجوبة لحالات الامتثال | بناء قاعدة معرفة بناءً على حالات العقوبات التنظيمية، وLLM يجيب على أسئلة الامتثال ويوفر مراجع للحالات |
|
||||
| 7 | مدرب المحادثات الذكي لوكلاء التأمين | LLM يتقمص أدوار أنواع مختلفة من العملاء لإجراء محادثات محاكاة، ويقيم امتثال ومتانة حديث الوكيل؛ تحليل تفريغ التسجيلات الصوتية |
|
||||
| 8 | منصة تحليل شروط منتجات التأمين والمقارنة مع المنافسين | تحليل مهيكلي للشروط، وLLM يولد ملخصات لأبرز النقاط والملاحظات الهامة |
|
||||
| 9 | خدمة التعرف على مشاعر خطاب العميل | التعرف على المشاعر من الكلام الصوتي مع فحص امتثال الحديث، وتقديم اقتراحات تحسين فورية للوكيل |
|
||||
| 10 | مساعد الاستعلام والحوار الذكي لتقدم مطالبات التأمين | يدخل المستخدم رقم الوثيقة أو رقم البلاغ، وLLM يستعلم عن تقدم المطالبة ويجيب على الأسئلة المتعلقة بالمطالبات |
|
||||
|
||||
## 8. خدمات المؤسسات
|
||||
|
||||
تسعى سيناريوهات خدمات المؤسسات إلى تحسين الكفاءة التشغيلية للمنظمات ومستوى الإدارة. تشمل التطبيقات الشائعة إدارة علاقات العملاء، والتنبؤ بالمبيعات، ورصد الرأي العام، والإدارة الذكية للموارد البشرية، مما يساعد الشركات على تحقيق التحول الرقمي والارتقاء بمستواها.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ---------------------------------- | ------------------------------------------------------------------------------ |
|
||||
| 1 | منصة تحليل احتفاظ العملاء والإنذار المبكر بالتسرب | جمع بيانات سلوك المستخدمين عبر نقاط التتبع، ونماذج التعلم الآلي (ML) تتنبأ باحتمالية التسرب، وLLM يولد اقتراحات الاستبقاء |
|
||||
| 2 | منصة الوصول للعملاء المحتملين ورسائل التسويق البريدية B2B | تصفية العملاء المستهدفين من بيانات السجل التجاري للشركات، وLLM يولد محتوى تسويقي مخصص؛ الاتصال بمنصة إرسال البريد الإلكتروني الجماعي |
|
||||
| 3 | منصة مراقبة خط أنابيب المبيعات والتنبؤ بالأداء | جمع البيانات تلقائيًا من إدارة علاقات العملاء (CRM)، وLLM يحلل قمع المبيعات ويتنبأ بتحقيق الأداء؛ دفع إنذارات الشذوذ للمديرين |
|
||||
| 4 | رادار رصد الرأي العام عن العلامة التجارية والإنذار المبكر للأزمات | جمع بيانات الرأي العام من الشبكة بأكملها (وسائل التواصل الاجتماعي، الأخبار، المنتديات)، وLLM يحلل المشاعر واتجاهات الانتشار؛ دفع إنذارات الأزمات |
|
||||
| 5 | مساعد كتابة رسائل البريد الإلكتروني المهنية الذكي وإدارة مشاعر التواصل | فهم سياق البريد الإلكتروني، وLLM يولد مسودات رسائل احترافية؛ تحليل المشاعر وتقديم اقتراحات للتحسين |
|
||||
| 6 | نظام التحليل الذكي للسير الذاتية ومطابقة الوظائف | تحليل ملفات PDF للسير الذاتية لاستخراج المعلومات الرئيسية، LLM يطابق الوظائف المناسبة ويولد نصائح المقابلات؛ تكامل نظام ATS |
|
||||
| 7 | دليل إرشاد الموظفين الجدد ومساعد الإجابة على الأسئلة | قاعدة معرفة وثائق الإلحاق باسترجاع RAG، LLM يجيب على أسئلة الموظفين الجديدة الشائعة |
|
||||
| 8 | منصة إدارة ملاحظات أداء الموظفين وأهداف OKR | جمع بيانات نظام OKR، LLM يحلل حالة إنجاز الأهداف ويولد اقتراحات الملاحظات؛ جمع ملاحظات 360 درجة |
|
||||
| 9 | محاضر الاجتماعات الذكية وإدارة المهام | تفريغ تسجيلات الاجتماعات، LLM يستخرج نقاط النقاش الرئيسية والمهام؛ الإنشاء التلقائي للمهام في نظام المهام |
|
||||
| 10 | التعرف على الفواتير والمعالجة التلقائية لتعويض النفقات | OCR للتعرف على معلومات الفاتورة، التحقق التلقائي من صحة الفاتورة وامتثال التعويضات؛ التكامل مع النظام المالي |
|
||||
|
||||
## 9. إنتاج المحتوى والعمليات
|
||||
|
||||
تركز سيناريوهات إنتاج المحتوى والعمليات على توليد الأفكار وإدارة حركة المرور. تشمل التطبيقات الأساسية كتابة النصوص الإعلانية، وإنتاج مقاطع الفيديو القصيرة، والبث المباشر بالشخصيات الرقمية، وتحسين SEO، مما يساعد الشركات على تحسين كفاءة إنتاج المحتوى ومعدلات التحويل التسويقي.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ----------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| 1 | منصة مساعدة إنشاء محتوى الأفلام والتلفزيون والروايات | LLM يوفر مساعدة في الإنشاء مثل مخطط القصة، وتصميم الشخصيات، وتوليد الحوار؛ خريطة ذهنية لتصور بنية القصة |
|
||||
| 2 | مساعد الكتابة الذكية لقصص العلامة التجارية ومقالات العلاقات العامة | إدخال كلمات العلامة التجارية الرئيسية ومعلومات المنتج، LLM يولد إصدارات نصوص بأنماط متعددة؛ تكامل واجهة اختبار A/B |
|
||||
| 3 | نظام إدارة تفاعل البث المباشر بالشخصيات الرقمية الافتراضية والبث | نمذجة مظهر الشخصية الرقمية + صوت TTS + حوار LLM، استجابة في الوقت الفعلي لتعليقات الجمهور؛ تكامل بث OBS |
|
||||
| 4 | توليد نصوص الفيديو القصير والمونتاج الذكي | LLM يولد نصوص الفيديو القصير واللوحات القصصية، Sora/Runway يولد مقاطع فيديو؛ أدوات المونتاج للتجميع التلقائي |
|
||||
| 5 | تفريغ صوتي لمحادثات المبيعات والتوصية بالعبارات | تفريغ تسجيلات المكالمات عبر ASR، LLM يحلل المحادثة ويوصي بالعبارات المثالية؛ تكامل نظام CRM |
|
||||
| 6 | نظام التصميم والتوليد الذكي للمحتوى التسويقي | إدخال معلومات المنتج، LLM يولد النصوص التسويقية ويستخرج نقاط البيع؛ تكامل قوالب Canva/AIGA Design |
|
||||
| 7 | نظام مراقبة عائد الاستثمار للإعلانات متعددة المنصات في الوقت الفعلي وتحسين الاستراتيجية | واجهة برمجة تطبيقات منصة الإعلانات لجمع البيانات، LLM يحلل أداء الإعلانات ويولد اقتراحات التحسين؛ دفع تنبيهات الاستثناءات |
|
||||
| 8 | تحليل الكلمات المفتاحية لمحركات البحث وحركة المرور | جمع بيانات مؤشر بايدو و 5118، LLM يحلل اتجاهات الكلمات المفتاحية والمنافسة؛ التوصية باختيار موضوعات المحتوى |
|
||||
| 9 | منصة تحليل إعلانات المنافسين | واجهة برمجة تطبيقات منصة بيانات طرف ثالث لجمع إعلانات المنافسين، LLM يحلل استراتيجيات الإعلان وخصائص الإبداع |
|
||||
| 10 | نظام التحليل الذكي للمواضيع الرائجة على الإنترنت والتوصية بالمحتوى | جمع بيانات بحث ويبو الساخن وقائمة TikTok الرائجة، LLM يحلل اتجاهات المواضيع الرائجة ويوصي بزوايا المواضيع؛ جدولة المحتوى بالتقويم |
|
||||
|
||||
## 10. الإدارة الحكومية الذكية
|
||||
|
||||
تسعى سيناريوهات الحكومة الذكية إلى تحسين كفاءة الخدمات الحكومية وقدرات الحوكمة. تشمل التطبيقات النموذجية التنقل الصوتي الذكي للخطوط الحكومية الساخنة، والإجابة الذكية على السياسات، وتحسين الموافقات الإدارية، وإدارة الحوادث الحضرية، مما يدفع بناء الحكومة الرقمية.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ------------------------------------------ | -------------------------------------------------------------------- |
|
||||
| 1 | نظام التنقل الصوتي الذكي والتوجيه التلقائي للخط الحكومي الساخن 12345 | التعرف على صوت مكالمات المواطنين، LLM يفهم الطلبات ويوجهها بذكاء إلى القسم المختص؛ التدفق التلقائي لنظام أوامر العمل |
|
||||
| 2 | روبوت الإرشاد الذكي والإجابة على السياسات في قاعات الخدمات الحكومية | قاعدة المعرفة الحكومية باسترجاع RAG، LLM يجيب على إجراءات الخدمة وأسئلة السياسات؛ التكامل مع نظام أخذ الأرقام |
|
||||
| 3 | منصة المطابقة الذكية والدفع الدقيق لسياسات دعم الشركات | التحليل المهيكل للسياسات، الملف التعليمي للشركة للمطابقة التلقائية مع السياسات المعمول بها؛ دفع تنبيهات عبر الرسائل القصيرة/البريد الإلكتروني |
|
||||
| 4 | مساعد المراجعة المسبقة الذكية لمواد الموافقات الإدارية والتحقق من الامتثال | التعرف عبر OCR واستخراج المعلومات الرئيسية من المواد، LLM يتحقق من اكتمال المواد وامتثالها |
|
||||
| 5 | نظام اكتشاف السلوك غير الطبيعي في مراقبة الفيديو للأمن العام | تحليل تدفق الفيديو في الوقت الفعلي، نماذج الرؤية الحاسوبية (CV) تكتشف السلوكيات غير الطبيعية (قتال، سقوط، إلخ)؛ دفع التنبيهات |
|
||||
| 6 | منصة إدارة التعرف الذكي على الأحداث والجدولة الشبكية الحضرية | جمع بيانات الإدراك الحضري (إنترنت الأشياء، الكاميرات)، LLM يتعرف على نوع الحدث ويوجهه |
|
||||
| 7 | نظام تحليل البيانات الضخمة للرأي العام الاجتماعي والإنذار المبكر بالمخاطر | تحليل ودمج متعدد المصادر للخطوط الحكومية الساخنة، والرأي العام على الإنترنت، واستطلاعات الرأي الاجتماعي؛ LLM يتعرف على بؤر المخاطر |
|
||||
| 8 | منصة التعرف الرقمي والأرشفة الذكية للسجلات الحكومية | التعرف عبر OCR على المحتوى النصي للسجلات، LLM يستخرج المعلومات الرئيسية ويصنفها تلقائيًا؛ دعم البحث في النص الكامل |
|
||||
| 9 | منصة القيادة لحالات الطوارئ العامة والجدولة الذكية لموارد الإنقاذ | جمع معلومات الحدث، LLM يولد خطة الاستجابة للطوارئ؛ خوارزمية تحسين جدولة الموارد |
|
||||
| 10 | نظام مراقبة شبكي وتتبع دقيق لتلوث الهواء البيئي | جمع بيانات مستشعرات جودة الهواء، نماذج الرؤية الحاسوبية (CV) تتعرف على مصادر التلوث؛ LLM يحلل اتجاهات التلوث ويتتبع مصادره |
|
||||
|
||||
## 11. الشؤون القانونية وإدارة العقود
|
||||
|
||||
تركز سيناريوهات الشؤون القانونية على تحسين كفاءة الخدمات القانونية وإدارة الامتثال. تشمل التطبيقات الشائعة مراجعة العقود، وتحليل القضايا، ومراقبة اللوائح، وتوليد المستندات القانونية، مما يوفر أدوات ذكية لدعم المتخصصين في المجال القانوني.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | -------------------------------------------------------- | ---------------------------------------------------------------- |
|
||||
| 1 | وكيل "البحث عن الأخطاء" بنقرة واحدة لمخاطر وثغرات العقود | التحليل المهيكل لنص العقد، LLM يتعرف على المشاكل المحتملة مقابل قائمة المخاطر؛ وضع علامات على البنود عالية المخاطر |
|
||||
| 2 | منصة مراجعة الامتثال وتقديم توصيات التعديل طوال دورة حياة عقود الشركة | مقارنة بنود العقد بقاعدة البيانات القانونية، LLM يولد تقرير مراجعة الامتثال؛ تتبع توصيات التعديل |
|
||||
| 3 | مستشار تقييم ذكي بنسبة فوز القضايا المماثلة عبر AI | استخراج خصائص القضية، البحث والمطابقة للقضايا المماثلة؛ LLM يحلل العوامل المؤثرة في نسبة الفوز |
|
||||
| 4 | رادار المراقبة في الوقت الفعلي لتغييرات القوانين واللوائح وتحليل الأثر على الأعمال | التحديث الفعلي لقاعدة بيانات القوانين واللوائح، LLM يحلل محتوى التغييرات ويقيّم الأثر على الأعمال؛ دفع تنبيهات مبكرة |
|
||||
| 5 | أداة إنشاء مسودة خطاب المحامي تلقائياً عبر AIGC | إدخال بيانات الوقائع، يقوم LLM بإنشاء قالب خطاب محامي موحد؛ فحص العناصر والتحقق من الامتثال |
|
||||
| 6 | جهاز تسجيل لتفريغ تسجيلات الجلسات في الوقت الفعلي واستخراج نقاط النزاع تلقائياً | تفريغ تسجيلات المحكمة عبر ASR، يقوم LLM باستخراج نقاط النزاع والحجج الرئيسية؛ وضع علامات زمنية |
|
||||
| 7 | نظام مراقبة تلقائية لمخالفات الملكية الفكرية عبر الإنترنت وجمع الأدلة عبر البلوك تشين | مراقبة المخالفات على منصات التجارة الإلكترونية ووسائل التواصل الاجتماعي؛ جمع وحفظ أدلة المخالفات تلقائياً |
|
||||
| 8 | Agent مبني على LLM للتحقق من اتساق البيانات الرئيسية في نشرة إصدار الاكتتاب العام وتحذير المخاطر | مقارنة بيانات الفصول المتعددة في نشرة الإصدار، يتعرف LLM على التناقضات والشذوذ في البيانات؛ وضع علامات المخاطر |
|
||||
| 9 | إضافة "ترجمة" البنود القانونية المعقدة إلى لغة مبسطة | تحديد النص القانوني، يقوم LLM بإنشاء شرح سهل الفهم |
|
||||
| 10 | نظام فرز سلسلة الأدلة في القضايا ذكياً وعرضها بشكل مرئي | رفع مواد الأدلة، يقوم LLM بتحليل العلاقات بين الأدلة والجدول الزمني |
|
||||
|
||||
## 12. خدمات السفر والتنقل
|
||||
|
||||
تسعى سيناريوهات السفر والتنقل إلى تحسين تجربة السفر وتسهيل الخدمات. تشمل التطبيقات الأساسية التخطيط الذكي للرحلات، والتنبؤ بالأسعار، والجولات الافتراضية، وخدمات الترجمة، مما يجعل السفر أكثر سهولة ومتعة.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | -------------------------------------------- | ----------------------------------------------------------------------------------- |
|
||||
| 1 | مولد دليل رحلات تلقائي للمسافرين الكسالى مبني على AIGC | إدخال تفضيلات المستخدم (عدد الأيام، الميزانية، الاهتمامات)، يقوم LLM بإنشاء جدول الرحلة اليومي؛ تقوم API المعالم السياحية بالحصول على أوقات العمل وتذاكر الدخول |
|
||||
| 2 | روبوت للتنبؤ باتجاه أسعار تذاكر الطيران والفنادق عبر الإنترنت وقفل أقل سعر تلقائياً | جمع بيانات أسعار OTA، نماذج ML للتنبؤ باتجاهات الأسعار؛ تنبيهات مراقبة الأسعار |
|
||||
| 3 | مستشار لإعادة جدولة الرحلات بين شركات الطيران واقتراح خطط طوارئ بعد إلغاء الرحلات | مراقبة حالة الرحلات، يقوم LLM بتحليل خطط الرحلات البديلة؛ مقارنة أسعار شركات الطيران المتعددة |
|
||||
| 4 | نظام فحص مسبق ذكي لمستندات التأشيرة ومساعد تعبئة النماذج تلقائياً | التقاط صور المستندات ورفعها، التعرف على المعلومات عبر OCR والتحقق من اكتمالها؛ التعبئة التلقائية للنماذج |
|
||||
| 5 | مترجم صوتي في الوقت الفعلي للسفر إلى الخارج ومترجم القوائم بصرياً | نموذج ترجمة صوتية بدون اتصال، التعرف على صور القوائم عبر OCR وترجمتها |
|
||||
| 6 | محلل دليل "تجنب الفخاخ" للفنادق مبني على تقييمات حقيقية من البيانات الضخمة | جمع بيانات تقييمات الفنادق، يقوم LLM باستخراج الكلمات المفتاحية للتقييمات الإيجابية والسلبية |
|
||||
| 7 | منصة تفاعلية للمعاينة الغامرة عبر VR للوجهات والاختيار الافتراضي للغرف | التقاط صور بانورامية بزاوية 360 درجة، تقنية VR لتحقيق المعاينة الغامرة؛ جولة افتراضية في الغرفة |
|
||||
| 8 | مساعد لإنشاء يوميات سفر جميلة ونصوص لمنشورات وسائل التواصل الاجتماعي تلقائياً من آثار الرحلة | استخراج معلومات الوقت والموقع من الصور، يقوم LLM بإنشاء نصوص اليوميات؛ إنشاء قوالب منسقة |
|
||||
| 9 | منصة إدارة جمع فواتير سفر العمل تلقائياً وتعويضات الامتثال | ربط API منصة سفر العمل، جمع معلومات الفواتير تلقائيا؛ التحقق من الامتثال |
|
||||
| 10 | تنقل ذكي وتنبؤ باختناق حركة المرور في مناطق الجذب في الوقت الفعلي وتخطيط مسارات لتجنب أوقات الذروة | جمع بيانات حركة المرور في مناطق الجذب، نماذج ML للتنبؤ بأوقات الذروة؛ توصيات لتجنب أوقات الزحام |
|
||||
|
||||
## 13. الرفقة العاطفية
|
||||
|
||||
تركز سيناريوهات الرفقة العاطفية على الصحة النفسية والراحة العاطفية. تشمل التطبيقات النموذجية الرفيق الافتراضي، والاستشارات العاطفية، والتدريب المعرفي، والتوجيه النفسي، مما يوفر للمستخدمين رفقة ودعماً على مدار الساعة.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | -------------------------------------------- | ----------------------------------------------------------- |
|
||||
| 1 | رفيق افتراضي لمرافقة عميقة على مدار 24 ساعة مبني على نموذج LLM كبير | نظام الذاكرة لتخزين سجل المحادثات، يقوم LLM بإنشاء ردود مخصصة؛ وحدة الدعم العاطفي |
|
||||
| 2 | مستشار AI للتوجيه النفسي والتعرف على المشاعر متعدد الوسائط | تحليل نبرة الصوت + التعرف على المشاعر النصية، يقوم LLM بإنشاء اقتراحات التوجيه؛ إنذار التدخل في الأزمات |
|
||||
| 3 | إنسان رقمي للتدريب المعرفي واستعادة الذاكرة لكبار السن المصابين بمرض الزهايمر | تدريب الألعاب المعرفية (الذاكرة، الحساب، اللغة)؛ تحفيز استرجاع الذكريات عبر الصور القديمة/الأغاني القديمة |
|
||||
| 4 | مدرب AIGC لمحاكاة التدريبات الاجتماعية للأشخاص المصابين بالرهاب الاجتماعي | محاكاة سيناريوهات اجتماعية افتراضية، يتقمص LLM أدواراً مختلفة؛ اقتراحات للمهارات الاجتماعية |
|
||||
| 5 | آلة تخصيص قصص ما قبل النوم للأطفال عبر AI التوليدي | يدخل الوالدان الموضوع والتفضيلات، يقوم LLM بإنشاء قصة مخصصة؛ إنشاء موسيقى خلفية |
|
||||
| 6 | استعادة الحياة الرقمية للمتوفين ونظام حوار LLM عبر الزمان والمكان | تدريب نموذج مخصص باستخدام بيانات ما قبل الوفاة (الصوت، النص)؛ إنشاء حوار الذكريات |
|
||||
| 7 | روبوت دردشة متطابق للشخصية ومتعاطف مبني على AI لبيانات MBTI | إدخال نتائج اختبار MBTI، يقوم LLM بإنشاء تحليل الشخصية وردود متعاطفة؛ توصيات تطابق الشخصية |
|
||||
| 8 | مراقبة مزاج على مدار الساعة ومساعد AI لتحفيز المشاعر الإيجابية | تسجيل حالة المزاج يومياً، يقوم LLM بتحليل الاتجاهات وإنشاء محتوى تحفيزي؛ دفع تذكيرات إيجابية |
|
||||
| 9 | منفذ AI آمن الخصوصية للمراهقين للفضفضة | منفذ فضفضة مجهول، يوفر LLM الاستماع والنصائح؛ إنذار الكلمات الحساسة |
|
||||
| 10 | نظام تربية حيوان أليف افتراضي AI يتمتع بقدرة التطور الذاتي | تدريب نموذج شخصية الحيوان الأليف، التطور والنمو من خلال التفاعل والحوار؛ نظام الأزياء الافتراضية |
|
||||
|
||||
## 14. الترفيه والتسلية
|
||||
|
||||
تسعى سيناريوهات الترفيه والتسلية إلى توفير تجارب ترفيهية رقمية غنية. تشمل التطبيقات الشائعة اتخاذ القرارات الذكية لـ NPC في الألعاب، والمساعدة في ألعاب الغموض، وإنشاء المحتوى، ومعالجة الصوت والفيديو، لتلبية الاحتياجات الترفيهية المتنوعة للمستخدمين.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | -------------------------------------------- | --------------------------------------------------------- |
|
||||
| 1 | محرك قرارات مستقلة لـ NPC في ألعاب العالم المفتوح مبني على LLM | دمج شجرة سلوك NPC مع قرارات LLM، نظام الحوار لإنشاء تفاعلات مخصصة؛ محرك السلوك |
|
||||
| 2 | أداة مساعدة لاستنتاج حبكات ألعاب الغموض الغامرة عبر AIGC والتحكم في سير اللعبة لـ DM | اختيارات اللاعب تؤدي إلى تشعبات في الحبكة، يقوم LLM بإنشاء منطق الاستنتاج؛ إنشاء بطاقات الأدلة تلقائياً |
|
||||
| 3 | مولّد تعديل النهايات التفاعلية للروايات | اختيارات القارئ تؤثر على مسار الحبكة، LLM يولّد فروع نهايات متعددة |
|
||||
| 4 | محطة عمل AIGC التلقائية للنمذجة ثلاثية الأبعاد لشخصيات الأنمي | وصف نصي لتوليد رسم تخطيطي للشخصية، أدوات نمذجة ثلاثية الأبعاد تلقائية؛ عرض الخامات والمواد |
|
||||
| 5 | تحليل الرؤية الحاسوبية CV لمعارك الرياضات الإلكترونية ومعقب ذكي بالذكاء الاصطناعي | تحليل لحظي لمشاهد اللعبة، التعرف على اللحظات المفتاحية؛ LLM يولّد نص التعليق |
|
||||
| 6 | محرك خوارزمية توصية المحتوى الفكري المخصص | ملف اهتمام المستخدم، توصية مطابقة للمحتوى الفكري |
|
||||
| 7 | برنامج تصحيح الصوت بالذكاء الاصطناعي وتجميل صوت الكاريوكي | معالجة تقليل ضوضاء الصوت وتحسين الصوت البشري؛ خوارزمية تصحيح صوت بالذكاء الاصطناعي |
|
||||
| 8 | أداة استخراج ومونتاج بالذكاء الاصطناعي لحصريات قصة شخصية في أعمال سينمائية وتلفزيونية | تحليل محتوى الفيديو، استخراج المقاطع المتعلقة بالشخصية؛ مونتاج تلقائي وتوليد |
|
||||
| 9 | نظام توليد تلقائي للكتب الصوتية بتركيب صوت TTS متعدد الشخصيات | توزيع الأدوار النصية، توليد نبرة صوت مخصصة؛ إضافة موسيقى خلفية ومؤثرات صوتية |
|
||||
| 10 | مدرب مراجعة مبارزات التعلم المعزز للألعاب الورقية ولعب الطاولة | تحليل وضع اللعب، محاكاة خصم بالذكاء الاصطناعي؛ توليد اقتراحات المراجعة |
|
||||
|
||||
## 15. خدمات التجارة الإلكترونية
|
||||
|
||||
تركز سيناريوهات خدمات التجارة الإلكترونية على كفاءة العمليات وتحسين معدلات التحويل. تشمل التطبيقات الأساسية توليد محتوى المنتجات، البث المباشر للبيع، خدمة العملاء، تحليل الأسعار، وغيرها، مما يساعد التجار على تحقيق عمليات ذكية.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | --------------------------------------------- | ---------------------------------------------------------- |
|
||||
| 1 | أداة إنتاج دفعة لصفحات تفاصيل منتجات AIGC بمعدل تحويل عالي | إدخال معلومات المنتج، LLM يولّد نصوص نقاط البيع وأوصاف المشاهد؛ توليد صور خلفية |
|
||||
| 2 | مصنع توليد فيديو عرض وتجربة ارتداء ذكية بالذكاء الاصطناعي لموديلات الأزياء الافتراضية | معالجة صور الملابس المسطحة، توليد تأثير ارتداء الموديل الافتراضي؛ فيديو عرض متعدد الزوايا |
|
||||
| 3 | مساعد ترجمة وتلميع محلي متعدد اللغات LLM للتجارة الإلكترونية عبر الحدود | ترجمة متعددة اللغات لوصف المنتج، تلميع وتكييف ثقافي؛ واجهة نشر متعددة المنصات |
|
||||
| 4 | روبوت تحليل مشاعر العملاء وردود ذكية قائم على NLP | تحليل مشاعر محادثات الاستشارات، توليد ردود تهدئة تلقائية؛ تصنيف المراجعات الإيجابية والسلبية |
|
||||
| 5 | نظام بث مباشر للبيع بالتجارة الإلكترونية بشخصية رقمية AIGC على مدار 24 ساعة | صورة شخصية رقمية + توليد نصوص لحظية، استدعاء معلومات المنتج لحظياً؛ ردود تفاعل على التعليقات |
|
||||
| 6 | إضافة مقارنة أسعار وتوقعات الاتجاهات بالذكاء الاصطناعي للمنتجات نفسها عبر الإنترنت | جلب أسعار منصات التجارة الإلكترونية، عرض رسوم بيانية للمقارنة؛ توقع اتجاهات الأسعار |
|
||||
| 7 | منصة فرز ذكي بالذكاء الاصطناعي لصور مشتريات العملاء وتوليف فيديو قصير | تقييم جودة صور مشتريات العملاء، توصية تلقائية بالمحتوى عالي الجودة؛ توليف قوالب فيديو قصير |
|
||||
| 8 | تحليل صوتي لمحادثات المبيعات اللحظية وتوصية بنصوص حديث ذهبية قائمة على LLM | نسخ ASR للمكالمات، فحص امتثال النصوص اللحظي؛ توصية بالنصوص |
|
||||
| 9 | محرك رؤى اتجاهات السوق الشائعة وتوقع المنتجات الرائجة بالذكاء الاصطناعي | جمع وتحليل بيانات وسائل التواصل الاجتماعي والتجارة الإلكترونية، LLM يستخلص اتجاهات النقاط الساخنة؛ توصيات اختيار المنتجات |
|
||||
| 10 | نظام تجميع ملفات تعريف مستخدمي حركة المرور الخاصة وتشغيل دقيق بالذكاء الاصطناعي | تحليل تجميع بيانات سلوك المستخدم، توليد علامات ملف التعريف؛ تشغيل تسويق آلي |
|
||||
|
||||
## 16. الطاقة
|
||||
|
||||
تسعى سيناريوهات الطاقة إلى تحقيق الإدارة الذكية والتحول الأخضر في قطاع الطاقة. تشمل التطبيقات النموذجية تحليل استهلاك الكهرباء، فحص المعدات، حساب انبعاثات الكربون، تحسين الإرسال، وغيرها، لدفع التشغيل الفعال لأنظمة الطاقة.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ------------------------------------------------ | ------------------------------------------------------ |
|
||||
| 1 | محلل سلوك استهلاك الكهرباء المنزلية بالذكاء الاصطناعي ومستشار استراتيجيات توفير الطاقة | جمع بيانات العدادات الذكية، تحليل أنماط الاستهلاك؛ LLM يولّد توصيات توفير الطاقة |
|
||||
| 2 | نظام التعرف البصري CV بالطائرات بدون طيار لعيوب الوحدات الكهروضوئية | تصوير تفتيش بالطائرات بدون طيار، تحليل صور الأشعة تحت الحمراء الحرارية؛ تمييز واكتشاف العيوب |
|
||||
| 3 | وكيل استراتيجية التداول الآلي للطاقة وتوقع اتجاه أسعار الكهرباء الفورية بالذكاء الاصطناعي | جمع بيانات سوق الكهرباء، نموذج توقع الأسعار؛ توليد الاستراتيجيات وتنفيذ التداول |
|
||||
| 4 | نظام إنذار مبكر لخطر الانفجار الحراري وفحص صحة بطاريات التخزين غير المدمر بالذكاء الاصطناعي | مراقبة بيانات تشغيل البطارية، نموذج تقييم الصحة؛ دفع إنذارات المخاطر |
|
||||
| 5 | مساعد حساب تلقائي لانبعاثات الكربون عبر السلسلة الكاملة للمؤسسة وتوليد تقارير ESG بالذكاء الاصطناعي | جمع بيانات استهلاك الطاقة، حساب معاملات انبعاثات الكربون؛ توليد تلقائي لتقارير ESG |
|
||||
| 6 | نظام قيادة وتوجيه الطوارئ وتوقع أحمال الطاقة في ظروف الطقس القاسية بالذكاء الاصطناعي | ربط بيانات الأرصاد الجوية، نموذج توقع الأحمال؛ توليد استراتيجيات الإرسال |
|
||||
| 7 | حارس إنذار وتعرف بالفيديو بالذكاء الاصطناعي للسلوكيات المخالفة في محطات الوقود | تحليل مراقبة الفيديو، اكتشاف السلوكيات المخالفة (استخدام الهاتف، التدخين، إلخ)؛ دفع الإنذارات |
|
||||
| 8 | نظام مراقبة وتحديد دقيق لتسربات خطوط أنابيب النفط والغاز الطويلة بالموجات الصوتية بالذكاء الاصطناعي | جمع بيانات مستشعرات الموجات الصوتية، نموذج كشف التسرب؛ حساب خوارزمية التحديد |
|
||||
| 9 | نظام تجميع موارد محطات الطاقة الافتراضية واتخاذ قرارات تداول الكهرباء بالذكاء الاصطناعي | ربط الموارد الموزعة، تحسين الإرسال والتجميع؛ تنفيذ استراتيجيات التداول |
|
||||
| 10 | تتبع مواقع العاملين في المناجم بالذكاء الاصطناعي وإنذار اختراق المناطق الخطرة | تحديد المواقع عبر UWB/البلوتوث، تتبع مسارات الأفراد؛ سياج إلكتروني للمناطق الخطرة |
|
||||
|
||||
## 17. الصوت والفيديو
|
||||
|
||||
تركز سيناريوهات الصوت والفيديو على إنتاج المحتوى ومعالجة الوسائط. تشمل التطبيقات الشائعة تحرير الفيديو، تركيب الكلام، توليد الترجمة النصية، ترميم الفيديو، وغيرها، لتحسين كفاءة إنتاج محتوى الصوت والفيديو وجودته.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | -------------------------------------------- | -------------------------------------------------- |
|
||||
| 1 | أداة تعرف تلقائي بالذكاء الاصطناعي للمقاطع المميزة في الفيديوهات الطويلة ومونتاج تلقائي للفيديوهات القصيرة | تحليل محتوى الفيديو، التعرف على الإطارات الرئيسية؛ مونتاج تلقائي للمقاطع المميزة |
|
||||
| 2 | مساعد فصل ذكي لضوضاء خلفية الفيديو وتحسين الصوت البشري بالذكاء الاصطناعي | نموذج فصل الصوت، إزالة ضوضاء الخلفية؛ معالجة تحسين الصوت البشري |
|
||||
| 3 | محطة عمل ترميم بدقة 4K فائقة وتلوين ذكي بالذكاء الاصطناعي للمواد القديمة | نموذج دقة فيديو فائقة، ترميم جودة المواد القديمة؛ تلوين تلقائي بالذكاء الاصطناعي |
|
||||
| 4 | نظام تحكم بالأداء العاطفي ودبلجة TTS بجودة صوت بشري حقيقي من النص | نموذج TTS متعدد النبرات، توليد مع تحكم عاطفي؛ تصدير الصوت |
|
||||
| 5 | أداة تعرف تلقائي ASR لصوت الفيديو وتوليد ترجمة نصية ثنائية اللغة | التعرف على الكلام لتوليد الترجمة النصية، ترجمة متعددة اللغات؛ تراكب الترجمة النصية ثنائية اللغة |
|
||||
| 6 | محرك المسح الذكي بالذكاء الاصطناعي للأجسام غير المرغوب فيها في إطارات الفيديو | تتبع الهدف في الفيديو، إزالة وإصلاح الأجسام؛ معالجة الاتساق بين الإطارات |
|
||||
| 7 | آلة التلحين التلقائي AIGC لموسيقى خلفية خالية من حقوق الطبع والنشر | نموذج توليد الموسيقى، التحكم في نمط المزاج والمشاعر؛ فحص حقوق الطبع والنشر |
|
||||
| 8 | برنامج استنساخ نبرة صوت شخصيات معينة وتحويل الصوت بالذكاء الاصطناعي | تدريب نموذج نبرة الصوت باستخدام عينات صوتية قليلة؛ معالجة تحويل الصوت |
|
||||
| 9 | منصة تحويل النصوص إلى لوحات قصصية وإنشاء فيديوهات المعاينة الديناميكية بالذكاء الاصطناعي | تحليل النص لإنشاء لوحات قصصية، توليد فيديو معاينة بالذكاء الاصطناعي |
|
||||
| 10 | مساعد النسخ الذكي بالذكاء الاصطناعي لتسجيلات الاجتماعات واستخراج المهام الأساسية | فصل وتفريغ صوت متعدد الأشخاص في الاجتماعات، استخراج المهام باستخدام LLM؛ وضع علامات زمنية |
|
||||
|
||||
## 18. التسويق بالذكاء الاصطناعي
|
||||
|
||||
تسعى سيناريوهات التسويق بالذكاء الاصطناعي إلى تعزيز كفاءة التسويق والإنتاج الإبداعي. تشمل التطبيقات الأساسية إنشاء النصوص، وتصميم الملصقات، وتتبع المواضيع الرائجة، وتحليل المنافسين، مما يساعد الشركات على تحقيق تسويق دقيق ونشر العلامة التجارية.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | ------------------------------------------ | ------------------------------------------------ |
|
||||
| 1 | محرك الكتابة التلقائية AIGC للمنشورات الرائجة على Xiaohongshu | إدخال الموضوع، توليد نصوص ترويجية باستخدام LLM؛ تحسين الرموز التعبيرية والوسوم |
|
||||
| 2 | أداة التنسيق الذكي لملصقات التسويق وتكييفها مع أحجام متعددة | إدخال النص، المطابقة الذكية لقوالب الملصقات والتصدير بأحجام متعددة |
|
||||
| 3 | منصة الإبداع AIGC لتصميم شعارات العلامات التجارية وبناء نظام الهوية البصرية | إدخال كلمات مفتاحية للعلامة التجارية، توليد أفكار الشعار؛ إنشاء مواصفات الهوية البصرية |
|
||||
| 4 | مساعد تتبع المواضيع الرائجة على الإنترنت وتوليد أفكار التسويق المستندة إليها | جمع بيانات المواضيع الرائجة، تحليل زوايا التسويق باستخدام LLM؛ إنشاء خطط إبداعية |
|
||||
| 5 | مراقبة العائد على الاستثمار للإعلانات في الوقت الفعلي ومدير المزايدة الذكي بميزانية الذكاء الاصطناعي | ربط بيانات منصات الإعلانات، نموذج تحليل الأداء؛ تحسين استراتيجيات المزايدة |
|
||||
| 6 | محلل استراتيجيات التسويق التنافسية بعمق ومولد التقارير الأسبوعية بالذكاء الاصطناعي | جمع وتحليل محتوى المنافسين، استخراج الاستراتيجيات؛ إنشاء تقارير أسبوعية تلقائياً |
|
||||
| 7 | توزيع الكلمات المفتاحية لمحركات البحث بالذكاء الاصطناعي والكتابة المجمعة لمقالات جذب الزيارات | تحليل الكلمات المفتاحية، إنشاء مقالات مجمعة؛ اقتراحات تحسين SEO |
|
||||
| 8 | خبير كتابة رسائل البريد الإلكتروني التسويقية المخصصة لآلاف الأشخاص بالذكاء الاصطناعي | بيانات ملف تعريف المستخدم، إنشاء محتوى مخصص؛ اختبار A/B |
|
||||
| 9 | رادار الإنذار المبكر بالذكاء الاصطناعي لأزمات الرأي العام ومراقبة السمعة عبر الإنترنت | جمع بيانات الرأي العام عبر الإنترنت، تحليل المشاعر؛ دفع تنبيهات الأزمات |
|
||||
| 10 | مساعد الإبداع AIGC لنصوص الفيديو القصير وتوجيه اللوحات القصصية | إدخال الموضوع، إنشاء النصوص واللوحات القصصية؛ إرشادات واقتراحات التصوير |
|
||||
|
||||
## 19. الذكاء المعتمد على البيانات
|
||||
|
||||
تركز سيناريوهات الذكاء المعتمد على البيانات على تحليل البيانات واستخراج القيمة. تشمل التطبيقات النموذجية الاستعلام بلغة طبيعية، والتوليد المرئي، وحوكمة البيانات، وبناء رسوم بيانية للمعلومات، مما يساعد الشركات على تحقيق دعم القرارات المبنية على البيانات.
|
||||
|
||||
| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
|
||||
| :--: | -------------------------------------- | ------------------------------------------------------------ |
|
||||
| 1 | محرك استعلام البيانات بلغة طبيعية يعتمد على Text-to-SQL | تحويل اللغة الطبيعية إلى استعلامات SQL، عرض النتائج بشكل مرئي |
|
||||
| 2 | BI محادثي: إنشاء مخططات مرئية بجملة واحدة | وصف متطلبات البيانات، إنشاء مخططات تلقائياً؛ دعم التبديل بين أنواع المخططات المتعددة |
|
||||
| 3 | أداة التعرف على جداول Excel بتحويل لقطة الشاشة بنقرة واحدة | بعد رفع لقطة الشاشة، يقوم VLM بالتعرف على بنية الجدول والبيانات؛ تصدير كملف Excel |
|
||||
| 4 | أداة سحرية للتعرف بالذكاء الاصطناعي لتحويل الصور ولقطات الشاشة إلى جداول Excel | التعرف على بنية الجدول عبر OCR للصور، تصدير البيانات كملف Excel |
|
||||
| 5 | البناء الآلي لرسوم بيانية للمعلومات من البيانات غير المتجانسة متعددة المصادر | ربط مصادر بيانات متعددة، استخراج الكيانات والعلاقات؛ التخزين في قاعدة بيانات رسوم بيانية |
|
||||
| 6 | مساعد التفسير الذكي لتقارير البيانات وتحليل الاتجاهات | رفع صورة تقرير البيانات أو إدخال البيانات، يقوم VLM بتفسير محتوى المخطط وتحليل الاتجاهات |
|
||||
| 7 | مساعد التفسير الذكي لهيكل جداول قاعدة البيانات ومولد أمثلة الاستعلامات | إدخال اسم الجدول أو وصف الحقل، يقوم LLM بإنشاء وصف إنشاء الجدول واستعلامات SQL كمثال |
|
||||
| 8 | التوافق الذكي للبيانات الرئيسية للشركة وحوكمة إلغاء التكرار بالذكاء الاصطناعي | مطابقة البيانات الرئيسية متعددة المصادر، تحديد السجلات المكررة؛ تكوين قواعد الدمج |
|
||||
| 9 | أداة تحويل مستندات متطلبات البيانات ذكيًا إلى حالات اختبار | إدخال وصف متطلبات البيانات، يقوم LLM بإنشاء سيناريوهات الاختبار وحالات التحقق |
|
||||
| 10 | مساعد الإجابة الذكي على أسئلة تعريف مقاييس البيانات | بناء قاعدة معرفية بناءً على مستندات تعريف المؤشرات، يجيب LLM على أسئلة حول تعريفات المؤشرات ومنطق الحساب وغيرها |
|
||||
@@ -0,0 +1,494 @@
|
||||
---
|
||||
title: 'استخدم Jobs to Be Done للعثور على ما يريد المستخدم إنجازه حقًا'
|
||||
description: 'مقالة تمهيدية عن Jobs to Be Done للقراء بدون خبرة سابقة. فهم أن المستخدم لا يشتري الوظائف، بل "يوظف" منتجك في سيناريو محدد لإنجاز تقدم، وتعلم استخدام JTBD لتفكيك اتجاه المنتج وأسئلة المقابلة وتعليمات AI.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'حوالي <strong>1.5 ساعة</strong>'
|
||||
</script>
|
||||
|
||||
# استخدم Jobs to Be Done للعثور على ما يريد المستخدم إنجازه حقًا
|
||||
|
||||
<a id="top-jtbd"></a>
|
||||
|
||||
## دليل هذا الفصل
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['JTBD', 'احتياجات المستخدم', 'تفكير المنتج', 'رؤى المتطلبات']"
|
||||
coreOutput="جملة JTBD واحدة تشبه الاحتياج الحقيقي"
|
||||
expectedOutput="القدرة على تضييق الفكرة الغامضة إلى سيناريو مستخدم واتجاه MVP أكثر تحديدًا"
|
||||
>
|
||||
|
||||
العديد من الأشخاص عند بداية صنع المنتج، الخطأ الأكثر شيوعًا هو التركيز بالكامل على "ما الوظائف التي سأصنعها". ترى الآخرين لديهم تصنيف ذكي، فتريد إضافته؛ ترى الآخرين لديهم تلخيص تلقائي، فتريد توصيله؛ ترى الآخرين صنعوا Agent ووسائط متعددة وسير عمل، فتشعر بأنك لا يجب أن تكون أقل.
|
||||
|
||||
لكن في الواقع، نادرًا ما يقرر المستخدم استخدام منتج لأن "اسم الوظيفة رائع". هم في لحظة محددة، يريدون دفع شيء ما خطوة إلى الأمام، فيقومون مؤقتًا بـ "توظيف" أداة أو خدمة أو حتى شخص، لمساعدتهم في إكمال هذه الخطوة.
|
||||
|
||||
هذا بالضبط ما يريد إطار **Jobs to Be Done (JTBD)** تذكيرنا به: **المستخدم لا يشتري الوظائف نفسها، بل يوظف نوعًا من الحلول لمساعدة نفسه في إنجاز تقدم.**
|
||||
|
||||
هذه المقالة ستأخذك بلغة مباشرة قدر الإمكان، من الصفر لفهم JTBD، وتحويله إلى أداة تحليل يمكنك استخدامها مباشرة عند صنع تطبيقات AI.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info الحد الأدنى من SOP
|
||||
**الهدف**: بعد القراءة، ستكون أكثر وضوحًا حول كيفية تضييق فكرة غامضة إلى احتياج بسيناريو مستخدم حقيقي، بدلاً من الاحتفاظ فقط بمجموعة من أسماء الوظائف في ذهنك.
|
||||
|
||||
**خطوات العمل**: اكتب فكرة غامضة واحدة، ابحث عن 3 مستخدمين محتملين وتحدث معهم عن "كيف تعاملوا مع الأمر آخر مرة"، ثم نظّمها في جملة JTBD واحدة.
|
||||
|
||||
**النتيجة**: ستحصل على فرضية احتياج أوضح، وتعرف ما يجب حله أولاً في النسخة الأولى.
|
||||
|
||||
**روابط سريعة**: [ما هو JTBD](#jtbd-what) · [صيغة الجملة الواحدة](#jtbd-formula) · [كيف يساعدك AI](#jtbd-ai)
|
||||
:::
|
||||
|
||||
## ما ستتعلمه في هذا الفصل
|
||||
|
||||
1. ما هو Jobs to Be Done، ولماذا هو أقرب إلى الاحتياجات الحقيقية من "عصف الوظائف"
|
||||
2. كيف نفرق بين "الوظيفة التي يقول المستخدم أنه يريدها" و"ما يريد المستخدم إنجازه حقًا"
|
||||
3. كيف تستخدم قالبًا بسيطًا لتفكيك فكرة غامضة إلى سيناريو ومحفز وعقبة ومعيار نجاح
|
||||
4. كيفية استخدام JTBD في منتجات AI وأسئلة المقابلة وتنظيم التعليمات
|
||||
|
||||
<a id="jtbd-what"></a>
|
||||
## [1. ما هو Jobs to Be Done](#top-jtbd)
|
||||
|
||||
يُختصر Jobs to Be Done غالبًا بـ **JTBD**. الفكرة الأساسية وراءه مرتبطة بالتعبير الكلاسيكي الذي روجته فرقة Clayton Christensen: **المستخدمون سيوظفون منتجًا معينًا لإنجاز مهمة.**
|
||||
|
||||
"المهمة" هنا ليست إجراءً سطحيًا في قائمة المهام، بل نوع من **التقدم** يأمل المستخدم أن يحدث في حالته. مثلاً:
|
||||
|
||||
- ليس "أريد أداة AI لمحاضر الاجتماعات"، بل "أريد خلال 10 دقائق بعد الاجتماع ترتيب النقاط الرئيسية والمهام والمسؤولين بوضوح، بدلاً من الاعتماد على الذاكرة لاستكمال الملاحظات"
|
||||
- ليس "أريد تطبيقًا لتتبع المصاريف"، بل "أريد أن أعرف أين يذهب مالي حقًا، حتى لا أشعر بالقلق في نهاية الشهر"
|
||||
- ليس "أريد مُحسّنًا للسيرة الذاتية"، بل "أريد تقديم سيرة ذاتية لائقة بثقة أكبر، ولا أريد الشك في كل مرة أقدم فيها أن كتابتي سيئة للغاية"
|
||||
|
||||
لذا، **JTBD لا يركز على شكل المنتج، بل على سبب احتياج المستخدم له في هذه اللحظة.**
|
||||
|
||||
هذا هو السبب أيضًا في أن العديد من المنتجات التي تبدو مختلفة تتنافس في الواقع على نفس الوظيفة. المستخدم يريد "ألا يكون الطريق إلى العمل مملًا"، والأشياء القابلة للتسكين قد تكون فيديوهات قصيرة أو بودكاست أو ألعاب أو دردشة أو حتى الغفوة. المستخدم يريد "فهم ملف PDF طويل بسرعة"، والأشياء القابلة للتسكين قد تكون أداة تلخيص AI أو متدرب أو زميل أو القراءة بصعوبة بنفسه أو عدم القراءة أبدًا.
|
||||
|
||||
بمجرد أن تنظر إلى المشكلة بهذه الزاوية، ستكتشف أن منافسك الحقيقي غالبًا ليس "تطبيقًا آخر يشبهك"، بل **جميع البدائل المقبولة للمستخدم حاليًا**.
|
||||
|
||||
## 2. ما الفرق بين JTBD وصورة المستخدم وقائمة الوظائف
|
||||
|
||||
العديد من المبتدئين عند بداية تحليل المتطلبات، يكتبون أولاً صورة المستخدم: 25 سنة، أنثى، مدينة من الدرجة الأولى، موظفة مكتبية، تحب أدوات الكفاءة، مستعدة لتجربة منتجات جديدة. هذه المعلومات لا يمكن القول إنها غير مفيدة تمامًا، لكنها عادةً **لا تكفي لتفسير سبب اتخاذ الشخص إجراءً في هذه اللحظة.**
|
||||
|
||||
JTBD يهتم أكثر بالأسئلة التالية:
|
||||
|
||||
- في أي سيناريو قرر البحث عن حل
|
||||
- ما الذي تعثر فيه بالضبط في ذلك الوقت
|
||||
- ما الشيء الذي يريد دفعه إلى الخطوة التالية
|
||||
- بأي طريقة غير فعالة يتدبر الأمر حاليًا
|
||||
- إذا تم حل الأمر جيدًا، أي نتيجة ستجعله يشعر أن "الأمر يستحق"
|
||||
|
||||
بعبارة أخرى، **صورة المستخدم أشبه بـ "من هذا الشخص تقريبًا"، بينما JTBD أشبه بـ "ما الذي يريد هذا الشخص إنجازه بالضبط الآن".**
|
||||
|
||||
وبالمثل، قائمة الوظائف أيضًا تضلل الناس بسهولة. المستخدم يقول "أريد التصدير إلى Word" و"أريد إعادة كتابة AI" و"أريد الإدخال الصوتي"، كلها تعبيرات سطحية. JTBD سيستمر في السؤال:
|
||||
|
||||
- لماذا تحتاج إلى التصدير إلى Word الآن، وليس PDF؟
|
||||
- تريد إعادة الكتابة، هل لأن الأسلوب سيء، أم لأنك تحتاج إلى التكيف مع جماهير مختلفة؟
|
||||
- تريد الإدخال الصوتي، هل لأنك كسول عن الكتابة، أم لأنك غالبًا ما تمشي أو تقود أو تسجل فورًا بعد الاجتماع؟
|
||||
|
||||
في كثير من الأحيان، **الوظيفة هي مجرد ترجمة مؤقتة للوظيفة**. إذا جمعت الوظائف فقط، فمن السهل أن تصنع منتجًا "يضيف كل ما يقوله المستخدم"؛ لكن إذا استطعت رؤية الوظيفة وراء الوظائف، ستكون لديك فرصة أكبر لصنع حل سلس حقًا وتنافسي حقًا.
|
||||
|
||||
## 3. مثال يمكن حتى للمبتدئين فهمه
|
||||
|
||||
لا تستعجل في التفكير في منتجات AI معقدة، لنبدأ بمثال من الحياة.
|
||||
|
||||
لنفترض أن شخصًا لا يلحق بتناول الفطور قبل الخروج في الصباح، فيشتري غالبًا شطيرة وقهوة عند مدخل المترو. ظاهريًا، هو "يشتري" الفطور؛ لكن بالنظر إليه من منظور JTBD، ما يريد إنجازه حقًا قد يكون:
|
||||
|
||||
- في صباحات متسرعة، حل وجبة بأقل جهد ذهني
|
||||
- ألا يجوع بشكل فظيع قبل الوصول إلى الشركة
|
||||
- ألا يعطل إيقاع التنقل بسبب تناول الفطور
|
||||
|
||||
في هذه اللحظة، ما يوظفه المستخدم ليس "شطيرة من علامة تجارية ثابتة"، بل حل يمكنه دفع صباحه بسلاسة. إذا كان المتجر المجاور أسرع وأقرب وأكثر استقرارًا، فقد يستبدل خياره فورًا.
|
||||
|
||||
نقل هذا المنطق إلى منتجات AI يكون أكثر وضوحًا.
|
||||
|
||||
مثلاً، إذا كنت تريد صنع "أداة AI لمحاضر الاجتماعات". إذا توقفت عند مستوى الوظائف فقط، فمن السهل أن تبدأ في التفكير:
|
||||
|
||||
- هل يتم دعم رفع الصوت
|
||||
- هل يتم توصيل فصل المتحدثين
|
||||
- هل يتم التصدير إلى Markdown
|
||||
- هل يتم توليد المهام تلقائيًا
|
||||
|
||||
كل هذا صحيح، لكنه غير كافٍ. مع JTBD اسأل طبقة أخرى، ما يريد المستخدم إنجازه حقًا قد يكون:
|
||||
|
||||
- أريد خلال 10 دقائق بعد الاجتماع، مشاركة نتائج المناقشة مع من لم يحضر
|
||||
- أريد استخراج المهام والمسؤولين والمواعيد النهائية بوضوح، بدلاً من جعل الفريق يتعاون بالذاكرة
|
||||
- أريد تقليل وقت تنظيم محتوى الاجتماع المتكرر، وتوفير الجهد للقرارات والتقدم
|
||||
|
||||
بمجرد توضيح الوظيفة، ستطفو أولويات العديد من الوظائف تلقائيًا. الأهم في النسخة الأولى ربما ليس "دعم 12 تنسيق تصدير"، بل:
|
||||
|
||||
- هيكل المحضر يجب أن يكون واضحًا بما فيه الكفاية
|
||||
- استخراج المهام يجب أن يكون مستقرًا
|
||||
- مشاركة الرابط يجب أن تكون مريحة
|
||||
- نتيجة الإخراج يجب أن تجعل المستخدم يجرؤ على إعادة توجيهها للفريق مباشرة
|
||||
|
||||
هذه هي قيمة JTBD: **يساعدك على العودة من "ما القدرات التي سأجمعها" إلى "ما التقدم الذي سأساعد المستخدم على تحقيقه".**
|
||||
|
||||
## 4. قالب JTBD عملي
|
||||
|
||||
إذا كنت مبتدئًا، يمكنك ألا تحاول جعل JTBD أكاديميًا جدًا. أمسك أولاً بأهم 5 عناصر عملية فقط.
|
||||
|
||||
### 4.1 السيناريو
|
||||
|
||||
في أي لحظة وأي بيئة يتذكر المستخدم هذا المنتج؟
|
||||
|
||||
- بعد الاجتماع
|
||||
- عندما يطلب المدير مواد بشكل مفاجئ
|
||||
- في المساء عند الاستعداد لتقديم السيرة الذاتية
|
||||
- في نهاية الشهر عندما يكتشف أن المال لا يكفي مرة أخرى
|
||||
|
||||
**الاحتياجات بدون سيناريو عادةً ليست حقيقية بعد.**
|
||||
|
||||
### 4.2 المحفز
|
||||
|
||||
ما الذي جعله يقرر البحث عن حل فورًا؟
|
||||
|
||||
- أن يثقل عليه مستند طويل ولا يعرف من أين يبدأ القراءة
|
||||
- غدًا يجب تسليم المواد، واليوم يكتشف أن التنسيق فوضوي
|
||||
- للتو سأله المدير عن التقدم، ويدرك أنه لم ينظم بوضوح
|
||||
- يريد الاستمرار في التسجيل، لكن الكتابة اليدوية والنسخ والتنظيم كلها مزعجة جدًا
|
||||
|
||||
نقطة التحفيز غالبًا ما تحمل مشاعر. هذه المشاعر مهمة، لأنها تحدد سبب اتخاذ المستخدم إجراءً في هذه اللحظة.
|
||||
|
||||
### 4.3 التقدم المطلوب إنجازه
|
||||
|
||||
لا يريد فقط "القيام بإجراء"، بل يريد دفع نفسه إلى أي حالة جديدة؟
|
||||
|
||||
- من الفوضى إلى الوضوح
|
||||
- من القلق إلى الطمأنينة
|
||||
- من التأجيل إلى البدء
|
||||
- من انخفاض الكفاءة إلى السلاسة
|
||||
- من عدم القدرة على الشرح إلى القدرة على التسليم المباشر
|
||||
|
||||
في هذه الخطوة، كلمة "التقدم" مهمة جدًا. لأن الكثير من الناس لا يشترون الأدوات حقًا، بل يشترون **تغير الحالة**.
|
||||
|
||||
### 4.4 البديل الحالي
|
||||
|
||||
بدون منتجك، كيف يفعل ذلك؟
|
||||
|
||||
- نسخ ولصق يدويًا
|
||||
- استخدام Excel أو الملاحظات للتدبير
|
||||
- طلب المساعدة من زميل
|
||||
- التأجيل وعدم الفعل
|
||||
- التبديل بين عدة أدوات
|
||||
|
||||
من هو البديل، هو بيئتك التنافسية الحقيقية.
|
||||
|
||||
### 4.5 معيار النجاح
|
||||
|
||||
كيف يُعرف أن الأمر قد حُل حقًا؟
|
||||
|
||||
- الحصول على نتيجة قابلة للمشاركة خلال 10 دقائق
|
||||
- عدم الحاجة إلى تعديل كبير قبل الإرسال للآخرين
|
||||
- عدم نسيان العناصر أو الأخطاء أو المهام بسهولة
|
||||
- معرفة الخطوة التالية من أول استخدام
|
||||
|
||||
إذا لم تستطع حتى توضيح "كيف يحكم المستخدم على ما إذا كان الأمر يستحق"، فهذا الاتجاه على الأرجح لم يتم تضييقه جيدًا بعد.
|
||||
|
||||
<a id="jtbd-formula"></a>
|
||||
## [5. صيغة الجملة الواحدة التي يمكن استخدامها مباشرة](#top-jtbd)
|
||||
|
||||
عندما تريد ترتيب اتجاه منتج، يمكنك استخدام هذه الصيغة العملية جدًا:
|
||||
|
||||
> عندما __________، أريد __________، لكي أتمكن من __________.
|
||||
> حاليًا لا يمكنني سوى __________ لإنجاز هذا الأمر بالكاد.
|
||||
|
||||
مثلاً:
|
||||
|
||||
> عندما أنتهي من اجتماع مشروع مليء بالمعلومات، أريد الحصول بسرعة على محضر يتضمن المهام والمسؤولين والمواعيد النهائية، لكي أتمكن من مزامنة الفريق فورًا ودفع التنفيذ.
|
||||
> حاليًا لا يمكنني سوى الاعتماد على ذاكرتي وتصفح سجل الدردشة والتنظيم اليدوي لإنجاز هذا الأمر بالكاد.
|
||||
|
||||
مثال آخر:
|
||||
|
||||
> عندما أستعد لتقديم وظيفة جديدة، أريد تحويل خبراتي السابقة بسرعة إلى نسخة تتناسب أكثر مع الوظيفة، لكي أتمكن من تقديم سيرة ذاتية لائقة بثقة أكبر.
|
||||
> حاليًا لا يمكنني سوى نسخ سيرتي القديمة مرارًا وتعديل الصياغة يدويًا، حتى أصبح أقل ثقة مع كل تعديل.
|
||||
|
||||
إذا استطعت كتابة جملة واحدة بهذه الدرجة من الوضوح، فتصميم الصفحات وتصميم التعليمات والحكم على أولويات الوظائف سيصبح أسهل بكثير.
|
||||
|
||||
## 6. عند صنع منتجات AI، ثلاث طبقات من الوظائف التي يجب مراعاتها بشكل خاص
|
||||
|
||||
العديد من منتجات AI تبدو قوية جدًا في العرض التوضيحي للوظائف، لكنها لا تحافظ على المستخدمين بعد الإطلاق الفعلي، والسبب الشائع هو أنها حلت الإجراء السطحي فقط ولم تحل الوظيفة الأعمق.
|
||||
|
||||
يمكنك تقسيم الوظيفة تقريبًا إلى ثلاث طبقات:
|
||||
|
||||
### 6.1 طبقة الوظائف
|
||||
|
||||
ما هي المهمة السطحية؟
|
||||
|
||||
- تلخيص المستندات
|
||||
- إعادة كتابة النصوص
|
||||
- استخراج المهام
|
||||
- توليد الصور
|
||||
|
||||
هذه هي الطبقة الأسهل للمستخدم في التعبير عنها شفهيًا.
|
||||
|
||||
### 6.2 الطبقة العاطفية
|
||||
|
||||
ما الذي يريد المستخدم تقليله من عدم الراحة، أو ما الشعور الذي يريد الحصول عليه؟
|
||||
|
||||
- لا يريد أن يذعر هكذا
|
||||
- لا يريد أن يبدو غير محترف
|
||||
- لا يريد البدء من الصفر في كل مرة
|
||||
- يريد شعورًا أكبر بالسيطرة
|
||||
|
||||
العديد من نوايا الدفع مرتبطة ارتباطًا وثيقًا بالطبقة العاطفية في الواقع.
|
||||
|
||||
### 6.3 الطبقة الاجتماعية
|
||||
|
||||
ما الذي يريد المستخدم أن يصبح عليه في نظر الآخرين؟
|
||||
|
||||
- أن يبدو أكثر موثوقية
|
||||
- أن يكون أكثر تنظيمًا في الفريق
|
||||
- أن يكون أكثر احترافية أمام العملاء
|
||||
- أن يكون أكثر قدرة على التعبير على منصات التواصل الاجتماعي
|
||||
|
||||
إذا صنعت الطبقة الوظيفية فقط، فمن السهل استبدال منتجك؛ لكن إذا فهمت الطبقة العاطفية والاجتماعية في نفس الوقت، فستجد قيمة لزجة حقيقية بسهولة أكبر.
|
||||
|
||||
## 7. استخدام JTBD بشكل عكسي لفرز اتجاهات المنتج
|
||||
|
||||
أحيانًا ليس لديك منتج بالفعل، بل لديك 3 إلى 5 أفكار ولا تعرف أيها تصنع. JTBD مناسب جدًا هنا للفرز.
|
||||
|
||||
يمكنك أخذ كل فكرة وسؤال نفسك 5 أسئلة:
|
||||
|
||||
1. هل السيناريو المقابل لهذه الفكرة محدد بما فيه الكفاية؟
|
||||
2. هل يستخدم المستخدم بالفعل طريقة غير فعالة لحل المشكلة الآن؟
|
||||
3. هل ألم هذه الوظيفة قوي بما فيه الكفاية، أو متكرر بما فيه الكفاية؟
|
||||
4. إذا صنعتها جيدًا، هل سيشعر المستخدم بوضوح بـ "تحسنت حالتي"؟
|
||||
5. هل يمكن في النسخة الأولى التركيز فقط على الخطوة الرئيسية لهذه الوظيفة، وصنع نسخة صغيرة لكنها مفيدة؟
|
||||
|
||||
إذا كان اتجاه ما في النهاية لا يزال يمكنك قول "يبدو مثيرًا للاهتمام" فقط، لكن لا يمكنك توضيح المحفز والبديل ومعيار النجاح، فهو على الأرجح مجرد إلهام غامض، وليس اتجاهًا ناضجًا.
|
||||
|
||||
## 8. أسئلة يمكن استخدامها مباشرة في مقابلات المستخدمين
|
||||
|
||||
العديد من الأشخاص عند القيام بالبحث يسألون: "ما الوظائف التي تريدها؟" هذا النوع من الأسئلة يحصل بسهولة على إجابات سطحية.
|
||||
|
||||
JTBD أنسب لطرح الأسئلة التالية:
|
||||
|
||||
- متى واجهت هذه المشكلة آخر مرة؟
|
||||
- ماذا كنت تفعل في ذلك الوقت، ولماذا تعثرت؟
|
||||
- كيف حللتها في النهاية؟
|
||||
- في هذه العملية، أين كان أكثر ما يزعجك وأبطأك وأقل ما يطمئنك؟
|
||||
- إذا كانت هناك أداة يمكنها مساعدتك، أي نتيجة ستجعلك تشعر أنها مفيدة حقًا؟
|
||||
- ما البدائل التي جربتها؟ ولماذا لم تكن جيدة بما فيه الكفاية؟
|
||||
|
||||
هذا النوع من الأسئلة يعيد الحوار إلى التجارب الحقيقية بدلاً من البقاء في التفضيلات المتخيلة.
|
||||
|
||||
## 9. استخدام AI لمساعدتك في تفكيك JTBD
|
||||
|
||||
JTBD نفسه ليس اختراع AI، لكن AI مناسب جدًا لمساعدتك في تنظيم وتلخيص JTBD.
|
||||
|
||||
مثلاً، إذا جمعت 5 إلى 10 تعليقات من المستخدمين، يمكنك إرسالها للنموذج وجعله يلخص وفقًا للهيكل التالي:
|
||||
|
||||
```text
|
||||
العب دور مساعد بحث المنتج.
|
||||
سأعطيك بعض الكلمات الأصلية للمستخدم، لا تعط اقتراحات وظيفية أولاً،
|
||||
بل نظم أولاً وفقًا لإطار Jobs to Be Done:
|
||||
|
||||
1. في أي سيناريو يوجد المستخدم
|
||||
2. ما هو الحدث الذي حفزه على اتخاذ إجراء
|
||||
3. ما هو التقدم الذي يريد إنجازه حقًا
|
||||
4. ما هو البديل الحالي
|
||||
5. ما هو معيار النجاح الأكثر أهمية لديه
|
||||
6. ما هي الكلمات العاطفية المتكررة في هذه التعليقات
|
||||
|
||||
أخيرًا، نظم هذه المحتويات في 3 فرضيات JTBD الأكثر استحقاقًا للتحقق أولاً.
|
||||
```
|
||||
|
||||
إذا كان لديك فكرة بالفعل، يمكنك أيضًا جعل AI يساعدك في الجولة الأولى من التضييق:
|
||||
|
||||
```text
|
||||
أريد صنع [فكرتك للمنتج].
|
||||
لا تعطني قائمة وظائف مباشرة، بل استخدم طريقة Jobs to Be Done لمساعدتي في التحليل:
|
||||
|
||||
1. أي سيناريوهات محددة قد يخدمها هذا المنتج
|
||||
2. ما هي الوظيفة الأساسية التي يريد المستخدم إنجازها في كل سيناريو
|
||||
3. ما هي البدائل الحالية
|
||||
4. أي وظيفة هي الأنسب كبداية لـ MVP ولماذا
|
||||
5. اكتب الوظيفة الموصى بها نهائيًا كجملة JTBD واضحة
|
||||
```
|
||||
|
||||
## 10. 4 أخطاء شائعة للمبتدئين
|
||||
|
||||
### 10.1 كتابة الوظيفة كاسم وظيفة
|
||||
|
||||
"تلخيص AI" و"تصنيف ذكي" و"توليد تلقائي" ليست وظائف، بل هي طرق تنفيذ محتملة فقط.
|
||||
|
||||
### 10.2 كتابة المجموعة المستهدفة بشكل واسع جدًا
|
||||
|
||||
"جميع العاملين" و"جميع الطلاب" و"جميع رواد الأعمال" عادةً ما تكون واسعة جدًا. كلما كانت أوسع، صعب عليك رؤية السيناريوهات الحقيقية.
|
||||
|
||||
### 10.3 الاستماع فقط لما يقوله المستخدم، دون النظر إلى ما يفعله
|
||||
|
||||
المستخدم سيصف ما يريده، لكن أولوياته الحقيقية غالبًا ما تكون مخفية في كيفية تدبيره للمشكلة حاليًا.
|
||||
|
||||
### 10.4 الرغبة في صنع منصة شاملة من البداية
|
||||
|
||||
الطريقة الصحيحة لاستخدام JTBD عادةً ليست "سأصنع منصة كبيرة تفعل كل شيء"، بل التركيز أولاً على خطوة رئيسية واحدة في سيناريو واحد، وصنعها مريحة جدًا.
|
||||
|
||||
## 11. ملخص
|
||||
|
||||
أكثر جانب قيم في Jobs to Be Done ليس إعطائك مصطلحًا جديدًا، بل مساعدتك في تغيير زاوية المراقبة: **لا تركز فقط على وظائف المنتج، بل ركز على ما يريد المستخدم دفذه إلى الخطوة التالية.**
|
||||
|
||||
عندما تبدأ في سؤال نفسك مرارًا:
|
||||
|
||||
- في أي سيناريو يوظف المستخدم هذا المنتج
|
||||
- أين تعثر بالضبط
|
||||
- بأي طريقة يتدبر الأمر حاليًا
|
||||
- بعد حل المشكلة، ماذا ستتغير حالته
|
||||
|
||||
ستكتشف أن العديد من الأفكار الغامضة أصبحت واضحة فجأة، وأن العديد من الوظائف الفخمة لم تعد مهمة جدًا فجأة أيضًا.
|
||||
|
||||
صنع المنتجات، خاصة منتجات AI، أكثر ما يخافه هو الانغماس في عرض القدرات منذ البداية. JTBD يمكنه سحب انتباهك إلى المكان المهم حقًا: **لماذا يحتاجك المستخدم، وما التقدم الذي تساعده في إنجازه بالضبط.**
|
||||
|
||||
<a id="jtbd-ai"></a>
|
||||
## [12. كيفية استخدام AI لمساعدتك في تطبيق JTBD](#top-jtbd)
|
||||
|
||||
JTBD ليس اختراع AI، لكن AI مناسب جدًا ليكون مساعدك البحثي ومساعد التنظيم ومساعد المقارنة في هذا الإطار. المفتاح هو: **دع AI يساعدك في التنظيم والتوسيع، بدلاً من التخمين بدلاً منك عن المستخدم.**
|
||||
|
||||
يمكنك استخدامه هكذا:
|
||||
|
||||
### 12.1 دع AI يساعدك في إعادة كتابة الفكرة الغامضة كفرضية JTBD
|
||||
|
||||
عندما يكون لديك فقط وصف غامض في ذهنك، مثل "أريد صنع أداة تساعد طلاب الجامعات في إيجاد تدريب"، يمكنك جعل AI يساعدك أولاً في تفكيكها إلى عدة وظائف محتملة:
|
||||
|
||||
```text
|
||||
لدي فكرة منتج غامضة الآن: [فكرتك]
|
||||
لا تعطني قائمة وظائف مباشرة، بل استخدم طريقة Jobs to Be Done لمساعدتي في التحليل:
|
||||
1. أي سيناريوهات محددة قد تقابلها
|
||||
2. ما هو التقدم الذي يريد المستخدم إنجازه حقًا في كل سيناريو
|
||||
3. ما هي البدائل الحالية المحتملة
|
||||
4. أي وظيفة أنسب لصنع MVP أولاً
|
||||
أخيرًا اكتب كل وظيفة كجملة JTBD واضحة.
|
||||
```
|
||||
|
||||
يمكنك حتى أن تكتب الإدخال ببساطة شديدة:
|
||||
|
||||
```text
|
||||
أريد صنع شيء يساعد طلاب الجامعات في إيجاد تدريب.
|
||||
أنا الآن لا أستطيع أن أشرح بالضبط ماذا سأصنع، ساعدني في التفكير ماذا يريد المستخدم إنجازه حقًا.
|
||||
```
|
||||
|
||||
AI قد يعطي مخرجات مفيدة مثل هذه:
|
||||
|
||||
```text
|
||||
اتجاهات JTBD المحتملة:
|
||||
|
||||
1. عندما أستعد لأول مرة لتقديم طلب تدريب، أريد أن أعرف بسرعة ما المواد التي يجب أن أعد أولاً،
|
||||
لكي لا أتأخر في التقديم بسبب الفوضى في المعلومات.
|
||||
|
||||
2. عندما أرى وظيفة تدريب، أريد أن أحكم بسرعة على ما إذا كانت تست التقديم،
|
||||
لكي لا أضيع وقتًا كثيرًا على وظائف غير مناسبة.
|
||||
|
||||
3. عندما أبدأ التقديم، أريد تحويل سيرتي الذاتية الحالية إلى نسخة تتناسب أكثر مع الوظيفة،
|
||||
لكي أتمكن من إكمال التقديم بسرعة أكبر ورفع معدل القبول.
|
||||
```
|
||||
|
||||
قيمة هذا النوع من المخرجات هي أنه سيأخذ فكرتك الواسعة جدًا ويقسمها إلى عدة اتجاهات أقرب إلى السيناريوهات الحقيقية.
|
||||
|
||||
### 12.2 دع AI يساعدك في تنظيم الكلمات الأصلية من المقابلات
|
||||
|
||||
إذا قمت بالفعل ببعض مقابلات المستخدمين، يمكنك تسليم سجلات المقابلات إلى AI وجعله يساعدك في استخلاص السيناريوهات المتكررة ونقاط التحفيز والبدائل ومعايير النجاح.
|
||||
|
||||
```text
|
||||
فيما يلي الكلمات الأصلية من 5 مستخدمين.
|
||||
لا تعط حلولاً أولاً، بل نظم وفقًا لإطار JTBD:
|
||||
1. في أي سيناريو يوجد المستخدم
|
||||
2. ما هو الحدث الذي حفزه على اتخاذ إجراء
|
||||
3. ما هو التقدم الذي يريد إنجازه حقًا
|
||||
4. ما هو البديل الحالي
|
||||
5. ما هو معيار النجاح الأكثر أهمية لديه
|
||||
6. أي المعلومات تتكرر عبر عدة مستخدمين
|
||||
أخيرًا نظم في 3 فرضيات JTBD الأكثر استحقاقًا للتحقق أولاً.
|
||||
```
|
||||
|
||||
يمكنك أيضًا كتابة إدخال بسيط جدًا هكذا:
|
||||
|
||||
```text
|
||||
سألت 3 أشخاص، قالوا تقريبًا هكذا:
|
||||
|
||||
1. في كل مرة أريد تقديم تدريب يجب أن أعدل سيرتي الذاتية من جديد، هذا مزعج جدًا.
|
||||
2. أكثر ما أخافه حقًا هو أنني لا أعرف ما إذا كانت كتابتي صحيحة.
|
||||
3. أنا الآن أطلب من الطلاب الأكبر سناً مساعدتي في المراجعة، لكن من المحرج أن أزعجهم في كل مرة.
|
||||
|
||||
ساعدني في التنظيم، ماذا يريدون إنجازه حقًا.
|
||||
```
|
||||
|
||||
AI قد يخرج:
|
||||
|
||||
```text
|
||||
نتيجة التنظيم:
|
||||
|
||||
- السيناريو المشترك: قبل تقديم طلب تدريب، يجب التعامل مع السيرة الذاتية
|
||||
- الصعوبة المشتركة: لا أعرف كيف أعدل إلى مستوى "جيد بما فيه الكفاية"
|
||||
- البديل الحالي: طلب مساعدة الطلاب الأكبر سناً في المراجعة، التعديل المتكرر بنفسه
|
||||
- JTBD المحتمل:
|
||||
عندما أستعد لتقديم تدريب، أريد أن أحكم بسرعة على ما إذا كانت سيرتي الذاتية قد وصلت إلى مستوى قابل للتقديم،
|
||||
لكي لا أبقى عالقًا في "سأعدل مرة أخرى" ولا أستطيع التقديم.
|
||||
```
|
||||
|
||||
هذا النوع من المخرجات مفيد جدًا، لأنه يساعدك على استخلاص شيء أشبه بـ "الاحتياج" من الكلمات المتفرقة.
|
||||
|
||||
### 12.3 دع AI يقوم بجولة خفيفة من البحث عبر الإنترنت
|
||||
|
||||
قبل أن تبدأ المقابلات واسعة النطاق، يمكنك جعل AI يساعدك في بعض المسح الخفيف للمعلومات الخارجية:
|
||||
|
||||
- في المنتديات العامة أو المجتمعات، كيف يشكو الناس من هذه المشكلة
|
||||
- أي طبقة من المشكلة تحلها المنتجات الموجودة أساسًا
|
||||
- ما هي البدائل الأكثر شيوعًا لدى المستخدمين
|
||||
- في التقييمات الشائعة، ما أكثر ما يرضي الناس وما أقل ما يرضيهم
|
||||
|
||||
هذا النوع من البحث لا يمكنه استبدال مقابلات المستخدمين الحقيقية، لكنه مناسب جدًا كإحماء لمرحلة Discover، لمساعدتك في بناء خريطة المشاكل أولاً.
|
||||
|
||||
إدخال بسيط يمكن أن يكون:
|
||||
|
||||
```text
|
||||
ساعدني في البحث:
|
||||
"ما هي نقاط الألم الأكثر شيوعًا عند تعديل السيرة الذاتية وتقديم طلبات التدريب لطلاب الجامعات؟"
|
||||
ركز على ما يقوله الناس بأنفسهم في المنتديات العامة ومنشورات الخبرة ومجتمعات التوظيف.
|
||||
ساعدني في تنظيم 5 مشاكل الأكثر شيوعًا.
|
||||
```
|
||||
|
||||
AI قد يخرج:
|
||||
|
||||
```text
|
||||
تنظيم نقاط الألم الشائعة:
|
||||
|
||||
1. لا أعرف ماذا أكتب في السيرة الذاتية، الخبرات قليلة جدًا
|
||||
2. لا أعرف كيف أعدل لتناسب وظائف مختلفة
|
||||
3. عدلت عدة نسخ، لكنني لا أزال غير متأكد مما إذا كانت جيدة بما فيه الكفاية
|
||||
4. لا أجد شخصًا موثوقًا لمساعدتي في المراجعة
|
||||
5. عملية التقديم معقدة، من السهل التأجيل
|
||||
```
|
||||
|
||||
هذا النوع من المخرجات لا يمكن اعتباره استنتاجًا نهائيًا، لكنه مناسب جدًا لمساعدتك في تحديد أي نوع من المشاكل يجب أن تعطي الأولوية للمقابلات عنه.
|
||||
|
||||
### 12.4 دع AI يلعب دور "الجانب المعارض"
|
||||
|
||||
في كثير من الأحيان، نكون عاطفيين جدًا تجاه أفكارنا. يمكنك جعل AI يلعب خصمًا، يضغطك لتوضيح المشكلة بشكل أفضل:
|
||||
|
||||
```text
|
||||
العب دور مستشار بحث منتجات صارم جدًا.
|
||||
فيما يلي فرضية JTBD الخاصة بي: [فرضيتك]
|
||||
انتقدها من الزوايا التالية:
|
||||
1. هل هذا السيناريو واسع جدًا
|
||||
2. هل هذه الوظيفة مكتوبة كوظيفة بدلاً من تقدم حقيقي
|
||||
3. هل البديل ضعيف جدًا
|
||||
4. هل معيار النجاح غير واضح بما فيه الكفاية
|
||||
5. ما هو الخطر الذي يحتاج أكثر إلى التحقق في هذه الفرضية
|
||||
```
|
||||
|
||||
فائدة القيام بذلك هي أنك تستطيع اكتشاف بشكل أسرع ما إذا كنت تنظر إلى الاحتياج أم فقط إلى الحل الذي يعجبك.
|
||||
|
||||
## 📚 الواجبات
|
||||
|
||||
يرجى إكمال الواجبات التالية بناءً على المحتوى أعلاه:
|
||||
|
||||
1. اختر فكرة منتج تريد صنعها مؤخرًا، واكتبها بوضوح باستخدام صيغة JTBD
|
||||
2. أكمل العناصر الخمسة لهذه الفكرة: السيناريو، المحفز، التقدم، البديل، معيار النجاح
|
||||
3. ابحث عن 3 مستخدمين محتملين، واسأل على الأقل مرة "متى واجهت هذه المشكلة آخر مرة"
|
||||
4. سلم الكلمات الأصلية للمقابلة إلى AI ونظمها في 3 فرضيات JTBD الأكثر استحقاقًا للتحقق أولاً
|
||||
|
||||
## قراءة إضافية
|
||||
|
||||
- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
|
||||
- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
|
||||
- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
|
||||
- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
|
||||
@@ -0,0 +1,589 @@
|
||||
---
|
||||
title: 'اختبار الأم: كيفية التحقق من المتطلبات من خلال مقابلات المستخدمين'
|
||||
description: 'مقالة تمهيدية لاختبار الأم موجهة للقراء بدون خبرة مسبقة. تعلم كيفية تجنب الملاحظات المجاملية، وإجراء مقابلات مستخدمين تركز على السلوكيات الحقيقية والحقائق الملموسة والمشاكل القائمة، لتحويل "يبدو جيدًا" إلى أحكام أكثر موثوقية حول المتطلبات.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'حوالي <strong>1.5 ساعة</strong>'
|
||||
</script>
|
||||
|
||||
# اختبار الأم: كيفية التحقق من المتطلبات من خلال مقابلات المستخدمين
|
||||
|
||||
<a id="top-mom"></a>
|
||||
|
||||
## مقدمة الفصل
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['مقابلات المستخدمين', 'التحقق من المتطلبات', 'أبحاث المستخدمين', 'دراسة المنتجات']"
|
||||
coreOutput="مجموعة واحدة من أسئلة المقابلة التي تكشف معلومات حقيقية"
|
||||
expectedOutput="عدم اعتبار التشجيع المجاملي من المستخدمين كتحقق، واستخدام السلوكيات الحقيقية للحكم على الاتجاه"
|
||||
>
|
||||
|
||||
الكثير من الأشخاص عندما يقومون بأول بحث عن المنتج، يعتقدون أن الأهم هو "التحدث مع شخص ما". لذلك يذهبون لسؤال الأصدقاء والزملاء وحتى أفراد العائلة:
|
||||
|
||||
- ما رأيك في هذه الفكرة؟
|
||||
- إذا كان هناك منتج مثل هذا، هل ستستخدمه؟
|
||||
- هل تبدو هذه الميزة جيدة؟
|
||||
|
||||
غالبًا ما يعطيهم الطرف الآخر ردودًا مشجعة جدًا:
|
||||
|
||||
- جيد جدًا
|
||||
- يبدو مفيدًا
|
||||
- أعتقد أنه يمكنك تجربته
|
||||
|
||||
المشكلة هي أن هذه الإجابات عادةً لا تساعدك في اتخاذ القرار. إنها تشبه المجاملة والدعم، أو رد فعل طبيعي لا يريد أن يحبطك. تعتقد أنك حصلت على "تحقق من السوق"، لكنك في الواقع جمعت فقط مجموعة من المواساة التي يصعب استخدامها في اتخاذ القرار.
|
||||
|
||||
طريقة اختبار الأم مصممة خصيصًا لحل هذه المشكلة. إنها تذكرنا: **ليس أن المستخدمين يخدعونك عمدًا، بل طريقة طرحك للأسئلة توجه بطبيعتها الشخص الآخر نحو إجابات لطيفة لكنها غير مفيدة.**
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info الحد الأدنى من الإجراءات القياسية
|
||||
**الهدف**: بعد القراءة، ستكون أكثر وضوحًا حول كيفية التحدث مع المستخدمين، حتى لا تسمع فقط "يبدو جيدًا"، بل تحصل فعلاً على معلومات تساعدك في الحكم على الاتجاه.
|
||||
|
||||
**الإجراءات**: غيّر الأسئلة الخمسة التي كنت تنوي طرحها، مع إعطاء الأولوية لأسئلة مثل "متى كانت آخر مرة حدث فيها هذا" و"كيف تعاملت معه في ذلك الوقت".
|
||||
|
||||
**النتيجة**: سيكون من الأسهل عليك التمييز بين الآراء والأدلة الحقيقية التي تدعم القرار.
|
||||
|
||||
**الكلمات المفتاحية للانتقال السريع**: [ما هو اختبار الأم](#mom-what) · [المبادئ الأساسية الثلاثة](#mom-principles) · [كيف يساعدك الذكاء الاصطناعي](#mom-ai)
|
||||
:::
|
||||
|
||||
## سوف تتعلم المحتوى التالي
|
||||
|
||||
1. ما المشكلة التي يحلها اختبار الأم حقًا، ولماذا العديد من "أبحاث المستخدمين" لا تحصل فعلاً على معلومات حقيقية
|
||||
2. المبادئ الأساسية القليلة لهذه الطريقة: اسأل أقل عن الآراء، واسأل أكثر عن السلوكيات؛ اسأل أقل عن الافتراضات، واسأل أكثر عن الحقائق
|
||||
3. كيفية تحويل سؤال يسهل الحصول على إجابات إيجابية كاذبة إلى سؤال مقابلة أكثر قيمة
|
||||
4. كيفية استخدام اختبار الأم مع JTBD والتحقق من المتطلبات وحكم MVP معًا
|
||||
|
||||
<a id="mom-what"></a>
|
||||
## [1. ما هو اختبار الأم بالضبط](#top-mom)
|
||||
|
||||
اختبار الأم يأتي من كتاب يحمل نفس الاسم لروب فيتزباتريك. اسمه يبدو وكأنه مزحة، لكنه يصيب الهدف بدقة:
|
||||
|
||||
**حتى والدتك، سيكون من الصعب عليها أن تخبرك مباشرة بأن "هذه فكرة سيئة".**
|
||||
|
||||
السبب ليس أنها غير صادقة، بل:
|
||||
|
||||
- هي لا تريد أن تؤذيك
|
||||
- ستشجعك بشكل لا إرادي
|
||||
- من السهل عليها أن تجيب وفقًا لطريقة تعبيرك
|
||||
|
||||
في الواقع، ليس فقط الأمهات، بل الأصدقاء والزملاء وزملاء الدراسة السابقين، وحتى الكثير من الغرباء، عندما يواجهون فكرة منتجك، غالبًا ما يعطون "ملاحظات إيجابية" مماثلة. هذا لا يعني أن الطلب موجود فعلاً، بل يعني فقط أنك صغت السؤال بطريقة يسهل الحصول على إجابات لطيفة.
|
||||
|
||||
لذلك، النقطة المهمة في اختبار الأم ليست أبدًا "لا تسأل والدتك"، بل:
|
||||
|
||||
**لا تصغ سؤالك بطريقة يجيب فيها أي شخص وفقًا لما تريده.**
|
||||
|
||||
ما تريد هذه الطريقة تعليمه حقًا هو كيفية الحصول من خلال المحادثة على معلومات أقرب إلى المتطلبات الحقيقية، بدلاً من جمع مجموعة من التعليقات التي تجعلك تشعر بالرضا.
|
||||
|
||||
## 2. ما هي المشكلة الأساسية التي يحلها
|
||||
|
||||
اختبار الأم يحل بشكل أساسي وهمًا معرفيًا شائعًا جدًا:
|
||||
|
||||
**اعتبار الملاحظات الإيجابية المجاملية كمتطلبات حقيقية.**
|
||||
|
||||
على سبيل المثال، إذا سألت:
|
||||
|
||||
- ما رأيك في فكرة هذا التطبيق؟
|
||||
- إذا صنعت أداة بالذكاء الاصطناعي تساعدك في كتابة سيرتك الذاتية، هل ستستخدمها؟
|
||||
- هل هذه الميزة ذات قيمة؟
|
||||
|
||||
الخاصية المشتركة لهذه الأسئلة هي:
|
||||
|
||||
- أنها جميعًا تسأل عن "الآراء"
|
||||
- أنها جميعًا تحمل تلميحًا
|
||||
- أنها جميعًا تتحدث عن مستقبل لم يحدث بعد
|
||||
|
||||
وإجابات الناس عن "الآراء" و"الافتراضات المستقبلية" عادةً غير مستقرة. الكثير من الأشخاص يبالغون في تقدير اهتمامهم، يبالغون في تقدير قدرتهم على التنفيذ، ويبالغون في تقدير رغبتهم المستقبلية في الشراء.
|
||||
|
||||
لذلك يذكرك اختبار الأم:
|
||||
|
||||
- لا تثق كثيرًا في تقييم الآخرين لفكرتك
|
||||
- لا تثق كثيرًا في توقعات الآخرين للسلوك المستقبلي
|
||||
- حاول العودة إلى السلوكيات الحقيقية التي حدثت بالفعل للمستخدمين
|
||||
|
||||
لأنه مقارنة بـ "هل ستستخدم"، "كيف تعاملت مع هذه المشكلة في المرة الأخيرة" غالبًا ما يكون أقرب إلى الحقيقة.
|
||||
|
||||
<a id="mom-principles"></a>
|
||||
## [3. المبادئ الأساسية الثلاثة](#top-mom)
|
||||
|
||||
إذا كنت تريد فقط تذكر الأجزاء الأهم أولاً، يمكنك البدء بالمبادئ الثلاثة التالية.
|
||||
|
||||
### 3.1 تحدث أقل عن فكرتك، وتحدث أكثر عن التجارب الحقيقية السابقة للمستخدم
|
||||
|
||||
العديد من المقابلات غير الفعالة تبدأ بشرح الحل الخاص بك، وشرح مدى حماسك، وشرح المنتج الذي تخطط لصنعه. المشكلة هي أنه بمجرد أن تتحدث كثيرًا، يتحول الطرف الآخر بسهولة إلى حالة "مساعدتك" و"تشجيعك".
|
||||
|
||||
في المقابل، الطريقة الأفضل هي التركيز على تجارب الطرف الآخر:
|
||||
|
||||
- متى كانت آخر مرة واجهت فيها هذه المشكلة؟
|
||||
- ماذا كنت تفعل في ذلك الوقت؟
|
||||
- كيف تعاملت معها في النهاية؟
|
||||
- أي خطوة كانت الأكثر إزعاجًا؟
|
||||
|
||||
ستجد أن هذه الأسئلة تعيد المحادثة بشكل أكثر طبيعية إلى الواقع، بدلاً من البقاء في التفضيلات المتخيلة.
|
||||
|
||||
### 3.2 اسأل أقل عن الآراء المجردة، واسأل أكثر عن الحقائق الملموسة
|
||||
|
||||
"أعتقد أن هذه الميزة جيدة" "يبدو جيدًا" "يبدو مفيدًا بعض الشيء"، هذه التعبيرات مجردة جدًا ويصعب توجيه قرارات المنتج.
|
||||
|
||||
المعلومات الأكثر قيمة عادةً تبدو هكذا:
|
||||
|
||||
- الأسبوع الماضى قضيت ساعتين في التعامل مع هذه المشكلة
|
||||
- أنا أستخدم Excel و WeChat للتغلب عليها
|
||||
- الشهر الماضى أنفقت المال بالفعل على أداة مشابهة
|
||||
- أكثر ما أخشاه هو ارتكاب الخطأ، وليس البطء
|
||||
|
||||
هذه هي المعلومات الحقيقية التي تساعدك في الحكم على قوة المشكلة وتكرارها وإمكانية الدفع.
|
||||
|
||||
### 3.3 اسأل أقل عن الحل الذي يريده المستخدم، وانظر أكثر في كيفية حل المشكلة حاليًا
|
||||
|
||||
المستخدمون جيدون في وصف مشاكلهم، لكنهم ليسوا بالضرورة جيدين في تصميم الحلول.
|
||||
|
||||
إذا سألت:
|
||||
|
||||
- هل تريد ذكاءً اصطناعيًا يساعدك تلقائيًا في هذا؟
|
||||
- هل تعتقد أن إضافة ميزة ذكية ستساعد؟
|
||||
|
||||
ما تحصل عليه عادةً هو موقف غامض تجاه حل معين، وليس الطلب نفسه.
|
||||
|
||||
الأسئلة الأفضل هي:
|
||||
|
||||
- ما الطريقة التي تستخدمها حاليًا للتعامل مع هذه المشكلة؟
|
||||
- لماذا اخترت هذه الطريقة؟
|
||||
- ما الذي لا يكون جيدًا بما فيه الكفاية فيها؟
|
||||
|
||||
رؤية البدائل الحالية غالبًا ما تكون أهم من السؤال المباشر "ماذا تريد".
|
||||
|
||||
## 4. لماذا يعطي الناس دائمًا إجابات لطيفة لكنها غير مفيدة
|
||||
|
||||
إذا كنت تستطيع فهم هذا الأمر، ستقل أخطاء الحكم كثيرًا عند إجراء المقابلات.
|
||||
|
||||
### 4.1 الناس يحافظون على الأدب بشكل لا إرادي
|
||||
|
||||
خاصة عندما يكون لدى محدثك علاقة بك، سيكون من الصعب عليه أن يقول مباشرة:
|
||||
|
||||
- هذا الاتجاه لا يبدو جيدًا
|
||||
- أنا لن أستخدمه أبدًا
|
||||
- هذه المشكلة ليست مهمة جدًا بالنسبة لي
|
||||
|
||||
سيقول على الأرجح "جيد" "يمكن تجربته عندما تتاح الفرصة".
|
||||
|
||||
### 4.2 الناس يبالغون في تقدير أنفسهم المستقبلية
|
||||
|
||||
الكثير من الناس يؤمنون بصدق أنهم في المستقبل سيكونون:
|
||||
|
||||
- أكثر انضباطًا
|
||||
- أكثر استعدادًا للتعلم
|
||||
- أكثر استعدادًا للدفع
|
||||
- أكثر استعدادًا لتجربة أدوات جديدة
|
||||
|
||||
لذلك جملة "إذا كان متاحًا فأعتقد أنني سأستخدمه" غالبًا لا تساوي الاستخدام الفعلي في المستقبل.
|
||||
|
||||
### 4.3 طريقة طرحك للأسئلة توجه الإجابات نفسها
|
||||
|
||||
عندما تسأل:
|
||||
|
||||
- هل فكرتي جيدة؟
|
||||
- هل هذه الميزة مفيدة جدًا بالنسبة لك؟
|
||||
|
||||
أنت في الواقع تضع "الإجابة الصحيحة" سرًا في السؤال.
|
||||
|
||||
هذا هو السبب في أن اختبار الأم يؤكد بشكل خاص: **لا تحول المقابلة إلى بحث عن الموافقة.**
|
||||
|
||||
## 5. مقارنة مباشرة: أي الأسئلة تفشل بسهولة وأيها أكثر قيمة
|
||||
|
||||
هذه المقارنات يستخدمها كل مبتدئ تقريبًا.
|
||||
|
||||
| الأسئلة التي تفشل بسهولة | الأسئلة الأكثر قيمة |
|
||||
| --- | --- |
|
||||
| ما رأيك في فكرتي؟ | متى كانت آخر مرة واجهت فيها هذه المشكلة؟ |
|
||||
| إذا كان هناك هذا المنتج هل ستستخدمه؟ | كيف تتعامل مع هذا الأمر حاليًا؟ |
|
||||
| هل أنت مستعد للدفع مقابل هذه الميزة؟ | هل أنفقت المال على هذه المشكلة في المرة السابقة؟ على ماذا؟ |
|
||||
| هل تعتقد أن هذه الميزة مهمة؟ | أي خطوة في هذه العملية هي الأكثر إزعاجًا والأبطأ والأقل راحة؟ |
|
||||
| هل تريد ذكاءً اصطناعيًا يساعدك تلقائيًا؟ | لماذا لم تجد حلاً أفضل حتى الآن؟ |
|
||||
|
||||
ما هو مهم في هذا الجدول ليس الجمل المحددة، بل الاتجاه وراءها:
|
||||
|
||||
- من الآراء إلى الحقائق
|
||||
- من المستقبل إلى الماضي
|
||||
- من حلولك إلى مشاكل المستخدم
|
||||
|
||||
## 6. إيقاع مقابلة يمكن استخدامه حتى من قبل المبتدئين
|
||||
|
||||
إذا كنت تريد أن تذهب للتحدث مع شخص ما الآن، يمكنك اتباع هذا التسلسل مباشرة.
|
||||
|
||||
### 6.1 الافتتاح: اشرح أنك تتعلم، وليس تبيع
|
||||
|
||||
على سبيل المثال:
|
||||
|
||||
> أنا أدرس مؤخرًا كيف يتعامل الناس مع هذا النوع من المشاكل، وأريد أن أفهم الوضع الحقيقي أولاً، أنا لست هنا لبيع شيء.
|
||||
|
||||
هذا التعبير يجعل من الأسهل على الطرف الآخر التخلي عن العبء النفسي "يجب أن أعطيك ملاحظات إيجابية".
|
||||
|
||||
### 6.2 ابدأ من آخر تجربة حقيقية
|
||||
|
||||
يمكنك البدء بأسئلة من هذا النوع:
|
||||
|
||||
- متى كانت آخر مرة واجهت فيها هذه المشكلة؟
|
||||
- ماذا حدث في ذلك الوقت؟
|
||||
- ما كان رد فعلك الأول وكيف تعاملت معه؟
|
||||
|
||||
بمجرد أن تدخل المحادثة في أحداث محددة، تتحسن جودة المعلومات عادةً بشكل ملحوظ.
|
||||
|
||||
### 6.3 اطرح أسئلة متابعة حول السلوك والتكلفة والبدائل
|
||||
|
||||
استمر في السؤال:
|
||||
|
||||
- ما الطريقة التي تستخدمها حاليًا للحل؟
|
||||
- ما أكثر شيء غير مريح في هذه الطريقة؟
|
||||
- كم من الوقت أو المال أو الجهد أنفقت على هذا؟
|
||||
- هل جربت طرقًا أخرى؟ لماذا لم تستمر في استخدامها؟
|
||||
|
||||
### 6.4 أخيرًا احكم على الألم والأولوية
|
||||
|
||||
لا تحتاج إلى السؤال مباشرة "هل يؤلمك"، يمكنك الحكم من التفاصيل:
|
||||
|
||||
- هل يواجه هذا كثيرًا
|
||||
- هل يتخذ بالفعل إجراءات نشطة للتعويض
|
||||
- هل هو مستعد بالفعل لدفع التكاليف من أجل هذا
|
||||
- هل يُظهر مشاعر واضحة عند الحديث عن هذا الأمر
|
||||
|
||||
كل هذه أكثر فائدة من سؤال "هل هذه نقطة ألم بالنسبة لك".
|
||||
|
||||
## 7. مثال أكثر اكتمالاً
|
||||
|
||||
لنفترض أنك تريد صناعة منتج "ذكاء اصطناعي يساعد طلاب الجامعات في تحسين سيرهم الذاتية".
|
||||
|
||||
### طريقة خاطئة
|
||||
|
||||
تذهب لسؤال زميل:
|
||||
|
||||
> أريد صناعة أداة ذكاء اصطناعي لتحسين السيرة الذاتية، ما رأيك؟
|
||||
> إذا كانت تستطيع تعديل السيرة الذاتية تلقائيًا وفقًا للوظيفة، هل ستستخدمها؟
|
||||
|
||||
في هذه الحالة، سيقول الطرف الآخر على الأرجح:
|
||||
|
||||
- يبدو جيدًا
|
||||
- أعتقد أنه سيكون مفيدًا
|
||||
- إذا كان مجانيًا سأجربه
|
||||
|
||||
هذه الإجابات لا تساعدك تقريبًا في الحكم على مدى قوة الطلب.
|
||||
|
||||
### طريقة أفضل
|
||||
|
||||
يمكنك التغيير إلى:
|
||||
|
||||
> متى كانت آخر مرة عدّلت فيها سيرتك الذاتية؟
|
||||
> لماذا عدّلتها في ذلك الوقت؟
|
||||
> كيف عدّلتها؟
|
||||
> أي خطوة كانت الأصعب؟
|
||||
> هل طلبت من أحد أن يراجعها لك؟
|
||||
> هل أنفقت المال أو الكثير من الوقت على أمر السيرة الذاتية من قبل؟
|
||||
|
||||
من خلال هذه الأسئلة، قد تحصل على معلومات مثل:
|
||||
|
||||
- الكثير من الناس لا يعرفون كيف يكتبون، بل لا يعرفون كيف يعيدون كتابة سيرتهم لتناسب وظائف مختلفة
|
||||
- أكثر ما يؤلمهم ليس التنسيق، بل "عدم معرفة الخبرات التي تستحق الكتابة"
|
||||
- يتأخرون ليس لأنهم كسالى، بل لأن تعديل السيرة الذاتية في كل مرة يستنزف طاقتهم
|
||||
- يستخدمون بالفعل نصائح الطلبة الأكبر سنًا ومواقع القوالب وأدوات الذكاء الاصطناعي ومساعدة الأصدقاء كحلول مؤقتة
|
||||
|
||||
في هذه اللحظة، تكون أقرب بكثير إلى المشكلة الحقيقية.
|
||||
|
||||
## 8. كيفية استخدام اختبار الأم و JTBD معًا
|
||||
|
||||
إذا كان JTBD يساعدك في رؤية "التقدم الذي يريد المستخدم تحقيقه"، فإن اختبار الأم يعلمك:
|
||||
|
||||
**كيف تتأكد من خلال المقابلات أن هذا العمل موجود فعلاً.**
|
||||
|
||||
يمكنك استخدام الاثنين معًا:
|
||||
|
||||
1. استخدم JTBD أولاً لافتراض عمل معين
|
||||
2. ثم استخدم طريقة اختبار الأم لسؤال المستخدمين عن آخر تجربة حقيقية لهم
|
||||
3. انظر ما إذا كان هذا العمل متكررًا وحقيقيًا ويستحق الأولوية فعلًا
|
||||
|
||||
على سبيل المثال، افتراض JTBD الخاص بك هو:
|
||||
|
||||
> عندما أستعد لتقديم طلب تدريب، أريد تعديل سيرتي الذاتية القديمة بسرعة لتتناسب مع الوظيفة، حتى أتمكن من إكمال التقديم في أقرب وقت ممكن.
|
||||
|
||||
يمكنك استخدام أسئلة بأسلوب اختبار الأم للتحقق:
|
||||
|
||||
- متى كانت آخر مرة قدمت فيها على تدريب؟
|
||||
- كيف عدّلت سيرتك الذاتية في ذلك الوقت؟
|
||||
- أي فقرة كانت الأصعب في كتابتها؟
|
||||
- بعد الانتهاء من التعديل، كيف تحكم على ما إذا كانت جيدة بما فيه الكفاية؟
|
||||
|
||||
بهذه الطريقة، تتصل الطرق:
|
||||
|
||||
- JTBD يساعدك في تعريف فرضية الطلب
|
||||
- اختبار الأم يساعدك في التحقق من الفرضية من خلال المقابلات
|
||||
|
||||
## 9. الأخطاء الأكثر شيوعًا التي يرتكبها المبتدئون عند إجراء مقابلات المستخدمين
|
||||
|
||||
### 9.1 تحويل المقابلة إلى عرض تقديمي للمنتج
|
||||
|
||||
إذا تحدثت كثيرًا عن أفكارك الخاصة، سيبدأ الطرف الآخر بسهولة في مساعدتك بدلاً من إخبارك بالوضع الحقيقي.
|
||||
|
||||
### 9.2 جميع أشخاص المقابلة من المعارف
|
||||
|
||||
المعارف ليسوا مستبعدون من التحدث معهم، لكنهم أكثر ميلاً لتشجيعك. تحتاج على الأقل إلى خلط بعض الأشخاص الأقرب إلى المستخدمين الحقيقيين، بدلاً من البحث فقط عن أشخاص يدعمونك.
|
||||
|
||||
### 9.3 متابعة سريعة للأسئلة عن الوظائف في وقت مبكر جدًا
|
||||
|
||||
إذا لم تكن قد فهمت المشكلة بعد، وبدأت في متابعة الأسئلة عن الأزرار والواجهات وتفاصيل الوظائف، فعادةً ما يكون ذلك دخولًا مبكرًا جدًا في مرحلة الحل.
|
||||
|
||||
### 9.4 اعتبار جملة "سأستخدمه" كنتيجة تحقق
|
||||
|
||||
المقابلة تساعدك على الأكثر في الحكم على الاتجاه، ولا تعني أن التحقق اكتمل. التحقق الحقيقي يعتمد في النهاية على ما إذا كان المستخدم مستعدًا لدفع تكاليف حقيقية، مثل الوقت وتكلفة التبديل وسلوك التجربة وحتى الدفع.
|
||||
|
||||
### 9.5 عدم الترتيب بعد انتهاء المقابلة
|
||||
|
||||
إذا تركتها بعد الانتهاء من التحدث، ستصبح المعلومات سريعًا انطباعات غامضة. من الأفضل الترتيب في أقرب وقت ممكن:
|
||||
|
||||
- المشاكل ذات التكرار العالي
|
||||
- الكلمات العاطفية في كلمات المستخدم الأصلية
|
||||
- البدائل الحالية
|
||||
- التكاليف المدفوعة بالفعل
|
||||
- أحكامك الجديدة الخاصة
|
||||
|
||||
## 10. قائمة أسئلة يمكن نسخها واستخدامها مباشرة
|
||||
|
||||
إذا كنت تريد البدء في أقرب وقت، إليك مجموعة من الأسئلة العامة بما فيه الكفاية.
|
||||
|
||||
### أسئلة الافتتاح
|
||||
|
||||
- متى كانت آخر مرة واجهت فيها هذه المشكلة؟
|
||||
- ماذا حدث بالتحديد في ذلك الوقت؟
|
||||
|
||||
### أسئلة السلوك
|
||||
|
||||
- كيف تعاملت معها في ذلك الوقت؟
|
||||
- لماذا اخترت هذه الطريقة؟
|
||||
|
||||
### أسئلة التكلفة
|
||||
|
||||
- كم من الوقت أو الجهد يستهلكه هذا الأمر عادةً؟
|
||||
- هل أنفقت المال من قبل لحله؟
|
||||
|
||||
### أسئلة البدائل
|
||||
|
||||
- هل جربت أدوات أو طرقًا أخرى؟
|
||||
- لماذا لم تستمر في استخدامها؟
|
||||
|
||||
### أسئلة الختام
|
||||
|
||||
- إذا واجهت نفس المشكلة في المستقبل، ما الذي تعتقد أنه يجب أن يكون عليه الحل المثالي؟
|
||||
|
||||
لاحظ أنه يمكن طرح سؤال الختام هذا، لكن من الأفضل وضعه في النهاية. لأنك تحتاج في البداية إلى الحصول على الحقائق، وليس الأمنيات.
|
||||
|
||||
## 11. ملخص
|
||||
|
||||
أهم مساهمة لاختبار الأم ليست إعطائك مجموعة من مهارات "التحدث بشكل أفضل"، بل مساعدتك في بناء طريقة حكم أكثر وضوحًا:
|
||||
|
||||
- لا تثق بسرعة في مدح الآخرين لفكرتك
|
||||
- لا تعتبر "إذا كان متاحًا سأستخدمه" طلبًا حقيقيًا
|
||||
- لا تدع المقابلة تتحول إلى بحثك عن الموافقة
|
||||
|
||||
المقابلات ذات القيمة الحقيقية يجب أن تعود قدر الإمكان إلى هذه الأشياء:
|
||||
|
||||
- آخر تجربة حقيقية للمستخدم
|
||||
- كيف يتعامل معها حاليًا
|
||||
- ما التكاليف التي دفعها بالفعل
|
||||
- في أي الأماكن يش بعدم الراحة بشكل واضح
|
||||
|
||||
عندما تبدأ في السؤال بهذه الطريقة، المعلومات التي تحصل عليها، رغم أنها قد لا تكون لطيفة جدًا في بعض الأحيان، لكنها عادةً أكثر فائدة.
|
||||
وعند صنع المنتج، **الحقيقة المفيدة أهم دائمًا من التشجيع اللطيف.**
|
||||
|
||||
<a id="mom-ai"></a>
|
||||
## [12. كيفية استخدام الذكاء الاصطناعي لمساعدتك في إجراء مقابلات المستخدمين](#top-mom)
|
||||
|
||||
اختبار الأم هو في جوهره طريقة "للتحدث مع أشخاص حقيقيين"، لذلك لا يمكن للذكاء الاصطناعي أن يحل محل المقابلات الحقيقية. لكن الذكاء الاصطناعي مناسب جدًا لمساعدتك قبل وأثناء وبعد المقابلة، خاصة في تقليل حاجز الدخول للمبتدئين.
|
||||
|
||||
### 12.1 دع الذكاء الاصطناعي يساعدك في إعادة كتابة الأسئلة "السهلة الفشل"
|
||||
|
||||
الكثير من الناس يعرفون أنه لا ينبغي لهم سؤال "ما رأيك في فكرتي"، لكن بمجرد أن يتحدثون يعودون إلى هذه الجمل. يمكنك أولاً تسليم الأسئلة التي تستعد لطرحها إلى الذكاء الاصطناعي وجعله يساعدك في إعادة كتابتها:
|
||||
|
||||
```text
|
||||
فيما يلي الأسئلة التي أريد طرحها عند إجراء مقابلات المستخدمين:
|
||||
[ألصق أسئلتك]
|
||||
|
||||
يرجى استخدام مبادئ اختبار الأم لمساعدتي في إعادة كتابتها:
|
||||
1. احذف الأسئلة الرأيية
|
||||
2. احذف الأسئلة التي تفترض المستقبل
|
||||
3. حاول تغييرها إلى أسئلة تتمحور حول السلوكيات الحقيقية السابقة والبدائل القائمة والتكاليف المدفوعة
|
||||
4. أخيرًا رتبها في قائمة من 8-10 أسئلة يمكن استخدامها مباشرة في المقابلات
|
||||
```
|
||||
|
||||
حتى الإدخال البسيط جدًا مقبول تمامًا:
|
||||
|
||||
```text
|
||||
أريد أن أسأل المستخدمين:
|
||||
1. ما رأيك في صناعة أداة ذكاء اصطناعي لتحسين السيرة الذاتية؟
|
||||
2. هل ستستخدمها؟
|
||||
3. هل أنت مستعد للدفع؟
|
||||
|
||||
يرجى مساعدتي في تغييرها إلى طريقة طرح أفضل.
|
||||
```
|
||||
|
||||
قد يكون الناتج المفيد من الذكاء الاصطناعي مثل هذا:
|
||||
|
||||
```text
|
||||
الأسئلة المعاد كتابتها:
|
||||
|
||||
1. متى كانت آخر مرة عدّلت فيها سيرتك الذاتية؟
|
||||
2. لماذا عدّلتها في ذلك الوقت؟
|
||||
3. كيف عدّلتها؟
|
||||
4. أي خطوة استغرقت أكثر وقت؟
|
||||
5. هل طلبت من أحد أن يراجعها لك؟
|
||||
6. هل أنفقت المال أو الكثير من الوقت على تعديل السيرة الذاتية من قبل؟
|
||||
```
|
||||
|
||||
هذا الناتج مفيد جدًا لأنه يحول أسئلتك الأصلية "التي تسأل عن الآراء" مباشرة إلى أسئلة "تسأل عن السلوكيات الحقيقية".
|
||||
|
||||
### 12.2 دع الذكاء الاصطناعي يساعدك في إنشاء خطط مقابلات مختلفة لكل فئة
|
||||
|
||||
نفس الاتجاه، مع مجموعات مختلفة من الناس، ستكون نقاط التركيز في المقابلة مختلفة. على سبيل المثال، الطلاب ومديري الموارد البشرية والعاملون المستقلون يهتمون بأشياء مختلفة تمامًا. يمكنك أن تطلب من الذكاء الاصطناعي إنشاء نسخة من خطة المقابلة لكل فئة:
|
||||
|
||||
- للمستخدمين الجدد، التركيز على فهم آخر تجربة حقيقية
|
||||
- للمستخدمين المكثفين، التركيز على فهم البدائل وشدة الألم
|
||||
- للمستخدمين الدافعين، التركيز على فهم ما إذا كانوا قد دفعوا تكاليف بالفعل من أجل هذا
|
||||
|
||||
بهذه الطريقة ستكون لديك إيقاع أفضل عند التحدث الفعلي، بدلاً من طرح نفس مجموعة الأسئلة على كل شخص.
|
||||
|
||||
على سبيل المثال، يمكنك الإدخال مباشرة هكذا:
|
||||
|
||||
```text
|
||||
سأتحدث مع نوعين من الأشخاص:
|
||||
1. طلاب الجامعات الذين يبحثون عن تدريب لأول مرة
|
||||
2. طلبة أكبر سنًا سبق لهم مراجعة العديد من السير الذاتية للآخرين
|
||||
|
||||
يرجى إعطائي خطة مقابلة لكل فئة، 6 أسئلة لكل منها.
|
||||
```
|
||||
|
||||
قد يكون ناتج الذكاء الاصطناعي:
|
||||
|
||||
```text
|
||||
لطلاب الجامعات:
|
||||
1. متى كانت آخر مرة قدمت فيها على تدريب؟
|
||||
2. أي خطوة كانت الأصعب في ذلك الوقت؟
|
||||
3. كيف تعرف ما إذا كانت سيرتك الذاتية يمكن تقديمها؟
|
||||
...
|
||||
|
||||
للطلبة الأكبر سنًا:
|
||||
1. متى كانت آخر مرة ساعدت فيها شخصًا في مراجعة سيرته الذاتية؟
|
||||
2. ما أكثر المشاكل وضوحًا التي تراها بشكل متكرر؟
|
||||
3. ما هي الخطوة التي يواجه فيها الطلاب الأصغر سنًا أكبر صعوبة؟
|
||||
...
|
||||
```
|
||||
|
||||
بهذه الطريقة، لا تحتاج إلى كتابة الأسئلة من الصفر، وسيكون التحضير للمقابلة أسهل بكثير.
|
||||
|
||||
### 12.3 دع الذكاء الاصطناعي يساعدك في ترتيب سجلات المقابلات
|
||||
|
||||
بعد انتهاء المقابلات، أكثر المشاكل شيوعًا ليست "عدم وجود معلومات"، بل "المعلومات مشتتة جدًا". الذكاء الاصطناعي مناسب جدًا لمساعدتك في ترتيب المحادثات المجزأة في ملاحظات منظمة:
|
||||
|
||||
```text
|
||||
فيما يلي سجلات مقابلاتي مع 3 مستخدمين.
|
||||
يرجى الترتيب من منظور اختبار الأم:
|
||||
1. أي المحتويات هي حقائق وأيها مجرد آراء
|
||||
2. ما هو آخر سلوك حقيقي للمستخدم
|
||||
3. ما هي البدائل الحالية
|
||||
4. ما هي تكاليف الوقت والمال أو الجهد التي دفعها المستخدم بالفعل
|
||||
5. أي المشاكل تم ذكرها بشكل متكرر
|
||||
6. أي العبارات تبدو إيجابية لكن الأدلة عليها غير كافية
|
||||
```
|
||||
|
||||
هذه الخطوة ذات قيمة خاصة لأنها تساعدك في فصل المحتوى "الذي يبدو جيدًا" عن المحتوى "الذي يدعم الحكم فعلاً".
|
||||
|
||||
يمكن أن يكون الإدخال البسيط:
|
||||
|
||||
```text
|
||||
هذا سجل محادثتي مع مستخدم:
|
||||
|
||||
- قالت إذا كان هناك أداة فستجربها على الأرجح
|
||||
- الأسبوع الماضي قضيت ليلة كاملة في تعديل سيرتها الذاتية
|
||||
- تعتمد حاليًا بشكل أساسي على الأصدقاء لمراجعة سيرتها
|
||||
- قالت أن أصعب شيء هو عدم معرفة ما الذي يجب تعديله حتى يكون جاهزًا للتقديم
|
||||
|
||||
يرجى مساعدتي في التمييز بين الآراء والحقائق.
|
||||
```
|
||||
|
||||
قد يكون ناتج الذكاء الاصطناعي:
|
||||
|
||||
```text
|
||||
الآراء:
|
||||
- إذا كان هناك أداة فستجربها على الأرجح
|
||||
|
||||
الحقائق:
|
||||
- الأسبوع الماضي قضيت ليلة كاملة في تعديل السيرة الذاتية
|
||||
- البديل الحالي هو طلب مساعدة الأصدقاء لمراجعتها
|
||||
- أصعب نقطة هي عدم معرفة متى تعتبر "جاهزة للتقديم"
|
||||
|
||||
النقاط التي يمكن استخدامها للحكم على المتطلبات:
|
||||
- هذه المشكلة حدثت مؤخرًا
|
||||
- المستخدم دفع بالفعل تكاليف وقت واضحة
|
||||
- الحل الحالي يعتمد على الآخرين وغير مستقر
|
||||
```
|
||||
|
||||
هذا الناتج يخبر المبتدئ بشكل حدسي: أي الكلمات يمكن استخدامها للحكم وأيها يمكن الاستماع إليها فقط.
|
||||
|
||||
### 12.4 دع الذكاء الاصطناعي يقوم بجولة خفيفة من البحث على الإنترنت أولاً
|
||||
|
||||
إذا لم تبدأ المقابلات بعد، يمكنك أن تطلب من الذكاء الاصطناعي القيام ببعض الأبحاث الخارجية الخفيفة جدًا، مثل:
|
||||
|
||||
- في المجتمعات العامة، كيف يشتكي الناس مؤخرًا من هذه المشكلة
|
||||
- ما أكثر شيء يتم انتقاده في الأدوات الحالية
|
||||
- هل دفع المستخدمون بالفعل مقابل مشاكل مشابهة
|
||||
- ما هي البدائل الموجودة في السوق
|
||||
|
||||
هذه المعلومات لا يمكنها أن تحل محل المقابلات الحقيقية، لكنها تساعدك على الدخول في الحالة بشكل أسرع ومعرفة من أين تبدأ الأسئلة.
|
||||
|
||||
على سبيل المثال، يمكن أن يكون الإدخال البسيط:
|
||||
|
||||
```text
|
||||
يرجى البحث من أجلي:
|
||||
"ما الذي يشتكي منه طلاب الجامعات أكثر شيء عند تعديل سيرهم الذاتية"
|
||||
ساعدني في ترتيب 5 شكاوى الأكثر شيوعًا، واكتبها بلغة بسيطة.
|
||||
```
|
||||
|
||||
قد يكون ناتج الذكاء الاصطناعي:
|
||||
|
||||
```text
|
||||
الشكاوى الشائعة:
|
||||
|
||||
1. لا أعرف ما الذي يجب كتابته في السيرة الذاتية
|
||||
2. يجب تعديلها لكل وظيفة، الأمر متعب جدًا
|
||||
3. عدّلت العديد من النسخ لكنني لست متأكدًا من جودتها
|
||||
4. لا يوجد أحد يعطيني ملاحظات موثوقة
|
||||
5. أشعر دائمًا أنني لست مستعدًا بعد، لذلك أؤجل باستمرار
|
||||
```
|
||||
|
||||
قيمة هذه النتيجة تكمن في أنها ستسهل عليك العثور على نقطة دخول للمقابلة.
|
||||
|
||||
### 12.5 دع الذكاء الاصطناعي يلعب دور "مدرب مراجعة المقابلات"
|
||||
|
||||
يمكنك أيضًا أن تعطي سجل مقابلة مستخدم أنجزتها للتو للذكاء الاصطناعي وجعله ينتقدك:
|
||||
|
||||
```text
|
||||
فيما يلي سجل مقابلة مستخدم قمت بها.
|
||||
يرجى مراجعتها من منظور اختبار الأم:
|
||||
1. أي الأسئلة طرحتها بشكل يشبه البحث عن الموافقة
|
||||
2. أي الأسئلة تحمل توجيهًا واضحًا
|
||||
3. أي الأماكن كان يمكن فيها متابعة السؤال عن الحقائق
|
||||
4. إذا جاءت مرة أخرى، كيف يمكن طرح هذه المحادثة بشكل أفضل
|
||||
```
|
||||
|
||||
هذا مفيد جدًا للمبتدئين، لأنك ستطور بسرعة حساسية تجاه "هل أنا أجمع الأدلة أم أجمع التشجيع".
|
||||
|
||||
## 📚 الواجبات
|
||||
|
||||
يرجى إكمال الواجبات التالية بناءً على المحتوى أعلاه:
|
||||
|
||||
1. اختر اتجاه منتج تريد صناعته مؤخرًا، واكتب أولاً 5 أسئلة "سهلة الفشل" كنت ستطرحها في الأصل
|
||||
2. أعد كتابة هذه الأسئلة الخمسة لتصبح أكثر توافقًا مع أسلوب اختبار الأم
|
||||
3. ابحث عن 3 مستخدمين محتملين، واسأل على الأقل مرة واحدة "متى كانت آخر مرة واجهت فيها هذه المشكلة"
|
||||
4. بعد انتهاء المقابلة، رتب 4 فئات من المعلومات: السلوكيات الحقيقية، البدائل، التكاليف المدفوعة، الصعوبات المتكررة
|
||||
|
||||
## قراءة موسعة
|
||||
|
||||
- [موقع اختبار الأم الرسمي](https://momtestbook.com/)
|
||||
- [روب فيتزباتريك: اختبار الأم](https://www.robfitz.com/the-mom-test/)
|
||||
@@ -0,0 +1 @@
|
||||
/Users/sanbu/Code/2025重要开源项目/easy-vibe/docs/zh-cn/stage-1/building-prototype/images
|
||||
@@ -0,0 +1,604 @@
|
||||
---
|
||||
title: 'صنع النموذج الأولي - من تحليل الأعمال إلى تنفيذ نموذج منتج متعدد الصفحات'
|
||||
description: 'تجربة الدورة الكاملة من تحليل الأعمال إلى تنفيذ نموذج منتج متعدد الصفحات. تعلم كيف تطرح أسئلة الأعمال وتحلل المتطلبات وتستخدم AI IDE لتوليد تطبيقات صفحة واحدة ومتعددة الصفحات مع تحسين واختبار النموذج الأولي.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'حوالي <strong>8 ساعات</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['ar-sa/stage-1/building-prototype'] ?? []
|
||||
</script>
|
||||
|
||||
# المستوى الثالث: صنع النموذج الأولي عمليًا
|
||||
|
||||
## دليل هذا الفصل
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['تحليل الأعمال', 'تصميم النماذج الأولية', 'البرمجة بمساعدة AI', 'تطبيقات متعددة الصفحات']" coreOutput="نموذج أولي لمنصة مواد التجارة الإلكترونية" expectedOutput="نموذج ويب تفاعلي">
|
||||
|
||||
في الفصل السابق، تعلمنا كيفية **إيجاد أفكار جيدة** — انطلاقًا من احتياجات المستخدمين، للعثور على اتجاه يرغب الناس في الدفع مقابل него. لكن إيجاد الاتجاه هو مجرد الخطوة الأولى، **التحدي الحقيقي لمدير المنتج هو: كيف تحول المتطلبات الغامضة إلى منتج قابل للاستخدام.**
|
||||
|
||||
في هذا الفصل، سنحل **مشكلة واقعية**: يلقي المدير عليك عبارة "استخدم AI لتحسين كفاءة نشر المنتجات على منصة التجارة الإلكترونية" — كيف تحولها إلى **نموذج أولي لمنتج قابل للاستخدام؟**
|
||||
|
||||
على عكس صنع لعبة الثعبان أو الآلة الحاسبة، **الأعمال الحقيقية لا يمكن بناؤها بالخيال**:
|
||||
|
||||
1. **تحديد نقطة الألم**: تحدث مع فريق التشغيل، واستخرج **نقطة الألم الحقيقية** من عبارة "تحسين الكفاءة" الغامضة
|
||||
2. **ركز على الأهم**: من بين مجموعة من المشاكل، حل **الأكثر إيلامًا أولًا**، لا تفكر في حل كل شيء دفعة واحدة
|
||||
3. **تحقق بسرعة**: استخدم AI IDE لصنع **نموذج أولي لصفحة واحدة** أولًا، ثم وسّعه إلى تطبيق متعدد الصفحات
|
||||
4. **اصنع شيئًا قابلًا للاستخدام**: سلم أخيرًا **منصة مواد تجارة إلكترونية يمكن عرضها وتشغيلها**
|
||||
|
||||
سننتقل من **صنع الألعاب إلى صنع التطبيقات**، ونتعلم **التعاطف والتفكير في الاحتياجات الحقيقية للعملاء**.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info ℹ️ ملاحظة
|
||||
قد تحتوي هذه المقالة على بعض المصطلحات التجارية، إذا لم تفهمها يمكنك سؤال AI للحصول على شرح.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'تحليل المتطلبات', description: 'من الغامض إلى المحدد' },
|
||||
{ title: 'التحقق من صفحة واحدة', description: 'تنفيذ الوظيفة الأساسية' },
|
||||
{ title: 'التوسع متعدد الصفحات', description: 'تحسين بنية التطبيق' },
|
||||
{ title: 'التحسين والتجميل', description: 'تحسين تجربة المستخدم' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. تحديد المتطلبات قبل كتابة الكود
|
||||
|
||||
في البرامج التعليمية السابقة، استخدمنا AI IDE لتوليد لعبة الثعبان وألعاب صغيرة متنوعة بسهولة، لكن هذه تُعد مجرد مشاريع ألعاب ولا يمكن تطبيقها في العمل والحياة؛ إذا أردنا أن تكون قدرات AI مفيدة حقًا للجميع، فيجب أن نجمع بين سيناريوهات الحياة والعمل في البرمجة بنمط vibe coding.
|
||||
|
||||
في الفصل السابق تعلمنا كيفية إيجاد **أفكار جيدة يرغب الناس في الدفع مقابلها**، لكن إيجاد الاتجاه هو مجرد البداية. عند صنع منتج حقيقي، ستكتشف: **هناك فجوة هائلة بين معرفة "ماذا نصنع" ومعرفة "كيف نصنع".**
|
||||
|
||||
هذه الفجوة هي **تحديد المتطلبات بشكل ملموس**.
|
||||
|
||||
على سبيل المثال، في المشاريع الصفية أو الشخصية، نبدأ غالبًا من أبسط وظيفة قابلة للتنفيذ لصنع المنتجات والتطبيقات:
|
||||
|
||||
- "اصنع لوحة Kanban، ضع المهام فيها."
|
||||
- "ساعدني في صنع أداة رسم."
|
||||
- "ساعدني في صنع برنامج لجمع الاستبيانات."
|
||||
|
||||
غالبًا ما تكون هذه مجرد أداة أو وحدة وظيفية واحدة، بل لا يمكن حتى اعتبارها مشكلة عمل واضحة. الأهم من ذلك، **هذه الأفكار غالبًا ما تكون "أنت تعتقد أنها مفيدة" وليست "المستخدم يحتاجها حقًا".**
|
||||
|
||||
في المشاريع على مستوى المؤسسات أو المشاريع الناشئة، غالبًا ما ينطلق مديرو المنتجات والمهندسون من مسألة أعمال أكبر. على سبيل المثال، يمكننا افتراض السيناريو التالي:
|
||||
|
||||
<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
|
||||
<div style="font-weight: bold; color: #303133; margin-bottom: 10px;">🛍️ سيناريو الأعمال:</div>
|
||||
<div style="color: #606266; line-height: 1.6;">
|
||||
<p>أنت مدير منتج التجارة الإلكترونية لمتجر. أعطاك المدير مسألة غامضة لكنها تمثل ضغطًا كبيرًا:</p>
|
||||
<p style="font-style: italic; margin-top: 10px;">"الجميع يستخدمون AI الآن لصنع الصور وكتابة النصوص، ويبدو الأمر بسيطًا جدًا. ساعدني في ذلك لجعل نشر المنتجات الجديدة على منصة التجارة الإلكترونية أكثر كفاءة."</p>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
في هذه اللحظة قد تفكر: "المدير يحلم مرة أخرى!"، ومع ذلك، في العمل الفعلي هذه الظاهرة المتمثلة في اتخاذ القرار بعبارة غامضة شائعة جدًا، بل أكثر تكرارًا من طلبك للشاي بالحليب أسبوعيًا. لذلك، لتكون موظفًا مؤهلاً (أو CEO لشركة ناشئة)، يجب أن نتعلم كيفية الانتقال من صنع الأدوات الشخصية إلى صنع نماذج أولية لمنتجات حقيقية.
|
||||
|
||||
بما أننا تعلمنا استخدام AI IDE، إذا فكرت مليًا، هذا المطلب بسيط جدًا في الواقع، أليس كذلك؟ فقط أعطِ AI prompt بناءً على هذا، وارمه لـ Agent وستنتهي المشكلة!
|
||||
|
||||
```
|
||||
يرجى الرجوع إلى متطلباتي xxxx،
|
||||
وساعدني في تصميم منصة مواد التجارة الإلكترونية،
|
||||
تتضمن وظائف إنشاء وإدارة مواد مثل أوصاف المنتجات والصور ومقاطع الفيديو.
|
||||
```
|
||||
|
||||
إذا حمست وأرسلت هذا المطلب مباشرة كنموذج أولي للمدير — تهانينا، مكافأة هذا الربع ستُلغى!
|
||||
|
||||
**لماذا يحدث هذا؟ هذا هو الألم الأساسي الذي يجب علينا حله:**
|
||||
|
||||
عندما تعلمنا استخدام AI IDE سابقًا، كنا نصنع **مشاريع ألعاب نستخدمها نحن** مثل لعبة الثعبان والآلة الحاسبة — وظائف بسيطة، نعرف ما نريده، ونستخدمها بأنفسنا. لكن **سيناريوهات الأعمال الحقيقية مختلفة تمامًا**:
|
||||
|
||||
- **أنت لست المستخدم**: المدير يريد "تحسين الكفاءة"، لكنك لا تعرف كيف يعمل فريق التشغيل يوميًا وأين يواجهون العقبات؛
|
||||
- **AI لا يفهم الأعمال أيضًا**: إذا أعطيت AI مطلبًا غامضًا، سيخمن بناءً على معرفته العامة، والنتيجة قد تبدو جيدة لكنها غير قابلة للاستخدام عمليًا؛
|
||||
- **الفكرة الجيدة لا تساوي منتجًا جيدًا**: قد تعتقد أن "إضافة وظيفة إنشاء AI" رائعة، لكن المستخدم قد لا يحتاجها أصلًا، أو قد يكون استخدامها أكثر إزعاجًا من الطريقة السابقة.
|
||||
|
||||
**لهذا السبب يجب أن نتعلم "من الفكرة إلى فهم المستخدم"** فقط عندما يحل إبداعك مشكلة شخص آخر حقًا، وتطرح أسئلة وتفهم الأعمال بعمق، يمكنك صنع أشياء ذات قيمة حقيقية. (الفكرة الجيدة حتى أكثر أهمية من التقنية الجيدة)
|
||||
|
||||
### 1.1 من الخيال إلى الواقع: تعلم كيف تطرح أسئلة الأعمال
|
||||
|
||||
::: info 💡 أولًا: ما هي المتطلبات؟ ما هي الأعمال؟
|
||||
|
||||
**المتطلبات** هي ما يريده المستخدم حقًا، هي المشاكل التي يواجهها ويريد حلها. مثل "يريد المدير أن أجعل نشر المنتجات أسرع"، هذا مطلب.
|
||||
|
||||
**الأعمال** هي ما يفعله المستخدم فعليًا كل يوم، طريقة عملهم. مثل ما يفعله فريق تشغيل التجارة الإلكترونية يوميًا: نشر المنتجات، تغيير الأسعار، صنع الصور، عرض البيانات... هذه كلها أعمال.
|
||||
|
||||
**لماذا نهتم بالأعمال؟**
|
||||
لأنك إذا لم تفهم الأعمال، فالأداة التي تصنعها قد تكون "تبدو جيدة لكن لا أحد يستخدمها". فقط عندما تفهم حقًا كيف يعمل المستخدم يوميًا وأين يواجه العقبات، يمكنك صنع ما يساعدهم حقًا.
|
||||
|
||||
:::
|
||||
|
||||
من أبسط منظور، يمكنك أن تسأل نفسك أولاً بضعة أسئلة:
|
||||
|
||||
- عندما يقول المدير "**كفاءة أعلى**"، ماذا يعني تحديدًا؟ هل يعني **العمل بشكل أسرع**؟ أم **إنفاق أقل**؟ أم **بيع المزيد**؟
|
||||
- كيف يتم نشر المنتجات حاليًا؟ **أين توجد العقبات**؟
|
||||
- كم **منتج جديد** يُنشر يوميًا؟ لكل منتج كم **صورة** يجب صنعها وكم **كلمة** يجب كتابتها؟
|
||||
- في العمل الحالي، **أي شيء هو الأكثر إزعاجًا** و**أقل ما تريد فعله**؟
|
||||
|
||||
لكن هذه كلها أسئلة تخمينية، يجب أن نسأل فريق أعمال التجارة الإلكترونية مباشرة، "أين تكمن صعوباتكم واهتماماتكم؟"، للحصول على إجابات أكثر دقة من خلال التواصل:
|
||||
|
||||
::: info 📋 نتائج مقابلة الأعمال الحقيقية
|
||||
|
||||
سألنا أشخاصًا يعملون في تشغيل التجارة الإلكترونية، وقالوا هذه الشكاوى:
|
||||
|
||||
**1. أشياء كثيرة جدًا ومتنوعة**
|
||||
- شخص واحد يدير عدة متاجر، لكل متجر العديد من المنتجات التي يجب التعامل معها؛
|
||||
- مشغول طوال اليوم: **نشر منتجات جديدة**، **تغيير الأسعار**، **صنع الصور**، **عرض البيانات**، شيء لم ينتهِ قبل أن يبدأ شيء آخر.
|
||||
|
||||
**2. صنع المحتوى ليس مرة واحدة بل تجربة وتكرار**
|
||||
- ابدأ أولاً باستخدام **الصور من المصنع** أو **المواد المستخدمة سابقًا** أو **الصور المرجعية من الإنترنت**، ونشر المنتجات بسرعة **للتجربة**؛
|
||||
- أنفق مبلغًا صغيرًا على الترويج، **شاهد هل هناك من يشتري**؛
|
||||
- فقط **المنتجات التي تباع جيدًا**، سيتم بذل الجهد في صنع صورها وكتابة تفاصيلها وتصوير مقاطع فيديو لها.
|
||||
|
||||
:::
|
||||
بعد مقابلة فريق الأعمال، نحن متحمسون، لأننا الآن قادرون حقًا على صنع نموذج أولي مثالي يتناسب مع الأعمال! — خطأ مرة أخرى، إذا حاولنا "إرضاء جميع المطالب دفعة واحدة"، سيكون المنتج ضخمًا جدًا ومن الصعب تنفيذه في وقت الدورة. لذلك، نحتاج إلى مزيد من التنظيم والتضييق للعثور على نقطة الألم الأساسية الحقيقية.
|
||||
|
||||
### 1.2 من التوسع إلى التضييق: تحديد نقطة الألم الأساسية والوظائف
|
||||
|
||||
::: info 💡 لماذا "التضييق"؟ ما هي "نقطة الألم"؟
|
||||
|
||||
**المشاكل كثيرة، لكن أيها نبدأ بها أولًا؟**
|
||||
قد يخبرك المستخدم بحزمة من المشاكل: A مزعج، B مزعج، C مزعج... لكن إذا حاولت حل جميع المشاكل دفعة واحدة، قد لا تحل أيًا منها بشكل جيد. لذلك يجب **التضييق** — أي اختيار **الأكثر إيلامًا والأكثر إلحاحًا والأكثر قابلية للحل** من بين مجموعة من المشاكل للبدء به.
|
||||
|
||||
**ما هي نقطة الألم؟**
|
||||
هي المشكلة المحددة التي **يزعجها المستخدم أكثر وتستهلك وقته أكثر ويريد حلها بشدة**. ليست "أعتقد أنها مفيدة"، بل شيء **يشتكو منه المستخدم يوميًا ويتألم في كل مرة يفعله**.
|
||||
|
||||
:::
|
||||
|
||||
من خلال المقابلة أعلاه، اكتشفنا أن فريق التشغيل يواجه العديد من المشاكل: انقطاع الإيقاع بسبب الأنشطة، إدارة متاجر متعددة، التنقل بين النشر/تغيير الأسعار/صنع الصور/عرض البيانات...
|
||||
|
||||
إذا حاولنا "حل جميع هذه المشاكل"، سنصنع أداة **ضخمة وشاملة لكنها غير سهلة الاستخدام**.
|
||||
|
||||
دعنا نصنف هذه المشاكل (يمكنك طلب المساعدة من AI)، هناك تقريبًا ثلاث فئات:
|
||||
|
||||
1. **مشاكل الإيقاع**: متى يتم النشر، متى يتم تعديل الأسعار؛
|
||||
2. **مشاكل الكفاءة**: كيفية إدارة متاجر ومنتجات متعددة في نفس الوقت؛
|
||||
3. **مشاكل المحتوى**: كيفية صنع صور ومنتجات تجارية بسرعة.
|
||||
|
||||
بالنسبة لدورتنا، الأنسب للبدء به هو **الفئة الثالثة: مشاكل صنع المحتوى**. لكن "صنع المحتوى بسرعة" لا يزال تجريديًا بعض الشيء، دعنا نسأل فريق الأعمال عن العقبات المحددة:
|
||||
|
||||
::: info 📋 فريق الأعمال يقول: هناك مكانان مؤلمان في صنع المحتوى
|
||||
|
||||
**الألم 1: صنع الصور والنصوص بشكل جماعي مرهق جدًا**
|
||||
- المواد متناثرة في كل مكان: القرص السحابي، سجلات WeChat، منصة الخلفية... **العثور عليها صعب**؛
|
||||
- يجب نشر العديد من المنتجات مرة واحدة، **لا يوجد وقت للإتقان واحدًا تلو الآخر**، فقط تُركب بسرعة؛
|
||||
- المتطلبات ليست عالية، **يكفي أن تكون قابلة للعرض والنشر**، لا تحتاج إلى أن تكون جميلة.
|
||||
|
||||
**الألم 2: الحلول الجيدة لا يمكن حفظها لإعادة الاستخدام**
|
||||
- العناوين والتخطيطات الجيدة التي تم صنعها سابقًا، **عندما نريد استخدامها مرة أخرى لا نجدها**؛
|
||||
- الحلول متناثرة في سجلات المحادثة وروابط المنتجات السابقة؛
|
||||
- عند الحاجة لاستخدامها يجب **البحث طويلاً ونسخ ولصق وتعديل لفترة طويلة**؛
|
||||
- ينقص أداة يمكن **الحفظ والإدارة والتطبيق المباشر**.
|
||||
|
||||
:::
|
||||
|
||||
بناءً على نقطتي الألم هاتين، سنصنع أداة بسيطة: **مساعدة فريق التشغيل في صنع الصور والنصوص بشكل جماعي، وحفظ الحلول الجيدة للاستخدام المباشر في المرة القادمة**.
|
||||
|
||||
ستقوم بفعلين فقط (يمكنك طلب المساعدة من AI للتفصيل، وتذكر حذف الوظائف بناءً على ملاحظات الأعمال باستمرار):
|
||||
|
||||
::: info الوظيفة 1: إنشاء صور ومنتجات التجارة الإلكترونية بشكل جماعي
|
||||
|
||||
**ماذا تفعل؟**
|
||||
إعطاء النظام بعض معلومات المنتج، وسيقوم تلقائيًا بإنشاء صور المنتج والنصوص القابلة للنشر على منصات التجارة الإلكترونية (مثل Douyin و Taobao).
|
||||
|
||||
**المدخلات**
|
||||
| النوع | المحتوى |
|
||||
|------|------|
|
||||
| معلومات المنتج | الاسم، الفئة، العلامة التجارية، المادة، الحجم، اللون، إلخ |
|
||||
| صور المنتج | صور بخلفية بيضاء أو صور مشاهد بسيطة |
|
||||
| صور مرجعية | لقطات شاشة لمنتجات بيعت جيدًا سابقًا أو روابط مرجعية |
|
||||
| طريقة الاستيراد | استيراد جماعي عبر Excel، أو ملء مباشر على الصفحة |
|
||||
|
||||
**المخرجات (مواد التجارة الإلكترونية المولدة)**
|
||||
- **الصورة الرئيسية للمنتج**: صورة عرض المنتج مع نقاط بيع نصية (الصورة الأولى التي يراها المستخدم عند التصفح)
|
||||
- **عنوان المنتج**: مجموعة كلمات مفتاحية يمكن البحث عنها
|
||||
- **نص نقاط البيع**: 1-2 جملة جذابة للمشترين
|
||||
- كلها **منتجات جاهزة يمكن تعديلها قليلاً ونشرها**
|
||||
|
||||
**التأثير**
|
||||
- سابقًا: كل منتج يجب البدء من الصفر لصنع الصور وكتابة النصوص
|
||||
- الآن: رمي مجموعة من المنتجات في النظام، وبعد التوليد اختر وعدّل
|
||||
|
||||
:::
|
||||
|
||||
::: info الوظيفة 2: حفظ الحلول الجيدة كقوالب
|
||||
|
||||
**المدخلات**
|
||||
| النوع | المحتوى |
|
||||
|------|------|
|
||||
| مجموعة كاملة | الصورة الرئيسية + العنوان + النص |
|
||||
|
||||
**المخرجات**
|
||||
| الوظيفة | الوصف |
|
||||
|------|------|
|
||||
| التطبيق | عند صنع منتجات جديدة، استخدم القالب للتوليد التلقائي |
|
||||
| التعديل | تعديل العنوان والنص مباشرة |
|
||||
| الإدارة | إعطاء اسم وإضافة علامات (مثل "قالب حقائب رجالية" "عنوان ترويج كبير")، للسهولة في البحث |
|
||||
|
||||
**التأثير**
|
||||
1. استيراد منتجات جديدة
|
||||
2. الاختيار: ترك النظام يولد افتراضيًا، أو **استخدام القالب الذي حفظته**
|
||||
3. النظام يطبق نمط القالب تلقائيًا ويخرج صور ونصوص جديدة
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
**مراجعة ما فعلناه للتو:**
|
||||
|
||||
1. **اسأل أولًا**: لا تبدأ بالعمل مباشرة، بل اسأل فريق التشغيل "ما الذي يزعجكم أكثر"؛
|
||||
2. **اعثر على نقطة الألم**: اكتشفنا أن أكثر ما يؤلمهم هو "صنع الصور وكتابة النصوص مرهق جدًا" و"الحلول الجيدة لا يمكن حفظها"؛
|
||||
3. **ضيق النطاق**: لا نصنع منصة شاملة، بل نفعل وظيفتين فقط: "إنشاء الصور والنصوص بشكل جماعي + حفظ القوالب".
|
||||
|
||||
**لماذا هذا مهم؟**
|
||||
|
||||
الخطأ الشائع للمبتدئين في صنع المنتجات: كلما زادت الوظائف كان ذلك أفضل. لكن ما يحتاجه المستخدم حقًا هو **حل المشكلة الأكثر إيلامًا**. صنع مجموعة من الوظائف لكنها كلها غير سهلة الاستخدام، أفضل من صنع وظيفة أو اثنتين تساعد المستخدم حقًا.
|
||||
|
||||
**جوهر تفكير المنتج والأعمال:**
|
||||
- لا تفكر "أعتقد أن المستخدم يحتاج إلى ماذا"
|
||||
- اذهب واسأل المستخدم "ماذا تفعل كل يوم؟ أين الألم؟"
|
||||
- من مجموعة من المشاكل **ضيق** إلى الأكثر إيلامًا والأكثر قابلية للحل
|
||||
- اصنع **أصغر نسخة قابلة للاستخدام** أولًا، ثم حسّن تدريجيًا
|
||||
|
||||
هذا ما يجب التفكير فيه قبل كتابة الكود. الكود مجرد أداة، **فهم المستخدم وتحديد المشكلة بدقة** هو الخطوة الأولى.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'تحليل المتطلبات', description: 'من الغامض إلى المحدد' },
|
||||
{ title: 'التحقق من صفحة واحدة', description: 'تنفيذ الوظيفة الأساسية' },
|
||||
{ title: 'التوسع متعدد الصفحات', description: 'تحسين بنية التطبيق' },
|
||||
{ title: 'التحسين والتجميل', description: 'تحسين تجربة المستخدم' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. نموذج أولي في 10 دقائق: دع AI IDE ينفذ "الوظيفة الأساسية"
|
||||
|
||||
::: info 💡 اقتراح خطة البرمجة
|
||||
إذا كنت تشعر أن IDE الحالي ليس ذكيًا بما فيه الكفاية، أو أنك استهلكت حصتك بسرعة، يمكنك شراء **خطة برمجة Plan**. راجع [هذه المقالة](../../stage-2/backend/modern-cli/) لاستخدام Claude في البرمجة.
|
||||
:::
|
||||
|
||||
التفكير جيد، لكن لا تفرط في التفكير، دعنا نتحكم في التأمل المفرط ونحاول البدء بصنع النموذج الأولي من صفحة واحدة.
|
||||
|
||||
### 2.1 الخطوة الأولى: أخبر AI بما تريده بلغة بسيطة
|
||||
|
||||
في البداية لا تسعى للغة مثالية في prompt، ابدأ من أكثر تعبير طبيعي لديك. تمامًا مثل وصف المتطلبات لزميل العمل، أخبر AI بما تريد صنعه بلغة بسيطة، ثم دع AI يساعدك في تحسينه إلى تعبير أكثر احترافية.
|
||||
|
||||
#### 2.1.1 ابدأ بالوصف الشفهي (موصى به للمبتدئين)
|
||||
|
||||
صف فكرتك بكلماتك الخاصة، حتى لو كانت خشنة لا بأس:
|
||||
|
||||
```
|
||||
أريد صنع أداة تساعد فريق تشغيل التجارة الإلكترونية في إنشاء الصور الرئيسية والنصوص للمنتجات تلقائيًا.
|
||||
فريق التشغيل يصنع الصور والنصوص يدويًا واحدًا تلو الآخر، وهذا مزعج جدًا.
|
||||
فكرتي هي: يرفعون معلومات المنتج، والنظام يولد مجموعة من المسودات تلقائيًا،
|
||||
وفريق التشغيل يختار الجيد وعدّل قليلاً ليكون جاهزًا للاستخدام.
|
||||
|
||||
ابدأ بأبسط إصدار: صفحة واحدة، على اليسار ملء معلومات المنتج،
|
||||
على اليمين عرض النتائج المولدة. يمكن رفع الصور وملء النصوص،
|
||||
بعد التوليد عرض معاينة الصورة الرئيسية والنصوص.
|
||||
```
|
||||
|
||||
بعد ذلك، أرسل هذه الفقرة إلى AI (مثل ChatGPT أو Claude)، واطلب منه مساعدتك في التوسيع. عادةً ما سيساعدك AI في إضافة تفاصيل لم تفكر فيها، وينظم أفكارك بشكل أوضح، وفي النهاية يولد prompt مناسبًا لإرساله إلى AI IDE.
|
||||
|
||||
يمكنك أن تقول لـ AI بهذه الطريقة:
|
||||
```
|
||||
ساعدني في توسيع الأفكار أعلاه، وتنظيمها في وثيقة منطق أعمال واضحة،
|
||||
ثم ولّد prompt مناسبًا لإرساله إلى AI IDE (مثل Cursor أو Trae)،
|
||||
لاستخدامه لتوليد كود نموذج أولي لتطبيق صفحة واحدة.
|
||||
```
|
||||
|
||||
ستُرجع AI وثيقة منظمة من المتطلبات و prompt المقابل. تحقق منها بنفسك، واحذف الوظائف غير الضرورية، وبعد التأكد من صحتها استخدمها لتوليد الكود.
|
||||
|
||||
فائدة هذا النهج: ما تصفه شفهيًا هو أفكارك الحقيقية، لكن قد تفوت بعض التفاصيل المهمة. عندما يساعدك AI في التوسيع، قد يسأل "هل تريد دعم الرفع الجماعي؟" وهو سؤال لم تفكر فيه، مما يساعدك في التحقق الإضافي. يمكنك اختيار الاحتفاظ أو حذف الوظائف غير العملية بناءً على الملاحظات، وتحديد prompt النسخة الأولى الذي تعطيه لـ AI من خلال التعديل المتكرر.
|
||||
|
||||
#### 2.1.2 تخطي مرحلة التوسيع: أرسل وثيقة الأعمال المنظمة مباشرة إلى AI
|
||||
|
||||
إذا كنت قد نظمت بالفعل وثيقة منطق الأعمال في الفصول السابقة (مثل وصف المتطلبات المكتوب بلغة بسيطة)، يمكنك استخدام التنسيق أدناه مباشرة لإرساله إلى AI IDE، متخطيًا خطوة توسيع AI. مناسب للحالات التي تكون فيها المتطلبات واضحة بالفعل وتريد البدء مباشرة في كتابة الكود:
|
||||
|
||||
```
|
||||
ساعدني في تنفيذ تطبيق صفحة واحدة بناءً على منطق الأعمال للتحقق من وظائف اللعب الأساسية.
|
||||
|
||||
مرجع منطق الأعمال كما يلي:
|
||||
1. مساعدة فريق التشغيل في إنشاء المسودة الأولى للصور والنصوص بشكل جماعي:
|
||||
- **المدخلات (دعم الرفع المباشر والاستيراد الجماعي للمواد):**
|
||||
- المعلومات الأساسية للمنتج: الاسم، الفئة، العلامة التجارية، المادة، الحجم، اللون، الفئة المستهدفة، إلخ؛
|
||||
- صور المنتج: صور بخلفية بيضاء / صور مشاهد بسيطة؛
|
||||
- كل توليد يدعم رفع لقطات شاشة لمنتجات ناجحة سابقًا أو روابط مرجعية إضافية؛
|
||||
- دعم الاستيراد الجماعي عبر Excel، أو الإدخال/الرفع عبر الإنترنت على الصفحة.
|
||||
- دعم تحديد ما إذا كان سيتم حفظ مواد المنتج في مكتبة المواد على الصفحة، للسهولة في الاستخدام لاحقًا
|
||||
- **المخرجات (محتوى يمكن نشره مباشرة أو نشره بعد تعديل بسيط):**
|
||||
- لكل منتج مسودة صورة رئيسية "مقبولة تحتوي على نقاط بيع أساسية"؛
|
||||
- عنوان "ببنية معقولة يحتوي على كلمات مفتاحية أساسية" + 1-2 جملة نص نقاط بيع.
|
||||
- **التغيير المتوقع في طريقة الاستخدام:**
|
||||
من البدء من الصفر لكل دفعة منتجات إلى رمي مجموعة منتجات في النظام، وأخذ المسودات المولدة للفرز والتعديل الدقيق.
|
||||
|
||||
ابدأ بالوظيفة الأولى، الوظيفة الثانية (مكتبة القوالب) ستُضاف لاحقًا.
|
||||
```
|
||||
|
||||
#### 2.1.3 طريقة المبرمج (متقدم): دع AI يساعدك في كتابة "prompt الـ prompt"
|
||||
|
||||
إذا كنت تريد تحكمًا أدق في عملية توليد الكود، يمكنك أولًا جعل AI (مثل ChatGPT) يولد prompt مخصصًا لـ AI IDE بناءً على متطلباتك:
|
||||
|
||||
```
|
||||
بناءً على الأفكار أدناه، ساعدني في كتابة prompt لـ coding Agent،
|
||||
أحتاج إلى استخدام هذا prompt لتوليد الكود.
|
||||
|
||||
[الصق وصف منطق الأعمال هنا]
|
||||
|
||||
المتطلبات:
|
||||
1. يجب أن يتضمن prompt وصفًا واضحًا لتخطيط الصفحة
|
||||
2. تحديد هياكل البيانات والمنطق التفاعلي
|
||||
3. تحديد مجموعة التقنيات (مثل React + Tailwind)
|
||||
4. قائمة نقاط الوظائف الأساسية التي يجب تنفيذها
|
||||
```
|
||||
|
||||
عادةً ما سُولد AI prompt منظمًا مشابهًا لما يلي:
|
||||
|
||||
|
||||
يمكنك تعديل هذا prompt قليلاً ثم إرساله إلى AI IDE لتوليد الكود.
|
||||
|
||||
### 2.2 الخطوة الثانية: دع AI IDE يولد الكود مباشرة
|
||||
|
||||
#### 2.2.1 التحضير: فهم العمليات الأساسية لـ AI IDE
|
||||
|
||||
إذا لم تكن معتادًا بعد على الاستخدام الأساسي لـ AI IDE (مثل Cursor و Trae و Windsurf)، نوصي بأولًا قراءة [البرنامج التعليمي الأساسي لـ IDE](/ar-sa/appendix/2-development-tools/ide-basics/) في الملحق، لمعرفة كيفية:
|
||||
- إنشاء مشروع جديد
|
||||
- التحدث مع AI Agent
|
||||
- فهم عملية توليد الكود من قبل AI
|
||||
|
||||
#### 2.2.2 ابدأ توليد الكود
|
||||
|
||||
الآن حصلت على prompt الأولي، لنأخذ أسلوب prompt الأول كمثال، ودع AI يساعدنا في توليد الكود. أولًا أنشئ نافذة ومجلدًا مقابلًا، وافتح المجلد (أنشئ مشروعًا جديدًا في عنوان المجلد المفضل لديك):
|
||||
|
||||
|
||||
|
||||
في الشريط الجانبي اختر نموذجًا تفضله (يوصى بـ gemini أو gpt أو glm أو kimi أو minimax، إلخ)، وأدخل prompt الذي حصلت عليه في الخطوة الأولى:
|
||||
|
||||
|
||||
بعد النقر على توليد، سنرى الجزء المألوف، سيقوم AI بناءً على prompt بتخطيط هيكل المشروع والملفات الضرورية وإعطاء المحتوى الأولي لكل ملف.
|
||||
|
||||
::: warning ⚠️ ملاحظة خاصة: قد يتوقف AI وينتظر تأكيدك
|
||||
أثناء عملية التوليد، غالبًا ما **يتوقف AI Agent لينتظر إدخالك أو تأكيدك**، مثل:
|
||||
- السؤال عما إذا كنت ستستمر في الخطوة التالية
|
||||
- طلب منك الضغط على Enter لتأكيد عملية معينة
|
||||
- السؤال عن اختيارك في تفصيل تقني معين
|
||||
|
||||
**إذا رأيت أن AI لا يتحرك، تحقق أولًا من واجهة المحادثة، لمعرفة ما إذا كان ينتظر ردك.** العديد من المبتدئين يعتقدون أن AI يفكر، لكنه في الواقع توقف منذ فترة وينتظرك. رد بفاعلية أو اضغط Enter، وسيستمر AI في العمل.
|
||||
:::
|
||||
|
||||
في هذه اللحظة لا تنسَ الضغط على Enter لتأكيد المعلومات (وإلا ستعلق في الانتظار، بعض AI IDE لا تواجه هذه المشكلة):
|
||||
|
||||
|
||||
إذا واجهت السيناريو التالي، هذا يعني أنه تم تشغيل خدمة محليًا، تحتاج إلى النقر على تخطي، وإلا ستعلق على هذه الواجهة (إذا لم يظهر شيء بعد اكتمال توليد الكود، تحتاج إلى قول بنشاط "ساعدني في تشغيل هذا المشروع"):
|
||||
|
||||
|
||||
::: info 💡 شرح السيناريو
|
||||
**شرح السيناريو**: أنشأت مشروع React + TypeScript باستخدام `npm create vite@latest` (easy-vibe-web)، وبعد الإنشاء سيقوم الكمبيوتر تلقائيًا بتشغيل هذه صفحة الويب "لتسهيل رؤية التأثير فورًا".
|
||||
|
||||
**الخدمة المحلية**: يمكن فهمها على أن الكمبيوتر فتح نافذة عرض صفحة ويب مؤقتة، تعمل فقط على جهازك، لا يمكن للآخرين الوصول إليها.
|
||||
|
||||
**localhost (العنوان المحلي)**: `localhost` يعني "هذا الكمبيوتر نفسه"، عندما يتصفحه المتصفح، فإنه في الواقع يزور صفحة الويب التي تعمل على جهازك.
|
||||
|
||||
**المنفذ**: يمكن فهم المنفذ على أنه رقم لتمييز خدمات الويب المختلفة التي تعمل على نفس الكمبيوتر، هذا المشروع يستخدم 5174.
|
||||
|
||||
**رابط الوصول `http://localhost:5174/`**: هذا العنوان يعني "زور صفحة الويب رقم 5174 على هذا الكمبيوتر"، افتحها في المتصفح لرؤية التأثير.
|
||||
|
||||
**شرح هذا السيناريو**: النظام أراد استخدام 5173 في الأصل، لكن هذا الرقم كان مشغولاً فتم التبديل تلقائيًا إلى 5174، هذا أمر طبيعي.
|
||||
|
||||
**دليل التشغيل**: افتح المتصفح، أدخل `http://localhost:5174/` في شريط العنوان واضغط Enter، لرؤية صفحة المشروع الحالية.
|
||||
:::
|
||||
|
||||
بعد التأكد من كل شيء، انتظر قليلاً حتى يعمل الذكاء الاصطناعي، يمكننا الحصول على النتيجة التالية:
|
||||
|
||||
|
||||
يمكننا رؤية أن هناك بالفعل رسم وظيفي أولي، لكن واجهة الواجهة الأمامية قبيحة جدًا، في هذه اللحظة يمكننا محاولة التحدث مع AI مباشرة لتحسين عرض الواجهة:
|
||||
|
||||
|
||||
بعد التحسين يمكننا الحصول على واجهة أجمل:
|
||||
|
||||
|
||||
يمكنك تعديل وظائف صفحة الويب حسب احتياجاتك، ويمكنك إرفاق لقطات شاشة والسؤال بحرية، مثل: "أنا لا أحتاج وظيفة الاستيراد الجماعي حاليًا، ساعدني في إلغائها"، "الأشياء التي يجب إدخالها على اليسار كثيرة جدًا، ساعدني في الاحتفاظ بـ xxxxx فقط". حتى يمكنك الرجوع إلى مواقع ويب ناضجة أخرى، مثل هنا يمكننا الرجوع مباشرة إلى منتج تصميم من Google كـ "مرجع" (يمكنك لصق لقطة شاشة لأي موقع ويب ناضج تحبه):
|
||||
|
||||
|
||||
أخيرًا يمكننا الحصول على:
|
||||
|
||||
|
||||
### 2.3 ماذا تفعل عند مواجهة أخطاء
|
||||
|
||||
في الممارسة الفعلية، مواجهة الأخطاء أمر حتمي، هذا طبيعي، ولا يعني أنك أخطأت في مكان ما. لا تحتاج إلى فهم الخطأ، فقط أعطِ AI "ما تراه" بالكامل.
|
||||
|
||||
طرق المعالجة الشائعة ثلاثة فقط:
|
||||
|
||||
- **الطريقة الأولى: خطأ في الصفحة أو الطرفية**
|
||||
عندما تصبح الصفحة حمراء أو شاشة بيضاء، أو تظهر كومة من النصوص الحمراء في الطرفية، فقط التقط صورة شاشة أو انسخ جميع معلومات الخطأ وأرسلها إلى AI، واطلب منه الإصلاح.
|
||||
|
||||
- **الطريقة الثانية: الوظيفة خاطئة لكن لا يوجد خطأ**
|
||||
مثل عدم استجابة الزر، أو عدم عرض البيانات، أو اختلال الأنماط، صف "ماذا يحدث الآن + ماذا تريد في الأصل" بلغة بسيطة، وأضف لقطة شاشة عند الضرورة.
|
||||
|
||||
- **الطريقة الثالثة: غير متأكد مما إذا كانت هناك مشكلة**
|
||||
يمكنك سؤال AI مباشرة: "ساعدني في فحص ما إذا كانت هناك مشاكل واضحة في هذه الوظيفة، وهل يحتاج تعديل."
|
||||
|
||||
#### 2.3.1 أسئلة شائعة للمبتدئين
|
||||
|
||||
- **س: لا أعرف أين توجد معلومات الخطأ؟**
|
||||
- ج: بشكل عام، انظر إلى كل "النصوص الحمراء". في الطرفية أو وحدة التحكم أو الصفحة، اعثر على التلميح الأحمر، حدد الكل وانسخه إلى AI.
|
||||
|
||||
- **س: ماذا أفعل إذا أصلح AI ولا يزال نفس الخطأ يظهر؟**
|
||||
- ج: هذا شائع. استمر في التقاط صورة أو نسخ أحدث معلومات الخطأ وإرسالها إليه، واطلب منه المزيد من الإصلاح بناءً على التعديل السابق.
|
||||
|
||||
- **س: هل أحتاج إلى فهم خطة إصلاح AI بالكامل؟**
|
||||
- ج: لا تحتاج إلى فهم كل شيء دفعة واحدة. يمكنك التركيز على نقطة أو نقطتين في كل مرة، بمرور الوقت ستفهم المزيد والمزيد من الكود، مثلما تتراكم مفردات اللغة الإنجليزية.
|
||||
|
||||
- **س: ماذا أفعل إذا تم التعديل عدة مرات ولم يتم حل المشكلة؟**
|
||||
- ج: يمكنك تجربة:
|
||||
- استخدام وظيفة "التراجع عن الإصدار" في IDE، والعثور على زر التراجع في محادثة الذكاء الاصطناعي، والعودة إلى إصدار يعمل وإعادة البدء؛
|
||||
- تغيير النموذج أو تعديل prompt، وجعل الظاهرة ومعلومات الخطأ أكثر تحديدًا؛
|
||||
- حزم "الكود الحالي + سجل الأخطاء + السلوك المتوقع"، وأرسلها دفعة واحدة إلى AI، واطلب منه إعادة هيكلة الجزء المشكل بالكامل.
|
||||
|
||||
## 3. التوسع من صفحة واحدة إلى تطبيق متعدد الصفحات
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'تحليل المتطلبات', description: 'من الغامض إلى المحدد' },
|
||||
{ title: 'التحقق من صفحة واحدة', description: 'تنفيذ الوظيفة الأساسية' },
|
||||
{ title: 'التوسع متعدد الصفحات', description: 'تحسين بنية التطبيق' },
|
||||
{ title: 'التحسين والتجميل', description: 'تحسين تجربة المستخدم' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
عندما يكتمل توليد منطق الوظيفة الأساسية بشكل أساسي، يمكننا توليد باقي المحتوى. على سبيل المثال، في هذه اللحظة النقر على الإعدادات أو بعض الأزرار لا فائدة منه على الإطلاق.
|
||||
|
||||
يمكنك أن تطلب من AI التحقق بناءً على متطلبات prompt الأعمال، وتوليد الأجزاء غير المولدة، أو جعل AI يكمل مباشرة الصفحات غير المنفذة، ويمكنك أيضًا تحديد صفحة معينة وطلب من AI إكمالها حتى تصبح الصفحة قابلة للنقر والوظائف تعمل بشكل طبيعي:
|
||||
|
||||
|
||||
بعد الانتظار قليلاً، يمكننا رؤية أن البرنامج قد أضاف عدة صفحات ووظائف تفاعلية على الأساس السابق:
|
||||
|
||||
|
||||
|
||||
|
||||
في هذه اللحظة تحتاج فقط إلى النقر يدويًا على كل وظيفة وزر تهتم به، والتأكد من أن التفاعل طبيعي، وإذا كانت هناك وظائف لا تعمل، يمكنك التواصل مع AI وطلب منه المساعدة في الإصلاح.
|
||||
|
||||
## 4. اجعل النموذج الأولي "يبدو احترافيًا"
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'تحليل المتطلبات', description: 'من الغامض إلى المحدد' },
|
||||
{ title: 'التحقق من صفحة واحدة', description: 'تنفيذ الوظيفة الأساسية' },
|
||||
{ title: 'التوسع متعدد الصفحات', description: 'تحسين بنية التطبيق' },
|
||||
{ title: 'التحسين والتجميل', description: 'تحسين تجربة المستخدم' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
بعد وجود بنية متعددة الصفحات، الخطوة الأخيرة هي تحويل النموذج الأولي من "يعمل" إلى "سهل الاستخدام ومظهر احترافي". هذا يتطلب منا تجربة العملية الكاملة يدويًا (عملية المستخدم)، وجعل الأجزاء التي لا تعمل يصلحها AI، حتى نتمكن من محاكاة مستخدم جديد يمر بجميع العملية من الصفر في كل مرة نحدّث فيها، والحصول على النتائج المتوقعة.
|
||||
|
||||
دعنا نراجع المتطلبات الأولية:
|
||||
|
||||
```
|
||||
1. مساعدة فريق التشغيل في إنشاء المسودة الأولى للصور والنصوص بشكل جماعي:
|
||||
- **المدخلات (دعم الرفع المباشر والاستيراد الجماعي للمواد):**
|
||||
- المعلومات الأساسية للمنتج: الاسم، الفئة، العلامة التجارية، المادة، الحجم، اللون، الفئة المستهدفة، إلخ؛
|
||||
- صور المنتج: صور بخلفية بيضاء / صور مشاهد بسيطة؛
|
||||
- كل توليد يدعم رفع لقطات شاشة لمنتجات ناجحة سابقًا أو روابط مرجعية إضافية؛
|
||||
- دعم الاستيراد الجماعي عبر Excel، أو الإدخال/الرفع عبر الإنترنت على الصفحة.
|
||||
- دعم تحديد ما إذا كان سيتم حفظ مواد المنتج في مكتبة المواد على الصفحة
|
||||
- **المخرجات (محتوى يمكن نشره مباشرة أو نشره بعد تعديل بسيط):**
|
||||
- لكل منتج مسودة صورة رئيسية "مقبولة تحتوي على نقاط بيع أساسية"؛
|
||||
- عنوان "ببنية معقولة يحتوي على كلمات مفتاحية أساسية" + 1-2 جملة نص نقاط بيع.
|
||||
- **التغيير المتوقع في طريقة الاستخدام:**
|
||||
من البدء من الصفر لكل دفعة منتجات إلى رمي مجموعة منتجات في النظام، وأخذ المسودات المولدة للفرز والتعديل الدقيق.
|
||||
|
||||
2. تحويل المخرجات الجيدة إلى مكتبة قوالب قابلة لإعادة الاستخدام:
|
||||
- **ما الذي يمكن حفظه؟**
|
||||
- أي مخرج يعتقد فريق التشغيل أنه "جيد" يمكن حفظه بنقرة واحدة:
|
||||
- يمكن أن يكون مجموعة كاملة من "الصورة الرئيسية + العنوان + نقاط البيع"؛
|
||||
- أو حفظ جزء منه فقط، مثل بنية عنوان معينة أو نص نقاط بيع.
|
||||
- **ماذا يمكن فعله بعد الحفظ؟**
|
||||
- **إعادة الاستخدام:**
|
||||
- استخدم هذا المحفوظ، طبّق على مجموعة جديدة من معلمات المنتج، وأعد توليد مسودات الصور والنصوص؛
|
||||
- أو على نفس المنتج، ولّد نسخًا متعددة بناءً على هذا القالب لاختبار A/B.
|
||||
- **التعديل:**
|
||||
- تعديل نص العنوان / نص نقاط البيع مباشرة؛
|
||||
- إذا كان يدعم تعديل الصور، يمكن تعديل النصوص والملصقات في الصورة الرئيسية بدقة.
|
||||
- **الإدارة:**
|
||||
- إعطاء اسم للمحفوظ وإضافة علامات (مثل "قالب صور حقائب رجالية" "بنية عنوان ترويج كبير")، ودعم التصنيف حسب المتجر، للسهولة في البحث لاحقًا.
|
||||
- **كيف تستخدم عند النشر الجديد؟**
|
||||
- بعد استيراد منتجات جديدة، يمكن لفريق التشغيل الاختيار:
|
||||
- استخدام منطق التوليد الافتراضي للنظام، أو
|
||||
- تحديد "استخدام قالب محفوظ معين للتوليد"؛
|
||||
- النظام يطبق تلقائيًا بنية ونمط القالب بناءً على بيانات المنتج الجديدة، ويخرج مسودة جديدة للصورة الرئيسية + العنوان + نقاط البيع.
|
||||
```
|
||||
|
||||
إذا كنت تحتاج في كل مرة إلى إنشاء بيانات جديدة للاختبار، فهذا يستغرق وقتًا طويلاً، في هذه الحالة نستخدم عادةً طريقة تسمى "بيانات الاختبار"، يمكنك التواصل مع AI بالطريقة التالية، وطلب منه إنشاء مدخل لبيانات اختبار سريعة على الواجهة، لتسهيل اختبار ما إذا كانت جميع الوظائف تعمل بشكل طبيعي:
|
||||
|
||||
```
|
||||
أحتاج الآن إلى اختبار عملية المستخدم هذه، للتأكد من أنه يمكنه إكمالها بالكامل، يرجى توليد مدخل بيانات اختبار بناءً على المتطلبات أدناه، لتمكيني من النقر واختبار ما إذا كانت العملية الكاملة تعمل بشكل طبيعي بسرعة:
|
||||
1. مساعدة فريق التشغيل في إنشاء المسودة الأولى للصور والنصوص بشكل جماعي:
|
||||
- **المدخلات (دعم الرفع المباشر والاستيراد الجماعي للمواد):**
|
||||
- المعلومات الأساسية للمنتج: الاسم، الفئة، العلامة التجارية، المادة، الحجم، اللون، الفئة المستهدفة، إلخ؛
|
||||
- صور المنتج: صور بخلفية بيضاء / صور مشاهد بسيطة؛
|
||||
- كل توليد يدعم رفع لقطات شاشة لمنتجات ناجحة سابقًا أو روابط مرجعية إضافية؛
|
||||
- دعم الاستيراد الجماعي عبر Excel، أو الإدخال/الرفع عبر الإنترنت على الصفحة.
|
||||
- دعم تحديد ما إذا كان سيتم حفظ مواد المنتج في مكتبة المواد على الصفحة
|
||||
- **المخرجات (محتوى يمكن نشره مباشرة أو نشره بعد تعديل بسيط):**
|
||||
- لكل منتج مسودة صورة رئيسية "مقبولة تحتوي على نقاط بيع أساسية"؛
|
||||
- عنوان "ببنية معقولة يحتوي على كلمات مفتاحية أساسية" + 1-2 جملة نص نقاط بيع.
|
||||
- **التغيير المتوقع في طريقة الاستخدام:**
|
||||
من البدء من الصفر لكل دفعة منتجات إلى رمي مجموعة منتجات في النظام، وأخذ المسودات المولدة للفرز والتعديل الدقيق.
|
||||
```
|
||||
|
||||
سهل الحصول على النتيجة (إذا كنت تعتقد أن بيانات واحدة غير كافية، يمكنك أن تطلب من AI توليد حالات اختبار متعددة):
|
||||
|
||||
|
||||
بعد النقر نحصل على النتيجة:
|
||||
|
||||
|
||||
في هذه اللحظة ما نحصل عليه مباشرة هو النتيجة، وليس "عملية توليد افتراضية"، إذا أردنا محاكاة عملية توليد حقيقية، يمكننا التحدث مع AI مباشرة: "يرجى محاكاة عملية توليد حقيقية، وإعطائي النتيجة بعد فترة من الوقت بعد النقر."
|
||||
|
||||
|
||||
بعد التأكد من وظيفة التوليد، يجب أيضًا التأكد من أن وظائف مكتبة القوالب تعمل بشكل طبيعي، من بطاقة التوليد على الصفحة يمكننا أن نعرف أن وظيفة حفظ مكتبة القوالب لم تُنفذ بعد، في هذه اللحظة نحتاج إلى مزيد من المحادثة العميقة مع AI، "يرجى التأكد من أن المتطلبات [الصق محتوى البند 2 أعلاه هنا] تعمل بشكل طبيعي، يمكن النقر على نتيجة لحفظ القالب المقابل، وبعد الفتح يمكن رؤية معلمات التوليد"
|
||||
|
||||
التوليد غالبًا ليس مرة واحدة، غالبًا ما يحتاج إلى لقطات شاشة للتصحيح:
|
||||
|
||||
|
||||
أخيرًا نحصل على النتيجة المتوقعة:
|
||||
|
||||
|
||||
بالإضافة إلى تجربة عملية عملية لمتطلبات العملية، يمكنك أيضًا أن تطلب من AI مساعدتك في فحص المتطلبات مباشرة، مثل:
|
||||
|
||||
- "يرجى مقارنة متطلباتي الأولية، والتحقق مما إذا كان التطبيق الحالي يغطي جميع الوظائف الأساسية."
|
||||
- "ساعدني في عمل قائمة وظائف، وحدد ما تم إنجازه وما لم يُنفذ بعد أو تجربته غير كافية."
|
||||
|
||||
عادةً ما سيُخرج AI قائمة تحقق، يمكنك التفكير بناءً على النتائج فيما إذا كنت بحاجة إلى الاستمرار في التحسين، وبعد التعديل المتكرر يمكنك الحصول على نتيجة نموذج أولي أكثر اكتمالاً.
|
||||
|
||||
## 5. 📚 الواجب: أعد إنشاء منصة التجارة الإلكترونية الخاصة بك
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 مهمة التحدي: أعد إنشاء منصة مواد التجارة الإلكترونية</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
بالرجوع إلى prompt ومحتوى هذا الدرس، أكمل دورة كاملة:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>ممارسة الدورة الكاملة</strong>
|
||||
<ul>
|
||||
<li>تنظيم الأعمال وتوليد prompt → توليد نموذج أولي لصفحة واحدة → توليد نموذج أولي متعدد الصفحات</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>مشاركة النتائج</strong>
|
||||
<ul>
|
||||
<li>التقط لقطة شاشة لبرنامجك وشاركها مع الجميع</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>سؤال تفكيري</strong>
|
||||
<ul>
|
||||
<li>اترك مجالاً للقسم التالي "ربط نموذج اللغة الكبير (LLM) وقدرات إنشاء الصور من النص"، فكر مسبقًا: كيف يمكنك تضمين قدرات مثل "AI لكتابة النصوص / إنشاء صور مرافقة / إنشاء نصوص برمجية" في منصتك؟</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## الخطوة التالية
|
||||
|
||||
في القسم التالي، سنضيف قدرات AI محددة (نص إلى نص، صورة إلى نص، نص إلى صورة) إلى منصة إنتاج المحتوى هذه، مثل:
|
||||
|
||||
- التوليد التلقائي لمسودة نصية وعناوين بديلة متعددة لمهمة محتوى معينة
|
||||
- التوليد التلقائي لمسودة صور مرافقة بناءً على وصف المهمة (نص إلى صورة)
|
||||
- التصنيف والملخص التلقائي لمهام المحتوى السابقة، لمساعدتك في تخطيط مواضيع النشاط التالي
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="متابعة التعلم"
|
||||
description="يوصى بالمتابعة بترتيب 'ربط قدرات AI → دورة مشروع كاملة → هندسة التصميم'."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'مشروع عملي كامل - من العرض التجريبي إلى النموذج الأولي بمستوى المنتج'
|
||||
description: 'اخرج من مرحلة العرض التجريبي، وتعلم كيفية إكمال مسار المنتج وبناء بيانات محاكاة واقعية والتكرار السريع من خلال التعليقات، وأخيرًا إكمال نموذج أولي لمنتج AI كامل قابل للعرض والتفاعل.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'حوالي <strong>3 أيام</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['ar-sa/stage-1/complete-project-practice'] ?? []
|
||||
</script>
|
||||
|
||||
# المستوى الخامس: مشروع عملي كامل
|
||||
|
||||
## دليل هذا الفصل
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['تفكير المنتج', 'بيانات المحاكاة', 'تحسين التفاعل', 'LocalStorage']" coreOutput="نموذج أولي لمنتج AI كامل الوظائف" expectedOutput="تطبيق ويب بمسار كامل وبيانات حقيقية">
|
||||
|
||||
في الفصل السابق، قمنا بتوصيل قدرات AI، وأصبح العرض التجريبي يعمل، لكنه لا يزال <strong>بعيدًا</strong> عن "المنتج" الحقيقي: عند تحديث الصفحة <strong>تختفي البيانات</strong>، وعند حدوث خطأ <strong>تظهر شاشة بيضاء</strong>، والقائمة لا تحتوي إلا على "بيانات اختبار 1، بيانات اختبار 2"، وإذا أخطأ المستخدم في النقر <strong>لا يمكن التراجع</strong>...
|
||||
|
||||
هذا الفصل سيملأ <strong>كل هذه الفجوات</strong>: سنقوم <strong>بإكمال مسار المنتج بالكامل</strong>، واستخدام AI لتوليد <strong>بيانات أعمال واقعية</strong> بدلاً من البيانات الوهمية، وإضافة <strong>معالجة الأخطاء والتغذية الراجعة للمستخدم</strong>، وأخيرًا صقل نموذج أولي <strong>كامل يمكن عرضه للآخرين وتقديمه</strong>.
|
||||
|
||||
هذا هو <strong>الفصل الأخير</strong> من المرحلة الأولى، وبعد إكمال هذه الخطوة، ستكون قد أكملت التحول من "لا أعرف البرمجة تمامًا" إلى "<strong>القدرة على صنع نموذج أولي لمنتج AI بشكل مستقل</strong>".
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'إكمال المسار', description: 'من وظيفة واحدة إلى حلقة كاملة' },
|
||||
{ title: 'ضخ الروح', description: 'محاكاة بيانات الأعمال الحقيقية' },
|
||||
{ title: 'التكرار بالتغذية الراجعة', description: 'إصلاح التجربة بناءً على تعليقات حقيقية' },
|
||||
{ title: 'المشروع النهائي', description: 'مشروع التخرج الخاص بك' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. رفض "المسار السعيد": إكمال المسار الأساسي
|
||||
|
||||
العديد من المبتدئين عند صنع النماذج الأولية غالبًا ما يصنعون فقط "المسار السعيد" (المسار الأكثر مثالية): المستخدم ينقر -> API يستجيب بنجاح -> تظهر النتيجة.
|
||||
لكن في العالم الحقيقي، الأمور غالبًا لا تسير بسلاسة. لجعل النموذج الأولي الخاص بك يبدو كمنتج حقيقي، تحتاج إلى مراعاة العناصر "الخفية" التالية.
|
||||
|
||||
### 1.1 إضافة "الانتظار" و"التغذية الراجعة"
|
||||
|
||||
عندما ينقر المستخدم على "توليد نص"، غالبًا ما يحتاج AI إلى بضع ثوانٍ للاستجابة. إذا لم تكن الواجهة تستجيب، سيعتقد المستخدم أن البرنامج معطل.
|
||||
**تحتاج إلى جعل AI IDE يضيف حالة التحميل:**
|
||||
|
||||
> مثال على التعليمات:
|
||||
> "عندما أنقر على زر التوليد، قم بتغيير الزر إلى 'جارٍ التوليد...' واجعله غير قابل للنقر، وفي نفس الوقت اعرض رسمًا متحركًا للتحميل في المنطقة اليمنى. حتى تعود نتيجة API، ثم استعد الحالة الطبيعية."
|
||||
|
||||
### 1.2 التعامل مع "الفشل" و"الاستثناءات"
|
||||
|
||||
قد تنتهي صلاحية API Key، وقد ينقطع الاتصال بالشبكة.
|
||||
**تحتاج إلى جعل AI IDE يعالج الأخطاء:**
|
||||
|
||||
> مثال على التعليمات:
|
||||
> "إذا فشل طلب API، لا تبلغ عن الخطأ مباشرة في وحدة التحكم، بل اعرض مربع رسالة حمراء (Toast) في أعلى الصفحة، تخبر المستخدم بـ 'فشل التوليد، يرجى المحاولة لاحقًا'، واسمح للمستخدم بالنقر على التوليد مرة أخرى."
|
||||
|
||||
### 1.3 استمرارية سجل المحادثة
|
||||
|
||||
في عملية التفاعل مع AI، نحتاج إلى حفظ محتوى المحادثة، حتى يتمكن المستخدم من مراجعة التاريخ ومواصلة التواصل السابق. في هذه المرحلة لا نقدم قاعدة بيانات بعد، ويمكننا اختيار أحد الحلول الخفيفة التالية:
|
||||
|
||||
**اختيار حل التخزين:**
|
||||
|
||||
| الحل | سيناريو الاستخدام | الميزات |
|
||||
| ---------------- | -------------------------------- | ------------------------------------ |
|
||||
| **LocalStorage** | مشروع أمامي فقط، بيانات المستخدم محفوظة في المتصفح | تنفيذ بسيط، لا تضيع عند التحديث، لا يمكن المزامنة عبر الأجهزة |
|
||||
| **ملف JSON** | نموذج أولي محلي، البيانات مخزنة كملف | هيكل واضح، سهل التصحيح، قابل للتعديل يدويًا |
|
||||
| **ملف TXT** | الحل الأبسط، تسجيل سريع للمحتوى النصي | تنسيق حر، توافق جيد |
|
||||
|
||||
**مثال على محتوى المحادثة:**
|
||||
سجل المحادثة المحفوظ عادةً ما يتضمن المحتوى التالي:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"role": "user",
|
||||
"content": "ساعدني في توليد نص تسويقي لسماعات بلوتوث لمنصة Douyin",
|
||||
"timestamp": "2026-01-20 10:30:00"
|
||||
},
|
||||
{
|
||||
"role": "assistant",
|
||||
"content": "[نص تسويقي لسماعات بلوتوث]\n\n🎧 وداعًا للتأخير، تجربة استماع غامرة\n\nيا بنات! هذه السماعات رهيبة حقًا\n\n✅ عزل ضوضاء نشط 40 ديسيبل، دخول فوري لعالم الموسيقى\n✅ 30 ساعة عمر بطارية فائق، أسبوع تنقل بدون شحن\n✅ مكالمات واضحة وجهاً لوجه، حتى في المترو الصاخب\n✅ تصميم نصف داخل الأذن، مريح حتى مع الاستخدام الطويل\n\n💰 عرض محدود، انقر على الرابط أدناه للحصول عليها!",
|
||||
"timestamp": "2026-01-20 10:30:05"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**تعليمات التنفيذ:**
|
||||
|
||||
> "ساعدني في تنفيذ وظيفة حفظ سجل المحادثة. ادعم حفظ سجل محادثات المستخدم و AI كملف JSON (أو استخدم LocalStorage). عند الدخول إلى الصفحة في كل مرة، يتم تحميل المحادثات السابقة تلقائيًا، مع دعم عرض وحذف سجل المحادثات الفردية."
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'إكمال المسار', description: 'من وظيفة واحدة إلى حلقة كاملة' },
|
||||
{ title: 'ضخ الروح', description: 'محاكاة بيانات الأعمال الحقيقية' },
|
||||
{ title: 'التكرار بالتغذية الراجعة', description: 'إصلاح التجربة بناءً على تعليقات حقيقية' },
|
||||
{ title: 'المشروع النهائي', description: 'مشروع التخرج الخاص بك' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. ضخ الروح: محاكاة البيانات الحقيقية (Mock Data)
|
||||
|
||||
الصفحة الفارغة لا يمكنها إقناع أحد. تخيل أنك تعرض "محطة مواد التجارة الإلكترونية" لشخص آخر، لكن السجل فارغ تمامًا، أو يحتوي فقط على سطر واحد "test / test / test".
|
||||
للحصول على أفضل تأثير عرضي، نحتاج إلى "تزوير" بعض البيانات الواقعية لجعل النموذج الأولي يبدو كمنتج حقيقي تم تشغيله لمدة نصف عام.
|
||||
|
||||
### 2.1 دع AI يساعدك في تصميم هيكل البيانات
|
||||
|
||||
لا نحتاج إلى التفكير بأنفسنا في ماذا نسمي كل حقل (مثلاً هل نسميه `name` أم `title`)، يمكن ترك هذا الأمر تمامًا لـ AI.
|
||||
|
||||
تحتاج فقط إلى إخبار AI بـ **سيناريو عملك**:
|
||||
|
||||
> **مثال على التعليمات:**
|
||||
> "أقوم بصنع نموذج أولي لـ **محطة مواد التجارة الإلكترونية على Douyin**.
|
||||
> ساعدني في تصميم هيكل بيانات JSON لوصف 'مهمة منتج'.
|
||||
> يجب أن تتضمن هذه المهمة: المعلومات الأساسية للمنتج (الاسم، الفئة)، المواد المدخلة (روابط الصور)، ونتائج AI المولدة (العنوان، النص، صورة الملصق).
|
||||
> أعطني مباشرة مثال JSON."
|
||||
|
||||
سيقوم AI تلقائيًا بناءً على وصفك بابتكار حقول مثل `productName` و `generatedContent`.
|
||||
|
||||
### 2.2 دع AI ينتج دفعة واحدة بيانات "واقعية"
|
||||
|
||||
بعد الحصول على هيكل البيانات، الخطوة التالية هي جعل AI يساعدك في "ملء الفراغات" وتوليد مجموعة من البيانات التي تبدو حقيقية.
|
||||
|
||||
**نصائح حول التعليمات:**
|
||||
لا يمكنك فقط إخبار AI "ساعدني في توليد بيانات"، تحتاج أن تخبره كما لو كنت تكلف متدربًا، إخباره بـ **خلفية العمل** و**متطلبات المحتوى**:
|
||||
|
||||
- **خلفية العمل**: أخبر AI أننا نعمل في "التجارة الإلكترونية على Douyin"، لذا يجب أن تكون عناوين المنتجات جذابة (مثل "سر النحافة" و"لا بد للطلاب")، وأن يكون النص بأسلوب محادثة.
|
||||
- **متطلبات الصور**: لجعل النموذج الأولي يبدو جيدًا، يجب ألا تكون الصور رموزًا رمادية بدائية، بل يفضل أن تكون صورًا ملونة عشوائية للمناظر الطبيعية أو الأشياء الحقيقية.
|
||||
|
||||
> **مثال على التعليمات:**
|
||||
> "بناءً على الهيكل المصمم للتو، ساعدني في توليد 10 بيانات محاكاة واقعية.
|
||||
> (ملاحظة: ليس بالضرورة بصيغة JSON. إذا كنت تكتب كودًا أماميًا، يمكنك جعله يولد مصفوفة JavaScript مباشرة؛ إذا كنت تستخدم Python، يمكنك جعله يولد List.)
|
||||
>
|
||||
> **متطلبات سيناريو العمل**:
|
||||
>
|
||||
> 1. افترض أن هذا متجر متعدد الأقسام، وتشمل المنتجات فئات 'ملابس نسائية' و'إلكترونيات' و'مستحضرات تجميل'.
|
||||
> 2. **العناوين والنصوص المولدة يجب أن تكون بأسلوب Douyin**: مثلاً العناوين يجب أن تتضمن رموز تعبيرية (🔥, ✨)، والنصوص يجب أن تستخدم عبارات مثل 'رهيبة' و'جربتها بنفسي'.
|
||||
> 3. **حقل الصور**: استخدم التنسيق `https://picsum.photos/seed/{random_id}/300/400` بشكل موحد، لضمان اختلاف كل صورة."
|
||||
|
||||
**مثال على بيانات المحاكاة المولدة:**
|
||||
|
||||
```javascript
|
||||
export const mockProductTasks = [
|
||||
{
|
||||
id: 'task_001',
|
||||
name: 'فستان صيفي بنقشات فرنسي كلاسيكي',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'ملابس نسائية',
|
||||
features: ['تضييق الخصر', 'يرقق القوام', 'أنيق'],
|
||||
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: '✨من تلبسها تحلى! هذا الفستان المنقوش الفرنسي رهيب حقًا🔥',
|
||||
generatedCopy:
|
||||
'يا بنات! هذا الفستان ينحّف القوام حقًا! تصميم تضييق الخصر رهيب، بمجرد لبسه يظهر لك خصرك. القماش منفس جدًا، في الصيف ما يخنق أبدًا. الخيار الأول للمواعيد والتنزهات! 👗',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-20T10:00:00Z'
|
||||
},
|
||||
{
|
||||
id: 'task_002',
|
||||
name: 'سماعات بلوتوث فائقة عزل الضوضاء Pro',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'إلكترونيات',
|
||||
features: ['عزل الضوضاء', 'عمر بطارية فائق', 'تأخير منخفض'],
|
||||
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: '🎧 أخيرًا وجدتها! عزل الضوضاء في هذه السماعات قوي جدًا! 🔇',
|
||||
generatedCopy:
|
||||
'بمجرد لبسها، يسكت العالم فورًا. جودة صوت رائعة، الاستماع للموسيقى كأنك في الحفل. عمر البطارية ممتاز أيضًا، شحنة واحدة تكفي لأسبوع! لا بد للطلاب!',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-21T14:30:00Z'
|
||||
}
|
||||
// ... المزيد من البيانات
|
||||
]
|
||||
```
|
||||
|
||||
### 2.3 (متقدم) استخدام LocalStorage لتنفيذ "الإضافة والحذف والتعديل المزيف"
|
||||
|
||||
إذا كنت تريد أن تكون بيانات المحاكاة المولدة للتو قابلة للعرض والحذف والتعديل، بل وحتى أن تكون المهام المولدة حديثًا لا تزال موجودة بعد تحديث الصفحة، يمكنك الجمع بين `LocalStorage`.
|
||||
|
||||
> **مثال على التعليمات:**
|
||||
> "ساعدني في تنفيذ وظيفة تخزين البيانات.
|
||||
>
|
||||
> 1. اقرأ البيانات من `localStorage` أولاً.
|
||||
> 2. إذا كان `localStorage` فارغًا، استخدم بيانات المحاكاة المولدة للتو للتهيئة، واحفظها في `localStorage`.
|
||||
> 3. في نفس الوقت ساعدني في كتابة دالتي `addProductTask` و `deleteProductTask`، كل عملية يجب أن تقوم بتحديث `localStorage` بشكل متزامن."
|
||||
|
||||
من خلال هذه الخطوة، سيكون لدى النموذج الأولي الخاص بك "ذاكرة"، وتجربة المستخدم ستكون مطابقة تقريبًا للمنتج الحقيقي.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'إكمال المسار', description: 'من وظيفة واحدة إلى حلقة كاملة' },
|
||||
{ title: 'ضخ الروح', description: 'محاكاة بيانات الأعمال الحقيقية' },
|
||||
{ title: 'التكرار بالتغذية الراجعة', description: 'إصلاح التجربة بناءً على تعليقات حقيقية' },
|
||||
{ title: 'المشروع النهائي', description: 'مشروع التخرج الخاص بك' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. جمع التعليقات والتكرار السريع
|
||||
|
||||
العمل خلف الأبواب المغلقة لا ينتج منتجات جيدة. الآن نموذجك الأولي لديه "الوظائف الأساسية" + "المسار الكامل" + "بيانات العرض"، حان الوقت لعرضه على الآخرين.
|
||||
|
||||
### 3.1 من تختبر؟ كيف تختبر؟
|
||||
|
||||
- **ابحث عن أصدقاء / زملاء**: لا يحتاجون إلى فهم التكنولوجيا، فقط دعهم يحاولون استخدامه.
|
||||
- **راقب بدلاً من التوجيه**: لا تقل "انقر هنا"، بل انظر إلى أين سينقرون. إذا لم يتمكنوا من العثور على الزر، فهذا يعني أن التصميم به مشكلة.
|
||||
- **طريقة ساحر أوز العجيب (Wizard of Oz)**: إذا لم يكن AI متصلاً بعد، يمكنك تعديل البيانات يدويًا في الخلفية (أو قاعدة البيانات) لمحاكاة استجابة AI، والتحقق أولاً مما إذا كان المستخدم يحتاج هذه الوظيفة.
|
||||
|
||||
### 3.2 مواجهة الأخطاء والشكاوى
|
||||
|
||||
- **تشوهات في التصميم**: قد تظهر فوضوية على أحجام شاشات مختلفة.
|
||||
- **الإجراء**: خذ لقطة شاشة وأرسلها إلى AI IDE -> "التصميم تشوه على هذا العرض، ساعدني في إصلاحه."
|
||||
- **تفاعل غير مريح**: "هذه العملية معقدة جدًا".
|
||||
- **الإجراء**: أخبر AI IDE بالاقتراح -> "المستخدم يشعر أن الرفع ثم التوليد بطيء جدًا، هل يمكن تغييره إلى توليد بنقرة واحدة؟"
|
||||
- **متطلبات جديدة**: "لو كانت هناك هذه الوظيفة لكان رائعًا".
|
||||
- **الإجراء**: قيّم ما إذا كانت أساسية، وإذا كانت كذلك، دع AI ينفذ نسخة مبسطة بسرعة.
|
||||
|
||||
**تذكر: في هذه المرحلة، AI هو أفضل مساعد لك في التعديل. أنت مسؤول فقط عن اكتشاف المشاكل، واترك تعديل الكود له.**
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'إكمال المسار', description: 'من وظيفة واحدة إلى حلقة كاملة' },
|
||||
{ title: 'ضخ الروح', description: 'محاكاة بيانات الأعمال الحقيقية' },
|
||||
{ title: 'التكرار بالتغذية الراجعة', description: 'إصلاح التجربة بناءً على تعليقات حقيقية' },
|
||||
{ title: 'المشروع النهائي', description: 'مشروع التخرج الخاص بك' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 4. 🎓 مشروع التخرج: أكمل "مشروع التخرج" الخاص بك
|
||||
|
||||
تهانينا! لقد أكملت العملية الكاملة من "المتطلبات" إلى "النموذج الأولي" ثم إلى "تكامل AI". الآن، حان وقت عرض نتيجتك النهائية.
|
||||
|
||||
**مشروع التخرج هذا لا يقتصر على "محطة مواد التجارة الإلكترونية" فقط.** تحتاج إلى الجمع بين اهتماماتك أو خلفيتك المهنية لصنع نموذج أولي لمنتج AI فريد.
|
||||
|
||||
### اختيار الموضوع والمتطلبات
|
||||
|
||||
تحتاج إلى اختيار السيناريو الأقرب من **[مرجع اتجاهات السيناريوهات متعددة التصنيفات](../appendix-industry-scenarios/index.md)**، أو ابتكار سيناريو جديد تمامًا بناءً على أفكارك الخاصة.
|
||||
|
||||
**يجب أن يستخدم المشروع بشكل شامل كل ما تعلمته في الفصول السابقة:**
|
||||
|
||||
1. **بناء النموذج الأولي**: استخدم تقنيات الواجهة الأمامية لبناء واجهة جميلة وسهلة الاستخدام.
|
||||
2. **التحكم في المتطلبات**: لا تسعَ للشمولية، بل ركز على الإغلاق المنطقي للوظائف الأساسية.
|
||||
3. **توصيل API**: قم بتوصيل نماذج AI حقيقية (LLM / VLM إلخ)، لمنح التطبيق ذكاءً حقيقيًا.
|
||||
4. **تنفيذ تطبيق قابل للتشغيل**: ليس مجرد صفحة ثابتة، بل تطبيق ديناميكي فيه تدفق بيانات وتغذية راجعة تفاعلية.
|
||||
|
||||
### مخرجات المشروع
|
||||
|
||||
في النهاية تحتاج إلى تقديم المحتوى التالي:
|
||||
|
||||
1. **تطبيق نموذج أولي كامل**: منشور عبر الإنترنت أو قابل للتشغيل محليًا، مع مسار استخدام كامل.
|
||||
2. **فيديو عرض لمدة 30 ثانية**: سجل فيديو يقدم باختصار سيناريو تطبيقك ويعرض التشغيل الفعلي للوظائف الأساسية.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 قائمة التحدي النهائي</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
هذه هي المعركة الأخيرة في المرحلة الأولى. تحقق من عملك وفقًا للقائمة التالية:
|
||||
</p>
|
||||
|
||||
<div style="font-weight: bold; margin-bottom: 10px;">فحص ذاتي للوظائف الأساسية</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>سيناريو واضح</strong>: تم اختيار صناعة أو سيناريو تطبيق محدد</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>إغلاق منطقي</strong>: المسار الأساسي يعمل بالكامل، وليس فقط المسار السعيد</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>مدعوم بـ AI</strong>: تم استدعاء API نموذج كبير حقيقي، وليس ردودًا مبرمجة مسبقًا</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>تجربة كاملة</strong>: يتضمن التحميل ومعالجة الأخطاء وبيانات المحاكاة</label></li>
|
||||
</ul>
|
||||
|
||||
<div style="font-weight: bold; margin: 20px 0 10px;">تحضير المخرجات</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>تطبيق النموذج الأولي</strong>: الكود مكتمل وقابل للتشغيل</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>فيديو العرض</strong>: حوالي 30 ثانية، يعرض بوضوح أهم النقاط البارزة</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## الخطوة التالية
|
||||
|
||||
بعد إكمال مشروع التخرج، أصبح لديك القدرة على "تطوير نموذج أولي لتطبيق AI بشكل مستقل".
|
||||
في المرحلة الثانية القادمة، سنتعمق في تطوير Full Stack الأكثر تعقيدًا، ونتعلم كيفية تحويل هذا النموذج الأولي إلى تطبيق حقيقي قابل للنشر بقاعدة بيانات ونظام مستخدمين بمستوى تجاري.
|
||||
|
||||
نلتقي في المرحلة القادمة!
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="مواصلة التقدم"
|
||||
description="تهانينا على إكمال المرحلة الأولى، هذه الفصول يمكن أن تساعدك في الدخول إلى التطوير الهندسي."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,803 @@
|
||||
---
|
||||
title: 'إضافة قدرات الذكاء الاصطناعي إلى النموذج الأولي - ربط واجهات برمجة النص والصور'
|
||||
description: 'ربط قدرات الذكاء الاصطناعي الحقيقية في نموذج ويب أولي موجود: فهم المفاهيم الأساسية لواجهة برمجة التطبيقات (API)، تعلم كيفية العثور على مفتاح API والأمثلة الرسمية؛ التطبيق العملي لدمج نموذج نص DeepSeek وخدمات توليد صور متعددة (SiliconFlow Qwen-Image، Recraft، Seedream)، وإتقان طرق اختيار النماذج الشائعة.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'حوالي <strong>1 يوم</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['ar-sa/stage-1/integrating-ai-capabilities'] ?? []
|
||||
</script>
|
||||
|
||||
# المبتدئ 4: ضخ قدرات الذكاء الاصطناعي في النموذج الأولي
|
||||
|
||||
## دليل الفصل
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['API', 'نموذج نصي', 'نص إلى صورة', 'تكامل النموذج الأولي']" coreOutput="ربط نموذج أولي بنموذج نصي واحد + نموذج صورة واحد (اختياري)" expectedOutput="نموذج أولي للذكاء الاصطناعي قادر على استدعاء واجهة برمجة تطبيقات (API) حقيقية">
|
||||
|
||||
في الفصول السابقة، أكملنا العملية الكاملة من <strong>إيجاد فكرة جيدة</strong> إلى <strong>صنع نموذج أولي للمنتج</strong>. لكن النموذج الأولي الحالي ليس سوى "غلاف" — النقر على الزر لن يولد محتوى فعليًا، والبيانات على الصفحة كلها ثابتة.
|
||||
|
||||
أتذكر ما أكدنا عليه في الفصل الأول؟ <strong>"نريد صنع منتج يرغب الناس في الدفع مقابله"، وليس "نموذج أولي يبدو لائقًا فقط".</strong> القيمة الحقيقية تأتي من قدرة المنتج على <strong>حل مشاكل حقيقية</strong>، ولتحقيق ذلك، يجب أن يكون النموذج الأولي قادرًا على <strong>العمل بشكل فعلي</strong>.
|
||||
|
||||
هذا الفصل سيجعل النموذج الأولي <strong>"ينبض بالحياة"</strong>: سنقوم بربط <strong>قدرات ذكاء اصطناعي حقيقية</strong>، بدءًا من الحصول على مفتاح API، إلى فهم الوثائق الرسمية، والسماح لبيئة تطوير الذكاء الاصطناعي (AI IDE) بمساعدتك في دمج الواجهة في الكود. سوف تتخذ من <strong>نموذج DeepSeek النصي</strong> كمثال، وتتعلم كيف تجعل تطبيقك <strong>يستدعي نموذجًا كبيرًا لتوليد المحتوى فعليًا</strong>؛ وإذا كنت مهتمًا، يمكنك <strong>اختيار دمج توليد الصور</strong> أيضًا.
|
||||
|
||||
بعد الانتهاء من هذا الفصل، لن يكون نموذجك الأولي <strong>عرضًا ثابتًا</strong> بعد الآن، بل سيكون <strong>تطبيقًا قادرًا على استدعاء قدرات ذكاء اصطناعي حقيقية وحل مشاكل حقيقية</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'أساسيات API', description: 'فهم المفاهيم الأساسية ومعايير الأمان' },
|
||||
{ title: 'ربط النصوص', description: 'تطبيق عملي لتوليد النصوص عبر DeepSeek' },
|
||||
{ title: 'ربط الصور', description: 'فهم وتوليد الصور عبر VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 1. المفاهيم الأساسية لـ API
|
||||
|
||||
كما ذكرنا سابقًا، هدفنا هو "إدخال قدرات الذكاء الاصطناعي"، بحيث لا يظل النموذج الأولي مجرد عرض ثابت، بل أداة قادرة على استدعاء خدمات ذكاء اصطناعي حقيقية. لتحقيق ذلك، يكمن المفتاح في فهم واستخدام API (واجهة برمجة التطبيقات).
|
||||
|
||||
API هو مفهوم تجريدي مهم في مجال الحوسبة، ويمكننا فهمه ببساطة على أنه: **"ترسل سؤالاً بالتنسيق الذي يطلبه الطرف الآخر، ويقوم الطرف الآخر بالرد بنتيجة بنفس التنسيق".**
|
||||
|
||||
- **ما ترسله**: يتضمن عادةً "مفتاح (API Key)" و"ما تريد توليده"
|
||||
- **ما يردونه عليك**: إذا نجح الطلب يعطيك النتيجة؛ وإذا فشل سيخبرك بالسبب (مثل "المفتاح غير صحيح" أو "الرصيد غير كافٍ" أو "المعلمات خاطئة")
|
||||
|
||||
على وجه التحديد، تحتاج إلى إتقان العناصر الأساسية التالية:
|
||||
|
||||
1. **API Key**: "تصريح مرورك"، وهو أيضًا "مفتاح محفظتك". إذا حصل عليه شخص آخر، يمكنه استدعاء الواجهة نيابة عنك وتكبد رسوم.
|
||||
2. **Endpoint (مسار الواجهة)**: المسار المحدد لطلب API، والذي يخبر الخادم بالوظيفة التي تريد الوصول إليها. يتكون عنوان الطلب الكامل عادةً من "الرابط الأساسي + مسار Endpoint". على سبيل المثال:
|
||||
- توليد النص: الرابط الأساسي (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = الرابط الكامل `https://api.service.com/v1/chat/completions`
|
||||
- توليد الصور: الرابط الأساسي (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = الرابط الكامل `https://api.service.com/v1/images/generations`
|
||||
3. **الاستدعاء/الطلب**: عملية إرسال مهمة إلى خدمة الذكاء الاصطناعي والحصول على نتيجة
|
||||
4. **محتوى الطلب**: المحتوى المحدد الذي ترسله إلى الذكاء الاصطناعي، مثل موضوع المقالة التي تريد من الذكاء الاصطناعي كتابتها، أو وصف الصورة التي تريد توليدها، إلخ.
|
||||
5. **نتيجة الاستجابة**: المحتوى الذي يعيده الذكاء الاصطناعي بعد الانتهاء من المعالجة، مثل المقالة أو الصور المولدة، إلخ.
|
||||
6. **معالجة الأخطاء**: عند حدوث مشاكل (مثل خطأ في مفتاح API، أو طلبات متكررة جدًا، إلخ)، معرفة كيفية التحقيق فيها وحلها.
|
||||
|
||||
::: info ℹ️ ما هي API
|
||||
للحصول على شرح أعمق لواجهة برمجة التطبيقات (API)، يرجى مراجعة الملحق: [مقدمة في API](/zh-cn/appendix/4-server-and-backend/api-intro).
|
||||
|
||||
::: warning 🔐 **ملاحظات أمان API**
|
||||
مفتاح API هو "تصريح المرور" لطلب خدمات الذكاء الاصطناعي، وهو عبارة عن سلسلة نصية سرية تُستخدم للمصادقة والفوترة.
|
||||
|
||||
نظرًا لأن مفتاح API مرتبط مباشرة بحسابك وتكاليفك، يجب الانتباه جيدًا إلى:
|
||||
|
||||
- **عدم مشاركته أبدًا** في محادثات جماعية، أو التقاط لقطة شاشة وتحميلها على الإنترنت، أو نشره في منتديات عامة
|
||||
- **عدم كتابته بشكل ثابت في الكود** (Hard-coding) ثم رفعه إلى مستودع Git (خاصة المستودعات العامة)
|
||||
- إذا اشتبهت في تسريب المفتاح، **قم بتغييره فورًا**
|
||||
|
||||
سنقوم في المحتوى التالي **بلصق مفتاح API مباشرة في بيئة تطوير الذكاء الاصطناعي (AI IDE) للعمل عليه**، **لا تفعل ذلك في المشاريع الحقيقية!!**، وبما أننا نتدرب يمكننا فعل ذلك. (عندما تصبح أكثر مهارة، ستتمكن من جعل الذكاء الاصطناعي ينشئ ملف تكوين، وتضع مفتاح API في ملف التكوين فقط)
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'أساسيات API', description: 'فهم المفاهيم الأساسية ومعايير الأمان' },
|
||||
{ title: 'ربط النصوص', description: 'تطبيق عملي لتوليد النصوص عبر DeepSeek' },
|
||||
{ title: 'ربط الصور', description: 'فهم وتوليد الصور عبر VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 2. ربط واجهة برمجة توليد النصوص: DeepSeek
|
||||
|
||||
على الرغم من أن API تتضمن هذه المفاهيم التقنية، إلا أنه في مرحلة تطوير النموذج الأولي، يمكن أن تكون العملية الفعلية بسيطة وفعالة للغاية. الفكرة الأساسية هي:
|
||||
|
||||
> **ابحث عن المثال الرسمي، واحصل على مفتاح API، ودع بيئة تطوير الذكاء الاصطناعي (AI IDE) تساعدك في ربطه بالزر.**
|
||||
|
||||
بعد إتقان هذه المفاهيم، ستجد أنه سواء كان ربط نموذج نصي أو نموذج صوري، فإن العملية الأساسية هي نفسها: عندما ينقر المستخدم على الزر، تقوم الواجهة الأمامية بتجميع المدخلات وإرسال طلب؛ وبعد أن تعيد الواجهة النتيجة، يتم عرضها على الصفحة. بعد ذلك، سنتحقق من ذلك من خلال العمل الفعلي.
|
||||
|
||||
في قسم `1.2 بناء النموذج الأولي عمليًا`، قمت بالفعل ببناء نموذج أولي تفاعلي. ما سنقوم به بعد ذلك هو تحويل "الوظائف التي تبدو وكأنها ذكاء اصطناعي" في النموذج الأولي إلى قدرات قابلة للاستخدام فعليًا: **عندما ينقر المستخدم على الزر، يرسل النموذج الأولي طلبًا إلى خدمة ذكاء اصطناعي خارجية، ويعرض النص المُعاد.**
|
||||
|
||||
::: info ℹ️ امتداد للمبادئ
|
||||
إذا كنت ترغب في معرفة المزيد عن المبادئ ذات الصلة، يرجى مراجعة الملحق: [مقدمة في النماذج اللغوية الكبيرة (LLM)](/zh-cn/appendix/8-artificial-intelligence/llm-principles).
|
||||
::: details اعرف المزيد: ما هو DeepSeek؟
|
||||
|
||||
**شركة هانغتشو ديب سيك لأبحاث تكنولوجيا الذكاء الاصطناعي الأساسية المحدودة** (Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.)، والمعروفة باسمها التجاري DeepSeek، هي **شركة صينية للذكاء الاصطناعي (AI) تطوّر نماذج لغوية كبيرة (LLMs)**. يقع المقر الرئيسي لـ DeepSeek في هانغتشو بمقاطعة تشجيانغ، وهي مملوكة ومموّلة من صندوق التحوط الصيني High-Flyer. تأسست DeepSeek في يوليو 2023 على يد ليانغ وين فنغ، المؤسس المشارك لـ High-Flyer، والذي يشغل أيضًا منصب الرئيس التنفيذي للشركتين. أطلقت الشركة في يناير 2025 روبوت الدردشة الذي يحمل نفس الاسم ونموذجها DeepSeek-R1.
|
||||
|
||||
دعونا نلقي نظرة على مقارنة أداء DeepSeek مع النماذج الرائدة الأخرى في ترتيب معيار GPQA. الجدير بالذكر أن DeepSeek هو نموذج مفتوح المصدر (يمكن للجميع تنزيل النموذج من الإنترنت)، بينما النماذج الشائعة الأخرى مثل Grok و Google Gemini و ChatGPT هي نماذج مغلقة المصدر. كما نرى، اقترب DeepSeek بشكل كبير من مستوى النماذج من الدرجة الأولى.
|
||||
|
||||
|
||||
|
||||
GPQA هو اختصار لـ "Graduate-Level Google-Proof Q&A Benchmark"، وهو معيار بمستوى الدراسات العليا مخصص لمهام الإجابة على الأسئلة العلمية. فيما يلي مقدمة مفصلة.
|
||||
|
||||
يحتوي GPQA على 448 سؤالًا من أسئلة الاختيار من متعدد، تغطي مجالات فرعية في علم الأحياء والفيزياء والكيمياء، مثل ميكانيكا الكم، والكيمياء العضوية، وعلم الأحياء الجزيئي، وغيرها. تمت كتابة هذه الأسئلة بواسطة 61 خبيرًا يحملون درجة الدكتوراه أو يدرسون للحصول عليها، وخضعت لعملية تحقق صارمة.
|
||||
:::
|
||||
|
||||
اتبع هذه الخطوات الثلاث لتحقيق تكامل سريع لواجهة برمجة التطبيقات (API) الخاصة بتوليد النصوص باستخدام النماذج الكبيرة:
|
||||
|
||||
1. **إنشاء API Key على منصة DeepSeek**
|
||||
2. **العثور على مثال لتوليد النصوص في وثائق DeepSeek** (عادةً ما يكون هناك كود جاهز يمكن نسخه مباشرة)
|
||||
3. **افتح AI IDE، والصق API Key + المثال الرسمي بداخله**، وأخبر الذكاء الاصطناعي بالوظيفة التي تريد تنفيذها:
|
||||
> ساعدني في ربط واجهة برمجة التطبيقات (API) الخاصة بهذا النموذج الكبير، لدعم مهمة توليد النصوص لهذا التطبيق
|
||||
|
||||
بعد ذلك سنقوم بعرض توضيحي، يمكنك متابعة الخطوات وتجربة العملية الكاملة. أولاً، قم بتسجيل حساب في [DeepSeek](https://platform.deepseek.com/usage) وإنشاء API Key، وقم بشحن رصيد صغير للتحقق.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
انقر على "API KEYS" وابحث عن "create new API key" في أسفل الشاشة. ستحصل في النهاية على مفتاح API يشبه sk-8573341c39fc44315aadc071c53rh7d2.
|
||||
|
||||
|
||||
|
||||
بمجرد حصولك على المفتاح، ستكون لديك الصلاحية لاستدعاء النموذج.
|
||||
|
||||
في هذه المرحلة، يمكنك قراءة وثائق [API](https://api-docs.deepseek.com/) مباشرةً، والتي توفر عادةً أمثلة للاستدعاء باستخدام curl أو Python.
|
||||
|
||||
|
||||
|
||||
بعد العثور على المثال، يمكنك نسخ جميع المحتويات من الوثائق بالإضافة إلى المفتاح إلى مربع حوار AI IDE، واطلب منه مساعدتك في دمج النموذج اللغوي الكبير في النموذج الأولي الذي قمت بتطويره مسبقًا.
|
||||
|
||||
|
||||
|
||||
استخدم الرسالة المرجعية التالية:
|
||||
|
||||
```
|
||||
ارجع إلى طريقة الاستدعاء هذه وساعدني في دعم وظيفة توليد النصوص التسويقية، يمكنها توليد نصوص تسويقية لمنصة Douyin بناءً على معلومات المنتج عند النقر، بأنماط متعددة.
|
||||
مفتاح API：sk-8573341c39aefa1efe
|
||||
مرجع طلب API：
|
||||
curl \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
|
||||
-d '{
|
||||
"model": "deepseek-chat",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
بعد فترة من توليد الأكواد بالذكاء الاصطناعي، يمكننا بسهولة الحصول على زر توليد النصوص المقابل لاختباره. إذا لم تتمكن من العثور على المدخل، يمكنك أن تطلب من AI IDE أن يخبرك من أي صفحة يمكنك الوصول إلى هذه الصفحة. وإذا لم تتمكن من العثور عليه حقًا، يمكنك أن تطلب من AI IDE إعادة البناء والتحسين مباشرة بناءً على أفكارك، للحصول على نتيجة توليد النصوص النهائية.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
بالطبع، قد تتساءل هنا، كيف أعرف أنه تم استدعاء النموذج الكبير فعلًا بدلاً من مجرد استخدام ردود مبرمجة مسبقًا؟ يمكنك إدخال نصوص مخصصة، والسماح للنموذج الكبير بتوليد النصوص المقابلة بناءً على التحليل المخصص الذي تحدده فورًا.
|
||||
|
||||
إذا وجدت أن الردود مختلفة في كل مرة ومنطقية، يمكنك أن تطمئن إلى أن استدعاء API قد تم بشكل طبيعي لتوليد النصوص. يمكنك أيضًا التحقق من نجاح الاستدعاء في [منصة إدارة استخدام API](https://platform.deepseek.com/usage) (على الرغم من أنه قد تحتاج إلى الانتظار بضع دقائق لتظهر).
|
||||
|
||||
## المزيد من خيارات نماذج توليد النصوص
|
||||
|
||||
بالإضافة إلى DeepSeek، يمكنك أيضًا تجربة نماذج لغوية كبيرة أخرى. نظرًا لأن معظم النماذج توفر **واجهة متوافقة مع OpenAI**، فإن التبديل بينها سهل للغاية — كل ما عليك فعله هو تغيير API Key وعنوان URL الأساسي واسم النموذج.
|
||||
|
||||
### تكامل MiniMax
|
||||
|
||||
::: details اعرف المزيد: ما هو MiniMax؟
|
||||
|
||||
**MiniMax** هي شركة صينية للذكاء الاصطناعي، تكرس جهودها للبحث وتطوير تقنيات الذكاء الاصطناعي العام. أطلقت MiniMax سلسلة النموذج اللغوي الكبير MiniMax-M2.7 من تطويرها الخاص، والتي حققت أداءً ممتازًا في العديد من اختبارات المعايير، وتتميز بنسبة أداء إلى تكلفة عالية جدًا.
|
||||
|
||||
**الخصائص الرئيسية لسلسلة MiniMax-M2.7:**
|
||||
|
||||
- **سياق طويل جدًا**: يدعم نافذة سياق تصل إلى 204,800 رمز (tokens)، مما يجعله مناسبًا لمعالجة المستندات الطويلة والمحادثات متعددة الأدوار
|
||||
- **نسبة أداء إلى تكلفة عالية**: بسعر تنافسي للغاية
|
||||
- **واجهة متوافقة مع OpenAI**: يمكن استخدام OpenAI SDK مباشرة للاستدعاء، دون الحاجة لتعلم تنسيق API جديد
|
||||
- **نموذجان متاحان**:
|
||||
- `MiniMax-M2.7`: النموذج الرائد، مناسب للمهام المعقدة
|
||||
- `MiniMax-M2.7-highspeed`: الإصدار عالي السرعة، يحافظ على نفس الأداء ولكنه أسرع
|
||||
:::
|
||||
|
||||
طريقة التوصيل هي نفسها الخاصة بـ DeepSeek، وتتطلب ثلاث خطوات فقط:
|
||||
|
||||
1. انتقل إلى [منصة MiniMax المفتوحة](https://platform.minimax.io/) لتسجيل حساب وإنشاء API Key
|
||||
2. ابحث عن مثال الاستدعاء في وثائق MiniMax
|
||||
3. انسخ API Key + المثال والصقهما في AI IDE
|
||||
|
||||
نظرًا لأن MiniMax توفر واجهة متوافقة مع OpenAI، يمكنك ببساطة نسخ مثال curl أدناه مع API Key الخاص بك، وإرسالهما إلى AI IDE لإجراء التكامل:
|
||||
|
||||
```bash
|
||||
curl https://api.minimax.io/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${MINIMAX_API_KEY}" \
|
||||
-d '{
|
||||
"model": "MiniMax-M2.7",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
::: tip ✅ نصيحة
|
||||
تنسيق واجهة برمجة تطبيقات MiniMax متطابق تقريبًا مع DeepSeek (كلاهما يستخدم تنسيق OpenAI المتوافق)، لذلك إذا كنت قد دمجت DeepSeek بنجاح بالفعل، فإن التبديل إلى MiniMax يتطلب تعديل ثلاثة أشياء فقط:
|
||||
1. **عنوان URL الأساسي**: غيّره إلى `https://api.minimax.io/v1`
|
||||
2. **مفتاح API**: استخدم مفتاح API الخاص بـ MiniMax
|
||||
3. **اسم النموذج**: غيّره إلى `MiniMax-M2.7` أو `MiniMax-M2.7-highspeed`
|
||||
|
||||
لمزيد من المعلومات، يرجى الرجوع إلى [وثائق واجهة MiniMax المتوافقة مع OpenAI](https://platform.minimax.io/docs/api-reference/text-openai-api).
|
||||
:::
|
||||
|
||||
# 3. دمج واجهة برمجة تطبيقات تحويل الصور إلى نصوص: Qwen3 VL
|
||||
|
||||
::: info ℹ️ امتداد للمبدأ
|
||||
إذا كنت ترغب في معرفة المزيد عن المبادئ ذات الصلة، يرجى الاطلاع على الملحق: [مقدمة إلى نماذج اللغة المرئية (VLM)](/zh-cn/appendix/8-artificial-intelligence/multimodal-models).
|
||||
|
||||
::: details معرفة المزيد: ما هو Qwen3 VL؟
|
||||
|
||||
**Qwen3 VL** هو أحدث إصدار من سلسلة نماذج اللغة المرئية متعددة الوسائط التي أطلقتها فريق Qwen التابع لشركة Alibaba Cloud. يشير اختصار VL إلى "Vision-Language"، أي نموذج اللغة المرئية. يمكنه فهم محتوى الصور، وإنشاء أوصاف نصية بناءً على الصور، والإجابة على أسئلة حول الصور، واستخراج المعلومات من الصور، وغير ذلك.
|
||||
|
||||
|
||||
|
||||
|
||||
**تشمل القدرات الرئيسية لـ Qwen3 VL:**
|
||||
|
||||
- **فهم الصور**: القدرة على التعرف على الأشياء والمشاهد والأشخاص والنصوص وغيرها من المحتويات في الصور
|
||||
- **الإجابة المرئية على الأسئلة**: الإجابة بدقة على الأسئلة المتعلقة بالصور بناءً على استفسارات المستخدم
|
||||
- **وصف الصور**: إنشاء أوصاف نصية مفصلة أو موجزة للصور
|
||||
- **فهم الصور المتعددة**: دعم معالجة صور متعددة في نفس الوقت وإجراء تحليل مقارن
|
||||
- **استخراج النصوص**: استخراج المحتوى النصي من الصور (قدرة OCR)
|
||||
|
||||
**لماذا تختار Qwen3 VL؟**
|
||||
|
||||
مقارنة بالجيل السابق من النماذج، حقق Qwen3 VL تحسنًا كبيرًا في دقة فهم الصور، ويدعم مهام تحليل الصور الأطول والأكثر تعقيدًا. كما يتميز بأداء ممتاز في فهم اللغة الصينية، وتكلفة استدعاء واجهة برمجة التطبيقات (API) منخفضة نسبيًا، مما يمنحه نسبة قيمة عالية مقابل التكلفة. بالإضافة إلى ذلك، فإن نافذة السياق الخاصة به أكبر، مما يتيح له معالجة مهام الاستدلال المرئي الأكثر تعقيدًا.
|
||||
|
||||
**سيناريوهات التطبيق النموذجية:**
|
||||
|
||||
- التجارة الإلكترونية: إنشاء عناوين وأوصاف ونقاط بيع تلقائيًا لصور المنتجات
|
||||
- إنشاء المحتوى: إنشاء نصوص أو اقتراحات للصور المرفقة تلقائيًا بناءً على صور المواد
|
||||
- المكاتب: استخراج محتوى الصور، والتعرف التلقائي على التقارير
|
||||
- التعليم: التحليل التلقائي لأسئلة الصور، واستخراج نقاط المعرفة
|
||||
|
||||
:::
|
||||
|
||||
في الأجزاء السابقة، أوضحنا كيفية دمج واجهة برمجة تطبيقات إنشاء النصوص، ولكن بالنسبة لسيناريوهات التطبيق المذكورة سابقًا، سنلاحظ مشكلة واحدة: نحن نقوم برفع صورة، وإذا استخدمنا النماذج اللغوية الكبيرة (LLM) فقط، فلن تتمكن من فهم محتوى الصورة بشكل جيد، ومن المرجح أن تختلف النتائج المُنشأة.
|
||||
|
||||
نأمل أن يكون هناك نموذج يمكنه مساعدتنا في تحويل الصورة إلى وصف نصي، وهذا يتطلب استخدام نماذج اللغة المرئية (VLM). في هذه الحالة، سنستخدم نموذج اللغة المرئية لإنشاء أوصاف لنقاط بيع المنتجات، مما يعزز تجربة المستخدم.
|
||||
|
||||
للراحة، سنستخدم واجهة برمجة التطبيقات (API) التي توفرها [منصة SiliconFlow السحابية](https://cloud.siliconflow.cn/me) لدمج واجهة برمجة تطبيقات تحويل الصور إلى نصوص.
|
||||
|
||||
::: details معرفة المزيد: ما هي Siliconflow
|
||||
**SiliconFlow** هي منصة تجميع نماذج ذكاء اصطناعي معروفة محليًا، وتوفر خدمات واجهة برمجة تطبيقات (API) لمجموعة متنوعة من نماذج اللغة الكبيرة ونماذج اللغة المرئية السائدة.
|
||||
|
||||
**ميزات المنصة:**
|
||||
|
||||
- **دعم نماذج متعددة**: دمج مجموعة متنوعة من نماذج الذكاء الاصطناعي السائدة، بما في ذلك نماذج مفتوحة المصدر مثل سلسلة DeepSeek و Qwen و Llama وغيرها
|
||||
- **التحسين التقني**: التحسين للاستدلال للنماذج مفتوحة المصدر، وتوفير خدمات API بزمن استجابة منخفض وتزامن عالٍ
|
||||
- **توافق الواجهة**: توفير واجهات API متوافقة مع تنسيق OpenAI، مما يسهل التكامل مع التطبيقات الحالية
|
||||
- **الدفع عند الطلب**: دعم الاستخدام بطريقة الدفع بناءً على حجم الاستدعاءات
|
||||
|
||||
تعتبر SiliconFlow ناضجة نسبيًا في خدمات استدلال النماذج الكبيرة مفتوحة المصدر، وهي واحدة من الخيارات الشائعة لاستخدام نماذج الذكاء الاصطناعي المحلية مفتوحة المصدر.
|
||||
:::
|
||||
|
||||
بالدخول إلى الصفحة الرئيسية لمنصة SiliconFlow، يمكننا رؤية العديد من النماذج للاختيار من بينها. ابحث عن الفلتر في الزاوية اليسرى العليا، وانقر لتوسيع الفلتر، ثم حدد علامة التبويب "الرؤية" (Vision)، ويمكننا رؤية العديد من نماذج تحويل الصور إلى نصوص، مثل Zhipu GLM-4.6V أو Qwen3-VL.
|
||||
|
||||
|
||||
|
||||
يمكننا اختيار أي نموذج لاختباره، وهنا نأخذ `Qwen/Qwen3-VL-8B-Instruct` كمثال.
|
||||
|
||||
|
||||
|
||||
ادخل إلى [منصة SiliconFlow](https://cloud.siliconflow.cn/me/account/ak)، وفي قسم مفاتيح API، انقر على "إنشاء مفتاح API جديد" لإنشاء مفتاح API (API Key) جديد.
|
||||
|
||||
يمكنك استخدام الكود أدناه مباشرة ككود مرجعي، وإرساله مع مفتاح API الذي أنشأته إلى بيئة تطوير الذكاء الاصطناعي (AI IDE) لإجراء تكامل الوظائف.
|
||||
|
||||
::: details كود مرجعي لتحويل الصور إلى نصوص
|
||||
|
||||
```python
|
||||
from openai import OpenAI
|
||||
from typing import Dict, Any, List
|
||||
import base64
|
||||
import os
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
|
||||
MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
|
||||
|
||||
def encode_image(image_path: str) -> str:
|
||||
with open(image_path, "rb") as image_file:
|
||||
return base64.b64encode(image_file.read()).decode('utf-8')
|
||||
|
||||
def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL_NAME,
|
||||
messages=messages,
|
||||
max_tokens=512,
|
||||
temperature=0.7,
|
||||
top_p=0.7,
|
||||
frequency_penalty=0.5,
|
||||
stream=False,
|
||||
n=1
|
||||
)
|
||||
return response.choices[0].message.content
|
||||
|
||||
def caption_image(image_path: str) -> str:
|
||||
base64_image = encode_image(image_path)
|
||||
messages = [
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Please describe this image in detail."
|
||||
},
|
||||
{
|
||||
"type": "image_url",
|
||||
"image_url": {
|
||||
"url": f"data:image/jpeg;base64,{base64_image}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
client = OpenAI(
|
||||
api_key=SILICONFLOW_API_KEY,
|
||||
base_url=SILICONFLOW_BASE_URL
|
||||
)
|
||||
|
||||
return get_vlm_completion(client, messages)
|
||||
|
||||
image_path = "images.jpg"
|
||||
caption = caption_image(image_path)
|
||||
:::
|
||||
|
||||
في هذا السيناريو، نحاول مباشرةً جعل AI IDE يساعدنا في تنفيذ وظيفة توليد نصوص نقاط البيع للتجارة الإلكترونية والكلمات المفتاحية تلقائيًا من الصور المرفوعة، كما هو موضح أدناه:
|
||||
|
||||
```
|
||||
بناءً على واجهة برمجة تطبيقات تحويل الصورة إلى نص أدناه، ساعدنا في تنفيذ وظيفة توليد نصوص نقاط البيع للتجارة الإلكترونية والكلمات المفتاحية تلقائيًا من الصور المرفوعة
|
||||
|
||||
<تم حذف الكود هنا، يجب عليك لصق المفتاح والكود المرجعي بنفسك>
|
||||
```
|
||||
|
||||
أخيرًا نحصل على نتيجة التوليد:
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'أساسيات API', description: 'فهم المفاهيم الأساسية ومعايير الأمان' },
|
||||
{ title: 'ربط النص', description: 'تطبيق عملي لتوليد النصوص من DeepSeek' },
|
||||
{ title: 'ربط الصور', description: 'فهم وتوليد الصور باستخدام VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 4. ربط واجهة برمجة تطبيقات توليد الصور: Seedream
|
||||
|
||||
في الأجزاء السابقة تعاملنا بشكل أساسي مع المهام المتعلقة بالنص، بعد ذلك سنحاول ربط وظيفة توليد الصور، التي تدعم توليد الصور من الأوصاف النصية، أو تعديل الصور.
|
||||
|
||||
::: info ℹ️ امتداد للمبدأ
|
||||
إذا كنت ترغب في معرفة المزيد عن المحتوى المتعلق بالمبادئ، يرجى الاطلاع على الملحق: [مقدمة في توليد الصور](/zh-cn/appendix/8-artificial-intelligence/image-generation).
|
||||
|
||||
::: details اعرف المزيد: ما هو [Seedream](https://seed.bytedance.com/en/seedream4_5)؟
|
||||
|
||||
|
||||
|
||||
> ربما تعرف بالفعل Nano Banana (الذي طورته Google)، لكن من الأفضل ألا تفوت Seedream. Seedream 4.5 هو نموذج إنشاء صور من الجيل الجديد الذي طورته ByteDance. إنه يدمج قدرات توليد الصور وتحريرها في بنية موحدة. يتيح له ذلك التعامل بمرونة مع المهام متعددة الوسائط المعقدة، مثل التوليد القائم على المعرفة، والاستدلال المعقد، واتساق المرجع. بالإضافة إلى ذلك، فإن سرعة الاستدلال لديه أسرع بكثير من الجيل السابق، ويمكنه إنشاء صور عالية الدقة مذهلة بدقة تصل إلى 4K.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
**القدرات الرئيسية:**
|
||||
|
||||
- **توليد الصور من النص**: توليد صور من أوصاف نصية، ودعم أنماط متعددة (واقعي، كرتوني، رسم حبر، سايبربانك، إلخ)
|
||||
- **نقل الأسلوب**: تحويل صورة إلى أسلوب فني محدد
|
||||
- **متغيرات الصور**: إنشاء صور جديدة بأسلوب مشابه بناءً على صورة مرجعية
|
||||
- **تحسين الدقة**: تعزيز وضوح الصورة وتفاصيلها
|
||||
- **تحرير الصور**: تحرير وتعديل الصور الحالية من خلال تعليمات اللغة الطبيعية
|
||||
|
||||
**لماذا تختار Seedream؟**
|
||||
|
||||
- **استقرار الشبكة المحلية**: سرعة وصول محلية عالية، وزمن استجابة منخفض
|
||||
- **نتائج ممتازة**: أداء مستقر وموثوق في سيناريوهات التجارة الإلكترونية والمواد
|
||||
- **تحسين اللغة الصينية**: فهم أكثر دقة للكلمات المفتاحية الصينية، مناسب للمستخدمين المحليين
|
||||
- **سرعة عالية**: كفاءة توليد عالية، وقت استجابة قصير
|
||||
- **جودة مستقرة**: إنشاء صور عالية الدقة بدقة تصل إلى 4K
|
||||
|
||||
**سيناريوهات التطبيق النموذجية:**
|
||||
|
||||
- التجارة الإلكترونية: إنشاء الصور الرئيسية، وصور صفحات التفاصيل، وملصقات الترويج
|
||||
- وسائل التواصل الاجتماعي: إنشاء الصور الرمزية، والرموز التعبيرية، والصور المصاحبة
|
||||
- التصميم: إنشاء صور المفاهيم، وصور المواد، وصور الخلفيات بسرعة
|
||||
- التسويق: إنشاء صور الإعلانات، وبانرات الأنشطة، وملصقات الأعياد
|
||||
|
||||
**التكامل مع Qwen3 VL:**
|
||||
|
||||
يمكن استخدام واجهتي برمجة التطبيقات هاتين بشكل تسلسلي: استخدم أولاً Qwen3 VL لتحليل الصورة المرجعية وفهم محتوى الصورة؛ ثم استخدم Seedream لإنشاء صور جديدة بناءً على محتوى الكلمات المفتاحية للصورة المرجعية المحللة.
|
||||
:::
|
||||
|
||||
ربما تكون قد رأيت الكثير من "ملصقات AI / صور AI الرئيسية / صور شخصيات AI" على Douyin أو Bilibili أو YouTube، والتي تستخدم في جوهرها التقنية المقدمة في هذا القسم. ما تحتاج إلى القيام به بسيط للغاية: قم بتنظيم إدخال المستخدم في جملة واحدة، واطلب واجهة برمجة تطبيقات الصور، ثم اعرض الصورة المُعادة. النموذج المستخدم في هذا الوقت يسمى نموذج توليد الصور / تحرير الصور.
|
||||
|
||||
سنوضح خطوة بخطوة كيفية دمج Seedream API في مشروعك (بمساعدة AI IDE).
|
||||
|
||||
بعد [زيارة الصفحة الرئيسية](https://www.volcengine.com/experience/ark?launch=seedream)، انقر لتسجيل الدخول.
|
||||
|
||||
|
||||
|
||||
بعد تسجيل الدخول، ابحث عن خيار الشحن في الزاوية العلوية اليمنى من الصفحة.
|
||||
|
||||
|
||||
|
||||
يتطلب الشحن مصادقة الاسم الحقيقي.
|
||||
|
||||
|
||||
|
||||
بعد نجاح المصادقة، يمكنك [شحن 1 يوان للاختبار](https://console.volcengine.com/finance/fund/recharge).
|
||||
|
||||
ارجع إلى [الواجهة الأولية](https://www.volcengine.com/experience/ark?launch=seedream) وانقر على الوصول عبر API.
|
||||
|
||||
|
||||
|
||||
أولاً، قم بإنشاء مفتاح API، ثم انقر لتحديد الخيار.
|
||||
|
||||
|
||||
|
||||
سيأخذك هذا إلى الخطوة الثانية. هنا، تحتاج إلى التأكد من أن الخدمة التي تستدعيها هي Seedream 4.5، ونسخ مثال الاستدعاء المقدم. (لقطة الشاشة هنا التُقطت في وقت مبكر، لذا لا يزال إصدار النموذج 4.0)
|
||||
|
||||
|
||||
|
||||
بعد تجهيز مفتاح API ومثال الاستدعاء، يمكنك لصقهما مباشرة في AI IDE، والسماح له بإنشاء عرض تفاعلي للواجهة الأمامية أو دمج القدرة في النموذج الأولي الحالي. لاحظ أنه في الصورة يمكنك اختيار ما إذا كان توليد صورة من نص أو توليد صورة واحدة من صور متعددة، تحتاج إلى اختيار الكود المرجعي بناءً على المتطلبات الحالية.
|
||||
|
||||
::: warning ⚠️ تلميح مهم
|
||||
المثال الافتراضي هنا معقد نسبيًا. تذكر تعطيل **"إضافة علامة مائية"** و**"الاستجابة المتدفقة"**، لضمان عدم إنشاء علامة مائية وعدم فشل الطلب.
|
||||
:::
|
||||
|
||||
نظرًا لأننا سنستخدم وضع إنشاء الصور المرجعية لاحقًا، فإننا نذهب أولاً إلى وظيفة إنشاء صورة واحدة من صور متعددة. يتم نسخ الكود المرجعي على النحو التالي:
|
||||
|
||||
```
|
||||
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer xxxxxxx" \
|
||||
-d '{
|
||||
"model": "doubao-seedream-4-5-251128",
|
||||
"prompt": "غيّر ملابس الصورة الأولى لتصبح مثل ملابس الصورة الثانية",
|
||||
"image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
|
||||
"sequential_image_generation": "disabled",
|
||||
"response_format": "url",
|
||||
"size": "2K",
|
||||
"stream": false,
|
||||
"watermark": true
|
||||
}'
|
||||
```
|
||||
|
||||
بعد الحصول على كود مرجعي للصور، نجعل AI IDE يدعم وظائف مهام الصور الشائعة في التجارة الإلكترونية:
|
||||
|
||||
```
|
||||
يرجى بناءً على واجهة برمجة التطبيقات أدناه، مساعدتي في تنفيذ الوظائف الشائعة لأعمال التجارة الإلكترونية في هذا المشروع (مثل إنشاء الملصقات، وإنشاء الصورة الرئيسية لتجارة Douyin الإلكترونية، إلخ)
|
||||
|
||||
<الصق مفتاح API وكود تحرير الصور هنا>
|
||||
```
|
||||
|
||||
تأثير التنفيذ كالتالي:
|
||||
|
||||
|
||||
من الجدير بالذكر أنه نظرًا لأن إنشاء الصور قد يواجه غالبًا بعض المشاكل الغريبة، يُنصح بأن تسمح لـ AI IDE بعرض رسائل الخطأ الكاملة لتسهيل النسخ واللصق لإجراء التعديلات (وإلا فقد يظهر فشل الإنشاء بشكل متكرر دون معرفة السبب)، على سبيل المثال يمكنك أن تقول:
|
||||
|
||||
```
|
||||
لا تعرض فقط فشل إنشاء الصورة، بل اعرض السبب الكامل للفشل في كل مرة، مثل عدم تطابق الصور، خطأ في الطلب، انتهاء المهلة، إلخ!
|
||||
```
|
||||
|
||||
في بعض الأحيان لا يتم تطبيق التحديثات بعد التعديل على صفحة الويب. إذا لاحظت أن صفحة الويب تستمر في إظهار الأخطاء بعد التعديل (بشكل متكرر)، يمكنك أيضًا محاولة القول مباشرةً لـ AI IDE: يرجى إعادة تشغيل هذا المشروع.
|
||||
|
||||
في أعمال التجارة الإلكترونية، قد نرغب في جعل الملابس التي يحملها المستخدم يتم ارتداؤها تلقائيًا على شخصية، أو إنشاء صور بيع وجذابة للمنتجات أو ملصقات تلقائيًا. هنا المطالبة التي نحاول استخدامها هي جعلها تنشئ ملصقًا للتجارة الإلكترونية:
|
||||
|
||||
|
||||
|
||||
يمكنك، بناءً على سيناريو العمل الذي تتخيله، استخدام واجهة برمجة تطبيقات تحويل النص إلى صورة أو تحويل الصورة إلى صورة لتحقيق وظائف مختلفة.
|
||||
|
||||
## المزيد من الخيارات المختلفة لخدمات الصور
|
||||
|
||||
فيما يلي خيارات أخرى. يُنصح بأن تقوم بتشغيل نتائج إنشاء الصور من Qwen أولاً، ثم استخدام الخدمات التالية كبديل بناءً على التأثير والتكلفة (اختر بناءً على تجربة الاستخدام الفعلية).
|
||||
|
||||
### تكامل Recraft
|
||||
|
||||
إذا كان نموذجك الأولي يميل أكثر إلى "إنتاج التصميم" (مثل إنشاء رسوم توضيحية بأسلوب العلامة التجارية، ملصقات تسويقية، مواد بأسلوب متجهي)، فإن Recraft غالبًا سيكون أكثر ملاءمة. طريقة التكامل هي نفسها تمامًا كما في القسم السابق: **الحصول على المفتاح + العثور على المثال الرسمي + جعل AI IDE يطبق المثال على الزر/الصفحة الخاصة بك**.
|
||||
|
||||
::: details معرفة المزيد: ما هو Recraft؟
|
||||
|
||||
> Recraft هي أداة AI موجهة للمصممين والرسامين والمسوقين - تأسست في عام 2022 في الولايات المتحدة، ومقرها في لندن. تساعد في إنشاء/تكرار المرئيات (الصور، الفن المتجهي، الرسومات ثلاثية الأبعاد)، مع ميزات مثل مخرجات عالية الجودة (أي حجم/طول للنص)، وتحديد دقيق للعناصر، وتصميم متسق مع العلامة التجارية. موثوق بها من قبل أكثر من 3 ملايين مستخدم في 200 دولة (بما في ذلك Ogilvy و Netflix)، وتم إنشاء أكثر من 350 مليون صورة، ويهدف فريقها إلى جعلها أداة لا غنى عنها للمصممين، مما يضمن قدرة المبدعين على التحكم في سير عملهم المدعوم بالـ AI.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
أولاً، لا يزال يتعين علينا العثور على [مدخل API](https://www.recraft.ai/profile/api) للحصول على مفتاح API.
|
||||
|
||||
نظرًا لعدم توفير رصيد مجاني هنا، نحتاج إلى شحن 1,000 نقطة بأنفسنا. يدعم هذا الموقع Alipay و WeChat Pay، لذلك من السهل الحصول على 1,000 نقطة (ملاحظة: لا تشحن أكثر من الضروري).
|
||||
|
||||
|
||||
|
||||
بعد ذلك، لا نزال نتبع نفس الطريقة: الذهاب إلى الوثائق الرسمية للعثور على مثال الطلب المقابل:
|
||||
|
||||
- <https://www.recraft.ai/docs/api-reference/getting-started>
|
||||
- <https://www.recraft.ai/docs/api-reference/usage>
|
||||
- <https://www.recraft.ai/docs/api-reference/guides>
|
||||
|
||||
:::
|
||||
|
||||
### تكامل Qwen Image / Qwen Image Edit
|
||||
|
||||
إ كنت ترغب في استخدام طريقة أبسط للاتصال بخدمة إنشاء الصور، يمكنك التفكير في Qwen Image (Tongyi Wanxiang). يبقى النهج كما هو: تعامله كـ "واجهة برمجة تطبيقات لإنشاء الصور"، وقم بتوصيله بزر النموذج الأولي الخاص بك.
|
||||
|
||||
::: details معرفة المزيد: ما هو Qwen Image / Qwen Image Edit؟
|
||||
|
||||
**Qwen Image** (المعروف أيضًا باسم Tongyi Wanxiang) هي سلسلة نماذج إنشاء الصور التي أطلقتها فريق Tongyi التابع لـ Alibaba Cloud، وتتضمن بشكل أساسي نموذجين كبيرين:
|
||||
|
||||
**1. Qwen Image —— نموذج تحويل النص إلى صورة (Text-to-Image)**
|
||||
|
||||
ينشئ صورًا جديدة بناءً على وصف نصي. تقوم بإدخال مطالبة، ويفهم النموذج نيتك ويقوم بإنشاء صورة تتطابق مع الوصف.
|
||||
|
||||
|
||||
|
||||
**القدرات الرئيسية:**
|
||||
|
||||
- **تحويل النص إلى صورة**: إنشاء صور من وصف نصي، ودعم أنماط متعددة (واقعي، كرتوني، رسم بالحبر، سايبربانك، إلخ)
|
||||
- **نقل الأسلوب**: تحويل صورة إلى أسلوب فني محدد
|
||||
- **متغيرات الصورة**: إنشاء صور جديدة بأسلوب مشابه بناءً على صورة مرجعية
|
||||
- **تحسين الدقة**: تعزيز وضوح الصورة وتفاصيلها
|
||||
|
||||
**2. Qwen Image Edit —— نموذج تحويل الصورة إلى صورة (Image-to-Image)**
|
||||
|
||||
تحرير وتعديل الصور الحالية. من خلال تعليمات اللغة الطبيعية، دع النموذج يفهم نية التعديل الخاصة بك ويقوم بإنشاء النتيجة.
|
||||
|
||||
**القدرات الرئيسية:**
|
||||
|
||||
- **الاستبدال المحلي**: استبدال كائن أو شخص معين في الصورة (مثل "تغيير الخلفية إلى شاطئ البحر")
|
||||
- **إزالة العناصر**: إزالة العناصر غير المرغوب فيها من الصورة
|
||||
- **تحويل الأسلوب**: إضافة فلاتر أو تأثيرات فنية إلى الصورة
|
||||
- **توسيع الصورة**: توسيع حدود الصورة لإنشاء محتوى جديد
|
||||
- **تحرير ذكي للصور**: تجميل تلقائي، ضبط الإضاءة والظلال، إصلاح العيوب
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**لماذا تختار سلسلة Qwen Image؟**
|
||||
|
||||
- **مُحسّن للصينية**: فهم أكثر دقة للمطالبات الصينية، ومناسب للمستخدمين المحليين
|
||||
- **تكلفة منخفضة**: مقارنة بالمنتجات التنافسية الدولية، السعر أكثر بأسعار معقولة
|
||||
- **سرعة عالية**: كفاءة إنشاء عالية، وقت استجابة قصير
|
||||
- **جودة مستقرة**: أداء مستقر وموثوق في سيناريوهات التجارة الإلكترونية والمواد
|
||||
- **أنماط متنوعة**: دعم مجموعة متنوعة من الأنماط الفنية والتأثيرات الإبداعية
|
||||
|
||||
**سيناريوهات التطبيق النموذجية:**
|
||||
|
||||
- التجارة الإلكترونية: إنشاء الصور الرئيسية، صور صفحات التفاصيل، ملصقات ترويجية
|
||||
- وسائل التواصل الاجتماعي: إنشاء صور الملف الشخصي، الرموز التعبيرية، الصور المصاحبة
|
||||
- التصميم: إنشاء سريع للرسومات المفاهيمية، صور المواد، صور الخلفية
|
||||
- التسويق: إعلانات، لافتات الأنشطة، ملصقات الأعياد
|
||||
:::
|
||||
|
||||
تحقق من الموقع الرسمي لـ [SiliconFlow](https://siliconflow.cn/). يوجد قسم "Playground" على الجانب الأيسر، حيث يمكنك تجربة نماذج مختلفة دون إجراء استدعاءات API. يوجد زر "Filters" في أعلى صفحة الويب؛ انقر فوقه لتصفية قائمة النماذج الموجودة على اليمين.
|
||||
|
||||
إذا اخترت "Image"، فسترى فقط جميع نماذج تحويل النص إلى صورة المدعومة حاليًا. في هذه الحالة، سنستخدم Qwen/Qwen-Image.
|
||||
|
||||
|
||||
|
||||
بعد إعداد كل شيء، نحتاج إلى الرجوع إلى وثائق واجهة برمجة تطبيقات إنشاء الصور المقابلة. يمكنك العثور على أي قسم يحمل علامة "API Reference" في صفحة الوثائق الرسمية. انقر فوقه، ثم انتقل إلى [قسم API لإنشاء الصور](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) وابحث عن مثال الطلب ذي الصلة.
|
||||
|
||||
يمكنك إرسال مثال الطلب التالي مع API KEY إلى AI IDE، لتحقيق وظيفة إنشاء الصور.
|
||||
|
||||
```bash
|
||||
curl --request POST \
|
||||
--url https://api.siliconflow.cn/v1/images/generations \
|
||||
--header 'Authorization: Bearer <token>' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data '
|
||||
{
|
||||
"model": "Qwen/Qwen-Image-Edit-2509",
|
||||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||||
}
|
||||
'
|
||||
```
|
||||
|
||||
يمكن استخدام النموذج Qwen/Qwen-Image أو Qwen/Qwen-Image-Edit-2509 هنا.
|
||||
|
||||
::: details كود مرجعي لتحرير الصور
|
||||
|
||||
انسخ الكود التالي والمفتاح (key)، وأرسلهما معًا إلى AI IDE:
|
||||
|
||||
```python
|
||||
import requests
|
||||
import os
|
||||
from typing import Dict, Any, Optional
|
||||
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
|
||||
QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
|
||||
|
||||
def generate_image_edit(
|
||||
prompt: str,
|
||||
image: Optional[str] = None,
|
||||
image2: Optional[str] = None,
|
||||
image3: Optional[str] = None,
|
||||
negative_prompt: Optional[str] = None,
|
||||
cfg: Optional[float] = 4.0,
|
||||
seed: Optional[int] = None
|
||||
) -> Optional[Dict[str, Any]]:
|
||||
payload: Dict[str, Any] = {
|
||||
"model": QWEN_IMAGE_EDIT_MODEL,
|
||||
"prompt": prompt,
|
||||
}
|
||||
if image:
|
||||
payload["image"] = image
|
||||
if image2:
|
||||
payload["image2"] = image2
|
||||
if image3:
|
||||
payload["image3"] = image3
|
||||
if negative_prompt:
|
||||
payload["negative_prompt"] = negative_prompt
|
||||
if cfg is not None:
|
||||
payload["cfg"] = cfg
|
||||
if seed is not None:
|
||||
payload["seed"] = seed
|
||||
|
||||
headers: Dict[str, str] = {
|
||||
"Authorization": f"Bearer {SILICONFLOW_API_KEY}",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
|
||||
response.raise_for_status()
|
||||
return response.json()
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error generating image: {e}")
|
||||
return None
|
||||
|
||||
def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
|
||||
try:
|
||||
response = requests.get(image_url)
|
||||
response.raise_for_status()
|
||||
os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
|
||||
with open(output_path, "wb") as f:
|
||||
f.write(response.content)
|
||||
print(f"Image saved successfully to: {output_path}")
|
||||
return True
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error downloading image: {e}")
|
||||
return False
|
||||
except Exception as e:
|
||||
print(f"Error saving image: {e}")
|
||||
return False
|
||||
|
||||
prompt: str = "اجعل السماء في وقت المساء، مع قمر ونجوم، بأسلوب حالم"
|
||||
negative_prompt: str = "ضبابي، جودة منخفضة، مشوّه"
|
||||
image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
|
||||
image2_url: Optional[str] = None
|
||||
image3_url: Optional[str] = None
|
||||
|
||||
cfg: float = 4.0
|
||||
seed: int = 12345
|
||||
output_path: str = "edited_image.png"
|
||||
|
||||
print(f"Generating edited image with prompt: {prompt}")
|
||||
print(f"Input image: {image_url}")
|
||||
print(f"CFG: {cfg}, Seed: {seed}")
|
||||
print("-" * 50)
|
||||
|
||||
result = generate_image_edit(
|
||||
prompt=prompt,
|
||||
image=image_url,
|
||||
image2=image2_url,
|
||||
image3=image3_url,
|
||||
negative_prompt=negative_prompt,
|
||||
cfg=cfg,
|
||||
seed=seed
|
||||
)
|
||||
|
||||
if result and "images" in result:
|
||||
images = result["images"]
|
||||
if images and len(images) > 0:
|
||||
image_url_result = images[0]["url"]
|
||||
print(f"Image edit generated successfully. URL: {image_url_result}")
|
||||
success = save_image_from_url(image_url_result, output_path)
|
||||
if success:
|
||||
print(f"Image saved to: {output_path}")
|
||||
else:
|
||||
print("Failed to save image to local file")
|
||||
else:
|
||||
print("No images found in response")
|
||||
else:
|
||||
print("Image generation failed")
|
||||
if result:
|
||||
print(f"Response: {result}")
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# الملحق: كيفية العثور على نموذج AI "الأقوى حالياً"
|
||||
|
||||
تتطور النماذج النصية (والتي تُعرف غالباً بـ "النماذج اللغوية الكبيرة" أو LLMs) بسرعة كبيرة، ونحتاج دائماً إلى التأكد من أننا نستخدم أحد النماذج ذات الأداء الأفضل. من خلال الموقعين التاليين، يمكنك بسهولة رؤية "النماذج الشائعة الاستخدام حالياً والتي تحظى بتقييمات أفضل".
|
||||
|
||||
بشكل عام، يمكن فهم هذه المواقع على أنها **"ساحة منافسة للنماذج"**: حيث يتم وضع مخرجات نموذجين معاً، وتصوت للنموذج الذي تفضله. النموذج الحاصل على أصوات أعلى، يعني عادةً أن المزيد من الناس يرون أنه "أفضل في الاستخدام".
|
||||
|
||||
بالإضافة إلى ذلك، قد تلاحظ أحياناً في هذه الساحات نماذج مجهولة وغامضة ("Unknown Model"). هذا يعني عادةً: أن شخصاً ما قام بإدخال "نموذج اختبار داخلي" سراً لإجراء اختبار أعمى، وقد تتيح لك الفرصة لتجربة قدرات أقوى مسبقاً.
|
||||
|
||||
## LMArena
|
||||
|
||||
الموقع: <https://lmarena.ai/>
|
||||
|
||||
يناسب LMArena بشكل أفضل لتحديد "الإجابة التي يفضلها معظم الناس لنموذج معين". كلما زادت الأصوات وارتفعت النتيجة، يعني ذلك عادةً أنه أكثر استقراراً في سيناريوهات الاستخدام الفعلية.
|
||||
|
||||
طريقة استخدام بسيطة هي:
|
||||
|
||||
1. النظر مباشرة إلى لوحة المتصدرين (Leaderboard)
|
||||
2. اختيار التوجه الذي ترغب فيه أولاً (على سبيل المثال: محادثة عامة / برمجة / رؤية حاسوبية)
|
||||
3. اختيار النموذج المتاح لك من بين أفضل 3 (يمكنك الوصول إليه، وسعره مقبول، و زمن الاستجابة مقبول)
|
||||
|
||||
|
||||
|
||||
## Artificial Analysis
|
||||
|
||||
الموقع: <https://artificialanalysis.ai/>
|
||||
|
||||
يناسب Artificial Analysis بشكل أفضل لمقارنة "الأداء / السعر / السرعة" في جدول واحد، ويمكنك اعتباره كجدول مواصفات لاختيار النموذج.
|
||||
|
||||
طرق الاستخدام الشائعة هي:
|
||||
|
||||
1. العثور على فئة النموذج التي تهتم بها (نص / توليد صور، إلخ)
|
||||
2. النظر إلى مؤشرات الجودة (Quality) + السعر (Price) + زمن الاستجابة/الإنتاجية (Latency/Throughput)
|
||||
3. اختيار نموذج يمثل "أفضل قيمة شاملة" يناسب منتجك
|
||||
|
||||
::: tip ✅ نصيحة
|
||||
لا تتجادل بناءً على الشعور حول "أيهما أقوى". النهج الأكثر موثوقية هو: اختبار 2~3 نماذج في نفس الوقت باستخدام نفس مجموعة المدخلات، ثم اتخاذ القرار بناءً على لوحات المتصدرين والأسعار.
|
||||
:::
|
||||
|
||||
## الخلاصة
|
||||
|
||||
عند التكامل مع مختلف خدمات AI، لا داعي لتخيل أن الـ API معقد للغاية. من خلال إمساك المفاهيم الأساسية التالية، يمكنك التعامل مع معظم السيناريوهات بشكل أساسي:
|
||||
|
||||
**جوهر الـ API هو جسر اتصال**. ما يفعله بسيط جداً: إرسال طلبك، ثم إعادة استجابة النموذج إليك. لا تحتاج إلى الاهتمام بما يحدث في الخلفية، كل ما عليك فعله هو تنظيم تنسيق الطلب بشكل صحيح.
|
||||
|
||||
**الـ SDK هو تغليف للـ API**. إذا كان الـ API هو الواجهة الخام (raw)، فإن الـ SDK هو مجموعة أدوات جاهزة - حيث يقوم بإنجاز التفاصيل المملة مثل توقيع الطلبات، ومعالجة الأخطاء، والتحقق من المعلمات نيابةً عنك. في التطوير اليومي، يُفضل اختيار الـ SDK بدلاً من استدعاء الـ API مباشرة، مما يوفر عليك الكثير من المتاعب.
|
||||
|
||||
**عند قراءة الوثائق، يكفي التركيز على ثلاثة أشياء فقط**: عنوان الخدمة (endpoint)، وبيانات الاعتماد (API key)، وكيفية ملء معلمات الاستدعاء. بمجرد توضيح هذه النقاط الثلاث، فإن نجاح الاستدعاء هو مسألة وقت فقط.
|
||||
|
||||
باقي العمل، ستقوم بيئة التطوير المتكاملة (IDE) وأدوات التطوير الحديثة بمساعدتك في إنجازه. ركز على منطق عملك، واترك أمور الاستدعاءات الأساسية لهذه الـ SDKs وسلاسل الأدوات الناضجة.
|
||||
|
||||
# 5. 📚 الواجب: تكامل قدرتك الأولى في AI
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 مهمة التحدي: تكامل قدرات AI في مساحة عملك</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
بالرجوع إلى الـ prompts ومحتوى هذا الدرس، قم بإكمال دورة كاملة مغلقة:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>ممارسة الدورة الكاملة المغلقة</strong>
|
||||
<ul>
|
||||
<li>اختر واتصل بخدمة AI (LLM / نص لصورة / صورة لصورة) → قم بتنفيذ التفاعل بين الواجهة الأمامية والخلفية → قم بدمجها في النموذج الأولي الخاص بك</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>مشاركة النتائج</strong>
|
||||
<ul>
|
||||
<li>التقط لقطة شاشة لصفحة وظيفتك وشاركها مع الجميع</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>سؤال تفكيري</strong>
|
||||
<ul>
|
||||
<li>اترك مساحة للدرس التالي "ممارسة مشروع كامل"، وفكر مسبقاً: كيف تنوي دمج هذه قدرات AI معاً لصنع وظيفة ممتعة؟</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## الخطوة التالية
|
||||
|
||||
في القسم التالي، سنربط هذه قدرات AI المتباينة معاً، ونبني منتجاً كاملاً بالجمع بين سيناريوهات العمل الفعلية:
|
||||
|
||||
- ربط مراحل مثل تخطيط المحتوى، ورفع المنتجات، وتحليل البيانات في مسار عمل كامل
|
||||
- تضمين قدرات AI التي تعلمناها في هذا الدرس (توليد النصوص عبر LLM، نص لصورة، تحرير الصور، إلخ) في عقد العمل الفعلية
|
||||
- بناء "مساحة عمل AI للتجارة الإلكترونية" قابلة للاستخدام فعلياً، وليس مجرد demo معزول
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="مقالات ذات صلة"
|
||||
description="مسار التعلم الموصى به من قدرة AI فردية إلى مسار منتج كامل."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,275 @@
|
||||
---
|
||||
title: 'من الفكرة إلى منتج AI - خريطة طريق تعلم Easy-Vibe'
|
||||
description: 'خريطة طريق كاملة لتعلم برمجة الذكاء الاصطناعي: من الصفر إلى التطوير الشامل. أتقن أدوات AI IDE مثل Vibe Coding و Claude Code و Cursor، وتعلم التفكير في المنتجات والتطوير الشامل وتكامل قدرات الذكاء الاصطناعي.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['ar-sa/stage-1/learning-map'] ?? []
|
||||
</script>
|
||||
|
||||
# من الفكرة إلى منتج AI
|
||||
|
||||
::: info شكر خاص
|
||||
شكر خاص لطلاب **جامعة تسينغهوا بم-campus شنتشن الدولي للدراسات العليا** على اختبار هذه الدورة التدريبية وتقديم الملاحظات والدعم! آراؤكم ومساهماتكم جعلت هذه الدورة أفضل. [👉 عرض قائمة المساهمين الكاملة](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
|
||||
:::
|
||||
|
||||
في الماضي، كان صنع البرمجيات يتطلب مستوى عالٍ: كنت بحاجة إلى فهم البرمجة والخوارزميات، والحصول على خبرة مشروع لعدة سنوات.
|
||||
الآن الأمر مختلف. طالما لديك فكرة، يمكن للذكاء الاصطناعي مساعدتك في كتابة التعليمات البرمجية.
|
||||
|
||||
هذا تغيير كبير: **لغات البرمجة أصبحت لغات طبيعية**.
|
||||
|
||||
مع ظهور النماذج اللغوية الكبيرة (LLM)، لم يعد التطوير "حكرًا على خبراء التقنية"، بل أصبح أداة يمكن للجميع استخدامها. كان أصعب جزء في الماضي هو "كيفية كتابة التعليمات البرمجية"، أما الآن فأصعب جزء هو "**ماذا تريد أن تصنع**".
|
||||
|
||||
> **ما هو Vibe Coding؟**
|
||||
> ببساطة، هو "البرمجة بالكلام". Vibe Coding يعني أنه يمكنك الاعتماد على التحدث مع الذكاء الاصطناعي فقط، بدلاً من كتابة التعليمات البرمجية مباشرة، لإكمال مشاريع البرمجة.
|
||||
|
||||
بالطبع، جعل الذكاء الاصطناعي يكتب التعليمات البرمجية هو مجرد الخطوة الأولى. لصنع منتج حقيقي قابل للاستخدام، ستواجه هذه المشكلات:
|
||||
- كيف تجعل الذكاء الاصطناعي يكتب تعليمات برمجية نظيفة وقابلة للصيانة؟
|
||||
- كيف تجمع التعليمات البرمجية المتناثرة في تطبيق يعمل؟
|
||||
- كيف تجعل التطبيق يعمل فعليًا ويستخدمه الناس؟
|
||||
- كيف تدمج قدرات الذكاء الاصطناعي مثل إنشاء النصوص والتعرف على الصور في منتجك؟
|
||||
|
||||
ستجد الإجابات على هذه الأسئلة في هذه الدورة.
|
||||
|
||||
سواء كنت طالبًا أو معلمًا أو طبيبًا أو عاملًا أو أي شخص عادي لا يعرف أي شيء عن التقنية - لا تحتاج إلى تعلم البرمجة لسنوات، يمكنك صنع نموذج أولي للمنتج يعمل ويمكن عرضه في غضون أسبوعين.
|
||||
|
||||
| هويتك | ما يمكن أن تساعدك هذه الدورة |
|
||||
|---------|-------------|
|
||||
| طالب | الواجبات والمسابقات وريادة الأعمال، اصنع مشاريعك بنفسك، بدلاً من طلب المساعدة من الآخرين |
|
||||
| محترف | أتمتة العمل المتكرر، تحسين الكفاءة، حتى تطوير مشروع جانبي |
|
||||
| مدير منتجات / مصمم | الأفكار لم تعد تبقى على الورق، يمكنك إنشاء عرض تجريبي سريع لرؤسائك/عملائك |
|
||||
| رائد أعمال / صاحب مشروع صغير | التحقق من الأفكار بتكلفة منخفضة، يمكنك صنع MVP دون إنفاق آلاف على الاستعانة بمصادر خارجية |
|
||||
| معلم / عامل في مجال التعليم | إنشاء أدوات تعليمية ومواد دورات والاختبار الآلي، تحسين كفاءة التدريس |
|
||||
| طبيب / محامي / عامل محترف | أتمتة العمليات المهنية، وبناء أدوات الكفاءة الخاصة بك |
|
||||
| أي شخص | استخدام الذكاء الاصطناعي لحل مشكلات محددة في الحياة/العمل، تحويل المستحيل إلى ممكن |
|
||||
|
||||
في عصر الذكاء الاصطناعي، القدرة على التنفيذ والأفكار أهم دائمًا من التقنية.
|
||||
|
||||
## مسار النمو: من "يعرف استخدام الذكاء الاصطناعي" إلى "يعرف صنع منتجات الذكاء الاصطناعي"
|
||||
|
||||
<div class="stage-intro">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎮</div>
|
||||
<h3>دليل المبتدئين</h3>
|
||||
<p class="stage-role">تجربة برمجة الذكاء الاصطناعي</p>
|
||||
<div class="stage-tags">
|
||||
<span>لعبة الثعبان الصغيرة</span>
|
||||
<span>البدء من الصفر</span>
|
||||
<span>أول تجربة لـ Vibecoding</span>
|
||||
<span>إنشاء في بضع دقائق</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-grid">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🛠️</div>
|
||||
<h3>المرحلة الأولى</h3>
|
||||
<p class="stage-role">مدير المنتجات / العمليات</p>
|
||||
<div class="stage-tags">
|
||||
<span>AI IDE (Cursor/Claude)</span>
|
||||
<span>تفكيك المتطلبات والنماذج الأولية</span>
|
||||
<span>تكامل قدرات الذكاء الاصطناعي</span>
|
||||
<span>تطوير Demo كامل</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>المرحلة الثانية</h3>
|
||||
<p class="stage-role">مطور متوسط/مبتدئ / مطور مستقل</p>
|
||||
<div class="stage-tags">
|
||||
<span>من Figma إلى التعليمات البرمجية</span>
|
||||
<span>قاعدة بيانات Supabase</span>
|
||||
<span>تكامل دفع Stripe</span>
|
||||
<span>قاعدة معرفة Dify</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>المرحلة الثالثة</h3>
|
||||
<p class="stage-role">مطور متقدم / مهندس معماري</p>
|
||||
<div class="stage-tags">
|
||||
<span>ويب/تطبيقات صغيرة/متعدد المنصات</span>
|
||||
<span>أدوات MCP المتقدمة</span>
|
||||
<span>RAG & LangGraph</span>
|
||||
<span>تفكير المهندس المتقدم</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stage-intro {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: var(--vp-c-bg-mute);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stage-role {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stage-tags span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-card:hover .stage-tags span {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
من خلال مسار التعلم الكامل هذا، ستحصل على:
|
||||
|
||||
- **قدرة تطوير Vibe Coding:** إتقان التفكير في vibecoding وأدوات الترميز بالذكاء الاصطناعي، وزيادة كفاءة التطوير عدة مرات. لم تعد بحاجة إلى حفظ القواعد عن ظهر قلب، بل تعلم كيفية توجيه الذكاء الاصطناعي لتوليد تعليمات برمجية عالية الجودة.
|
||||
- **مهارات التطوير الشامل:** من تصميم واجهة المستخدم إلى تنفيذ الواجهة الأمامية، من تصميم قاعدة البيانات إلى تطوير API، من التطوير المحلي إلى النشر السحابي، إتقان مجموعة التقنيات الكاملة لتطبيقات الويب الحديثة.
|
||||
- **تكامل قدرات الذكاء الاصطناعي:** تعلم استدعاء واجهات برمجة تطبيقات الذكاء الاصطناعي متعددة الوسائط المختلفة، ودمج قدرات الذكاء الاصطناعي مثل النصوص والصور والكلام بسلاسة في تطبيقاتك، وبناء منتجات ذكية من خلال تقنيات مثل RAG.
|
||||
- **التفكير في المنتجات وقدرات العمليات:** من بحث المستخدمين إلى تفكيك المتطلبات، من تصميم MVP إلى تكرار المنتج، من تكامل المدفوعات إلى إدارة المستخدمين، تشكيل حلقة كاملة من تطوير المنتجات والعمليات.
|
||||
|
||||
# ماذا يمكنك أن تفعل بعد التعلم؟
|
||||
|
||||
## المرحلة الأولى: اصنع نموذجك الأولي للمنتج
|
||||
|
||||
هذه المرحلة مناسبة للطلاب الذين ليس لديهم أساس برمجي على الإطلاق، أو الذين يعرفون القليل فقط لكنهم ليسوا واثقين. لا تحتاج إلى تعلم الكثير من النظريات أولاً، بل اتبع الخطوات مباشرة وتعلم استخدام أدوات الذكاء الاصطناعي لكتابة التعليمات البرمجية أثناء العملية.
|
||||
|
||||
**بعد التعلم ستتمكن من**:
|
||||
- استخدام أدوات برمجة الذكاء الاصطناعي بشكل مستقل لإكمال تطبيق ويب
|
||||
- تحويل أفكار المنتجات إلى نماذج أولية قابلة للنقر والتفاعل
|
||||
- إضافة ميزات ذكاء اصطناعي للنموذج الأولي (مثل إنشاء الصور من النصوص، المحادثة الذكية)
|
||||
- معرفة كيفية استكشاف الأخطاء وإصلاحها عند مواجهتها
|
||||
|
||||
ببساطة، ستتمكن من صنع شيء "يعمل ويمكن عرضه للآخرين".
|
||||
|
||||
يمكننا أولاً تجربة برمجة الذكاء الاصطناعي من خلال الألعاب الصغيرة، ثم تعلم كيفية استخدام أدوات برمجة الذكاء الاصطناعي لمساعدتك في كتابة التعليمات البرمجية وإصلاح الأخطاء. ثم البدء بصفحة بسيطة، والعمل تدريجيًا نحو تطبيق متعدد الصفحات تفاعلي، ثم إضافة ميزات ذكاء اصطناعي مثل إنشاء الصور من النصوص والمحادثة الذكية. أخيرًا، إكمال مشروع كامل بشكل مستقل، مما يتيح لأفكارك الإبداعية فرصة حقيقية للتحقق.
|
||||
|
||||
# لماذا نستخدم نهج قائم على المشاريع للتدريب؟
|
||||
|
||||
> **تحديات العالم الحقيقي**
|
||||
>
|
||||
> السبب في الواقع بسيط جدًا: بالنظر إلى حالة معظم الطلاب حاليًا، عند الدخول المباشر إلى سوق العمل، من المرجح جدًا أن تواجه صعوبات في المشاريع الحقيقية وتحت "الضرب المجتمعي" من الرؤساء/العملاء. المشاهد الأكثر شيوعًا في العالم الحقيقي هي:
|
||||
|
||||
> مديرك/رئيسك: نريد صنع xxx، والهدف هو تحقيق تأثير yyy.
|
||||
>
|
||||
> الوثائق؟ الأطر الجاهزة؟ مواصفات المتطلبات التفصيلية؟ في كثير من الأحيان لا يوجد أي منها.
|
||||
|
||||
العديد من المهام في العمل الحقيقي هي في جوهرها حل مشكلات لم يسبق رؤيتها من قبل في بيئة عالية عدم اليقين: المتطلبات غامضة، والحدود متغيرة، ولا أحد يخبرك بالإجابة الصحيحة، تحتاج إلى البحث عن المعلومات بنفسك، وإجراء التجارب، وبناء النماذج الأولية، والتكرار المستمر، وأخيرًا تقديم حل "يعمل ويمكن استخدامه ويمكن إطلاقه".
|
||||
|
||||
ما تريد هذه الدورة القيام به هو إعطائك "محاكاة للضرب المجتمعي" مسبقًا في بيئة آمنة نسبيًا:
|
||||
|
||||
- من خلال مهام مشروع تبدو صعبة إلى حد ما، إجبارك على ممارسة تفكيك المشكلات، وتصميم الحلول، والبحث عن المعلومات بنفسك
|
||||
- من خلال السقالات والتعليمات البرمجية غير "المبسطة"، ستتعلم قراءة وفهم وتعديل قاعدة تعليمات برمجية متوسطة إلى كبيرة
|
||||
- من خلال الحلقة الكاملة من الفكرة إلى الإطلاق، ستجرب العملية الكاملة للمنتج من الصفر إلى الواحد
|
||||
|
||||
على المدى القصير، هذا التدريب مؤلم بالفعل؛ لكن على المدى الطويل، سيعزز بشكل كبير قدرتك التنافسية في البحث عن عمل والتطور المهني: ستكون أكثر قدرة على تحمل المسؤوليات، وأكثر قدرة على إيجاد اختراقات في بيئات غير مؤكدة، وأكثر قدرة على تحويل الذكاء الاصطناعي إلى منتجات حقيقية، بدلاً من البقاء عند مرحلة "تجربة العرض التوضيحي".
|
||||
|
||||
# فن طرح الأسئلة: مهارة أساسية في عصر الذكاء الاصطناعي
|
||||
|
||||
في عصر الذكاء الاصطناعي، طرح الأسئلة هو أيضًا نوع من "المهارات الأساسية". نفس التعليمات البرمجية، نفس الخطأ، **كيف تطرح سؤالك يحدد تقريبًا نوع الإجابة التي يمكن للذكاء الاصطناعي تقديمها**: هل هي إجابة عامة، أم حلول قابلة للتنفيذ خطوة بخطوة.
|
||||
|
||||
**عادات جيدة**: اجعل "سؤال الذكاء الاصطناعي" جزءًا من عملية التطوير اليومية: عندما تواجه شيئًا لا تفهمه أو مشكلة عالقة، اسأل على الفور.
|
||||
|
||||
## لماذا هذه مهارة أساسية؟
|
||||
|
||||
- **نادرًا ما توجد وثائق كاملة في الواقع**: في أغلب الأحيان تواجه متطلبات غير واضحة، تعليمات برمجية نصف مكتملة، رسائل خطأ متفرقة
|
||||
- **الذكاء الاصطناعي هو معلمك وزميلك في أي وقت**: الشخص الذي يعرف كيف يسأل يمكن أن يحول الذكاء الاصطناعي إلى "برمجة زوجية عالية الجودة"
|
||||
- **الحد الأعلى للقدرة يحدده التواصل**: كلما زادت المعلومات الرئيسية التي تقدمها، وكلما كان تنسيق المخرجات أكثر تحكمًا، كانت الإجابة أكثر قابلية للاستخدام
|
||||
|
||||
**سوء فهم شائع**: سؤال واحد فقط "لماذا الخطأ؟" عادة ما يحصل فقط على كومة من التخمينات. املأ السياق، وستحصل على حلول قابلة للتنفيذ.
|
||||
|
||||
## كيفية "إطعام" المعلومات للذكاء الاصطناعي: لقطات الشاشة مقابل النسخ واللصق
|
||||
|
||||
كلتا الطريقتين ممكنتان، لكن للاستخدامات المختلفة:
|
||||
|
||||
| الطريقة | سيناريو الاستخدام | المتطلبات الرئيسية |
|
||||
| ------------ | ----------------------------------------- | ----------------------------------------- |
|
||||
| **النسخ واللصق** | تتبع أخطاء المكدس، السجلات، التعليمات البرمجية، التكوينات، إرجاع API | حاول أن تكون كاملاً، لا تقتطع سطرًا واحدًا من الكلمات الرئيسية |
|
||||
| **لقطة شاشة** | مشاكل تخطيط UI، التفاعلات غير الطبيعية، أزرار واجهة الأدوات غير موجودة | لقطة شاشة كاملة + حدد المنطقة الرئيسية، من الأفضل إضافة جملة وصفية نصية |
|
||||
|
||||
::: danger ⚠️ شرط مسبق مهم
|
||||
**ليس كل الذكاء الاصطناعي يدعم إدخال الصور.** التواصل بلقطات الشاشة يتطلب أن يمتلك الذكاء الاصطناعي قدرات متعددة الوسائط (أي القدرة على فهم وتحليل الصور). حاليًا، تشمل نماذج الذكاء الاصطناعي التي تدعم إدخال الصور: Claude (Anthropic)، GPT-4V/GPT-4o (OpenAI)، Gemini (Google)، وبعض النماذج المحلية الكبيرة.
|
||||
|
||||
**إذا كان الذكاء الاصطناعي الذي تستخدمه لا يدعم إدخال الصور**، فلن يتم التعرف على لقطات الشاشة، فيرجى استخدام طريقة النسخ واللصق للتواصل.
|
||||
:::
|
||||
|
||||
## تقنيات المطالبات التي تجعل الذكاء الاصطناعي "يشرح بشكل جيد"
|
||||
|
||||
إذا كنت لا تريد الإجابة فقط، بل تريد "تعلم" الإجابة. استخدام تعليمات مشابهة لما يلي يمكن أن يحسن بشكل كبير من جودة الشرح:
|
||||
|
||||
> **مثال على سؤال تعليمي**
|
||||
>
|
||||
> - "يرجى شرح هذا المفهوم في 5 جمل أولاً، ثم أعطني بعض الأسئلة لاختبار ما إذا كنت قد فهمت بشكل صحيح."
|
||||
> - "يرجى شرح رسالة الخطأ هذه بالتفصيل، لا أفهم سبب الخطأ."
|
||||
|
||||
# بعد المثابرة لفترة طويلة ما زلت لا أستطيع الحل، أريد الاستسلام
|
||||
|
||||
ربما تكون طريقة مثابرتك خاطئة. لا تعاني بمفردك في الظلام، يمكنك التحدث مع المؤلف والمساعدين التعليميين: أخبرهم بصدق عن الطرق التي جربتها، والنقاط المحددة التي واجهتها، وحالتك النفسية الحالية. في كثير من الأحيان، بمجرد تعديل الاتجاه قليلاً، أو إضافة نقطة معرفية رئيسية، يمكنك الاستمرار في المضي قدمًا.
|
||||
|
||||
# أعتقد أن بعض تصميمات الدورة التعليمية غير معقولة
|
||||
|
||||
نرحب بك دائمًا للتواصل مع المؤلف، أو تقديم مشكلة، أو تقديم ملاحظات مباشرة في المجموعة/الفصل. نأمل بشدة أن نعمل معك لتحسين هذه الدورة التعليمية: ما هو غير واضح، ما هي التجربة السيئة، ما الذي جعلك تهدر الجهد، يمكن الإشارة إليه بصراحة. كلما كانت الملاحظات أكثر واقعية وتحديدًا، زادت مساعدتها للقادمين الجدد لتجنب الأخطاء.
|
||||
|
||||
# المراجع
|
||||
|
||||
- [جامعة نانجينغ قسم علوم الكمبيوتر والتكنولوجيا تجربة أساسيات أنظمة الكمبيوتر](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="ماذا تتعلم بعد ذلك"
|
||||
description="وفقًا لمسار 'من يعرف استخدام الذكاء الاصطناعي إلى يعرف صنع المنتجات'، استمر في المضي قدمًا."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,82 @@
|
||||
# Projektvorstellung
|
||||
|
||||
2025 wird von vielen als das erste Jahr der KI-Programmierung angesehen. Immer mehr Menschen beginnen, KI zum Schreiben von Code einzusetzen, aber die Ergebnisse bleiben oft auf Spielzeugebene -- man weiß nicht, wie man den Vibe Coding-Entwicklungsprozess organisiert, welche Tools man wählen soll und welche wichtigen Schritte vom Prototyp bis zum Go-Live noch fehlen.
|
||||
|
||||
Wir verwenden einen schrittweisen **dreistufigen Praxis-Pfad**: In der Anfängerphase steigen die Teilnehmer durch kleine Spiele schnell in die KI-Programmierung ein, in der ersten Phase erlernen sie die Vibe Coding-Arbeitsweise und erstellen Web-Anwendungsprototypen, in der zweiten Phase lernen sie die Full-Stack-Entwicklung und das Deployment, in der dritten Phase bauen sie komplexe, plattformübergreifende Anwendungen.
|
||||
|
||||
Jede Phase ist mit vollständigen Projektpraktika ausgestattet, damit Sie in echten Herausforderungen vom Spielzeug zum Produkt reifen und schließlich die Fähigkeit erwerben, **jede Idee als nutzbare Anwendung zu realisieren**.
|
||||
|
||||
Wir glauben, dass Sie mit der Beherrschung von Vibe Coding und systematischem Training ein **Allround-Entwickler** werden können, der Frontend- und Backend-Entwicklung, KI-Fähigkeitsintegration und Produktdesign in sich vereint.
|
||||
|
||||
Dieses Projekt richtet sich hauptsächlich an drei Arten von Lernenden:
|
||||
|
||||
- **Anfänger (Allrounder / Produkt- und Betriebsseite)**: Hilft Nicht-Technik-Background-Rollen und Einsteigern, Schlüsselkonzepte zu verstehen und das erste KI-Kleintool oder den ersten Produktprototyp abzuschließen.
|
||||
- **Mittelstufe-Entwickler (Studierende und Entwickler mit gewissen Grundlagen)**: Systematische Beherrschung von Vibe Coding und nativer KI-Anwendungsentwicklung.
|
||||
- **Fortgeschrittene Entwickler (Unternehmen & Startups, Open-Source- und Indie-Entwickler)**: Unterstützt Teams und Einzelpersonen beim schnellen Aufbau, der Validierung und Iteration nativer KI-Anwendungen.
|
||||
|
||||
## Inhaltliche Navigation
|
||||
|
||||
### Gesamtanhang
|
||||
|
||||
[KI-Fähigkeitswörterbuch: Gängige KI-Kernkonzepte, Begriffe und Szenario-Erklärungen](/de-de/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### Null, Kindergarten
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| [Anfänger: Lernkarte](/de-de/stage-1/learning-map/) | Gesamtübersicht des Lernpfads | ✅ |
|
||||
| [Anfänger: Im KI-Zeitalter genügt Sprechen zum Programmieren](/de-de/stage-1/ai-capabilities-through-games/) | Erste Erfahrungen mit KI-Programmierung am Beispiel von Snake | ✅ |
|
||||
|
||||
### Eins, KI-Produktmanager
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| [Anfänger II: KI-IDE-Tools kennenlernen](/de-de/stage-1/introduction-to-ai-ide/) | IDE bedienen, Benutzeroberfläche und effiziente Prompt-Methoden beherrschen | ✅ |
|
||||
| [Anfänger III: Prototypen erstellen](/de-de/stage-1/building-prototype/) | Vom Produkt-Analysis bis zum Multi-Page-Produktprototyp -- vollständiger Zyklus | ✅ |
|
||||
| [Anfänger IV: KI-Fähigkeiten in den Prototyp einbauen](/de-de/stage-1/integrating-ai-capabilities/) | API-Integration gängiger KI-Fähigkeiten (Text, Bild, Video) verstehen und umsetzen | ✅ |
|
||||
| [Anfänger V: Vollständiges Projektpraktikum](/de-de/stage-1/complete-project-practice/) | Echte Szenarien simulieren, Nutzerfeedback iterativ einarbeiten und Projekt präsentieren (inkl. Abschlussaufgabe) | ✅ |
|
||||
|
||||
#### Anhang
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| [Anhang A: Produkt-Denken Ergänzung](/de-de/stage-1/appendix-a-product-thinking/) | Produkt-Denken-Rahmen von der Ideenbewertung bis zur Anforderungsaufschlüsselung und MVP | ✅ |
|
||||
| [Anhang B: Häufige Fehler und Lösungen](/de-de/stage-1/appendix-b-common-errors/) | Häufige Fehler und Behebungsstrategien beim Vibe Coding | ✅ |
|
||||
| [Anhang: Woher Ideen finden](/de-de/stage-1/appendix-idea-sources/) | Nischige Richtungen aus Referenz-Apps, Trends und VC-Listen ableiten | ✅ |
|
||||
| [Anhang: Double-Diamond-Modell](/de-de/stage-1/appendix-double-diamond/) | Verstehen, zuerst das Problem zu definieren, bevor man die Lösung entwirft | ✅ |
|
||||
| [Anhang: Jobs to Be Done](/de-de/stage-1/appendix-jobs-to-be-done/) | Mit der JTBD-Methode erkennen, was Nutzer wirklich erreichen wollen | ✅ |
|
||||
| [Anhang: The Mom Test Interview-Methode](/de-de/stage-1/appendix-mom-test/) | Bedarfsvalidierung durch Nutzerinterviews | ✅ |
|
||||
|
||||
### Zwei, Junior-/Mid-Level-Entwickler
|
||||
|
||||
#### Frontend-Bereich
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| Lovart zur Materialerstellung nutzen | Lovart zum Batch-Generieren von visuellen Materialien wie Charakteren und Szenen beherrschen, Materialgrundlage für UI-Design und Frontend-Entwicklung schaffen | 🚧 |
|
||||
| Figma und MasterGo Einführung | Design-Tools zur Informationsarchitektur und Seitenstruktur nutzen, Grundlage für die Frontend-Implementierung schaffen | 🚧 |
|
||||
| Erste moderne Anwendung erstellen -- UI-Design | Komponentenbasierte Oberfläche basierend auf Designentwürfen umsetzen, erste Pipeline vom Design zum Code | 🚧 |
|
||||
| Seiten und Schaltflächen nach UI-Design-Richtlinien gestalten | Mainstream-Design-Richtlinien für Seitenstruktur und Schaltflächen-Hierarchie lernen und KI-gestützte Designentwürfe erstellen | 🚧 |
|
||||
| [Hogwarts-Portraits gemeinsam erstellen](/de-de/stage-2/frontend/hogwarts-portraits/) | Eine Frontend-Anwendung mit KI-Fähigkeiten von 0 auf 1 erstellen, Design und Entwicklung verknüpfen | 🚧 |
|
||||
|
||||
#### Backend-Entwicklung
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| Was ist eine API? | HTTP-Schnittstellen und Request-Response-Modell verstehen, Vorbereitung auf Backend-Integration und Abstimmung | 🚧 |
|
||||
| [Von der Datenbank zu Supabase](/de-de/stage-2/backend/database-supabase/) | Datenbank und API auf Supabase umsetzen, Datenmodell und Frontend-Seite verknüpfen | 🚧 |
|
||||
| LLM-unterstütztes Schreiben von API-Code und API-Dokumentation | LLM beim Generieren von API- und Datenbankdokumentation sowie Code unterstützen, lesbaren und testbaren Backend-Code erstellen | 🚧 |
|
||||
| Git-Workflow und Zeabur-Deployment | Code im Git-Workflow verwalten und die Anwendung auf Zeabur bereitstellen | 🚧 |
|
||||
| Moderne CLI-Entwicklungstools | CLI-basierte KI-Programmierungstools zur Beschleunigung von Entwicklung und Debugging nutzen, einen persönlichen Engineering-Workflow aufbauen | 🚧 |
|
||||
| Stripe-Integration und andere Zahlungssysteme | Zahlungssystem integrieren, Zahlungs-Pipeline und grundlegende Abrechnungsprozesse abschließen | 🚧 |
|
||||
| Erste moderne Anwendung erstellen -- Full-Stack-Anwendung | Frontend, Backend und Zahlungsmodul integrieren, eine bereitstellbare Full-Stack-Web-Anwendung erstellen | 🚧 |
|
||||
| Moderne Frontend-Komponentenbibliothek + Trae-Praxis | Moderne Frontend-Komponentenbibliothek und Trae nutzen, unabhängig ein Produkt mit Login/Registrierung und Zahlungsunterstützung erstellen | 🚧 |
|
||||
|
||||
#### KI-Fähigkeiten Anhang
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| [Dify-Einführung und Wissensdatenbank-Integration](/de-de/stage-2/ai-capabilities/dify-knowledge-base/) | Dify Workflow und grundlegendes RAG zum Aufbau eines toolbasierten Produkts nutzen, Vorlage für spätere App-Upgrades erstellen | 🚧 |
|
||||
| KI-Wörterbuch abfragen und multimodale APIs integrieren | Geeignete Modelle und APIs finden und multimodale Fähigkeiten wie Text und Bild in Produkte integrieren | 🚧 |
|
||||
|
||||
### Drei, Senior-Entwickler
|
||||
@@ -0,0 +1,768 @@
|
||||
# Anfänger I: Im AI-Zeitalter reicht es zu sprechen, um programmieren zu können
|
||||
|
||||
Dies ist ein **auf Projekt-Based Learning basierendes** Lern-Tutorial. Wir ermutigen dich, den Schritten zu folgen und die Ergebnisse zu reproduzieren.
|
||||
Keine Sorge vor Fehlern oder Änderungen – wir glauben immer an dich. Bitte behalte Folgendes im Gedächtnis:
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
|
||||
<span style="font-size: 15px; font-weight: 500; color: #666;">Fertigstellen ist wichtiger als Perfektion</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Etwa <strong>4 Stunden</strong>, in mehreren Sitzungen abschließbar'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['de-de/stage-1/ai-capabilities-through-games'] ?? []
|
||||
</script>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Konversationelles AI-Programmieren', 'AI-native Mini-Spiele', 'Snake-Spiel-Praxis']" coreOutput="AI-native Snake + eigenes Mini-Spiel" expectedOutput="1 lauffähige AI-native Snake + (optional) 1 selbst erstelltes AI-native Mini-Spiel oder Demo">
|
||||
|
||||
Wenn du **überhaupt nicht programmieren kannst** oder nur ein wenig davon verstehst, ist dieses Kapitel genau für dich gemacht. Wir beginnen mit den Grundlagen: AI durch **Gespräche** Code schreiben zu lassen – ohne Syntax auswendig zu lernen, ohne Umgebungen einzurichten, und alles läuft direkt im Browser.
|
||||
|
||||
Du wirst **dein erstes lauffähiges Programm** selbst bauen – eine Snake, die „Wörter frisst, Gedichte schreibt und malt". Durch diese praktische Übung wirst du erleben, wie sich AI-Programmieren wirklich anfühlt: Nicht dass AI dein Denken ersetzt, sondern dass du deine Ideen aussprichst und AI sie umsetzt.
|
||||
|
||||
Alle Kreationen beginnen bei 0 und werden zu 1. Wir freuen uns, dir Selbstvertrauen und Professionalität zu vermitteln. Für dich gilt: **Ausführungsfähigkeit is all you need**.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
|
||||
{ title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
|
||||
{ title: 'Native Praxis', description: 'AI-native Snake bauen' },
|
||||
{ title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Herausforderungen und Chancen für normale Menschen
|
||||
|
||||
Viele Menschen haben den Kopf voller Produktideen: ein kleines Tool zur Budgetverwaltung, eine Webseite, die das Wachstum des Kindes dokumentiert, oder sogar ein kleines Spiel. Aber sobald sie an Code oder Programmierer denken, werden sie sofort abgeschreckt.
|
||||
|
||||
Seit dem Aufkommen von AI gibt es erstmals eine völlig neue Möglichkeit für normale Menschen: Du musst nicht programmieren können, du musst nur lernen, AI klar zu sagen, was du willst. Daten von GitHub Copilot [zeigen](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics), dass über 15 Millionen Entwickler AI-gestütztes Programmieren nutzen und im Durchschnitt 46% des Codes von AI generiert wird! Bei Java-Projekten liegt dieser Anteil bei 61%.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">🚀</span>
|
||||
<span style="font-weight: bold; font-size: 16px;">Effizienz- und Adaptionssteigerung</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" style="margin-bottom: 24px;">
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Geschwindigkeitssteigerung</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">Tage</span></div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Aufgabendauer (vorher 9.6 Tage)</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Ersttags-Installationsrate</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Vorschlagsannahmerate</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="line-height: 1.8; color: #606266;">
|
||||
Was wirklich begeistert, ist der Sprung in der Effizienz: Die Geschwindigkeit bei der Aufgabenerledigung stieg um <b>55%</b>. Was früher 9,6 Tage brauchte, ist jetzt in <b>2,4 Tagen</b> erledigt. Dieser sichtbare Effizienzgewinn zeigt, dass AI nicht mehr nur ein „optionales Werkzeug" ist, sondern zu einem unverzichtbaren Programmierassistenten im Entwicklungsprozess wird. Die Adaptionsraten bestätigen dies: Am Tag der Zugangsgewährung installierten <b>81%</b> der Entwickler sofort und begannen es zu nutzen; davon <b>96%</b> übernahmen noch am selben Tag AI-generierte Codevorschläge. Mit anderen Worten: Entwickler integrierten AI fast sofort in ihre tägliche Arbeit.
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
Für normale Menschen ist dieser Trend noch bedeutsamer: Wenn selbst professionelle Programmierer stark auf AI angewiesen sind, um Code zu schreiben, **warum sollten wir, die nicht programmieren können, nicht direkt mit AI sprechen, um unsere Ideen umzusetzen?**
|
||||
|
||||
Das Ziel dieses Kurses ist es, dir eine neue Fähigkeit beizubringen: Anwendungen durch natürliche Sprachgespräche zu erstellen. Wir bringen dir bei, wie du mit AI in der Sprache des Computers kommunizierst und wie du AI dazu bringst, die Ideen in deinem Kopf in echte, nutzbare Produkte zu verwandeln.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
|
||||
{ title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
|
||||
{ title: 'Native Praxis', description: 'AI-native Snake bauen' },
|
||||
{ title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Wie weit kann AI dich bringen?
|
||||
|
||||
In diesem Abschnitt diskutieren wir nur eine Frage: Wenn du überhaupt nicht programmieren kannst, wieweit kann die heutige AI dich bringen?
|
||||
|
||||
Grob gesagt kannst du die Fähigkeiten aktueller Modelle so verstehen: Sie können **einfache interne Tools**, **Daten-Visualisierungs-Dashboards** und einige **leichte Mini-Spiele** entwickeln. Diese Fähigkeiten reichen für **eigene Tools** und für die **Validierung von Anforderungen aus der Perspektive eines Produktmanagers** völlig aus. Um jedoch per Knopfdruck ein **marktreifes, ausgereiftes Produkt** zu generieren, ist in der Regel immer noch menschliche Arbeit bei der **Prozessgestaltung**, **Detailoptimierung** und fortlaufenden Verbesserung nötig.
|
||||
|
||||
Schauen wir uns als Nächstes am Beispiel des Snake-Spiels an, wieweit AI-Programmieren tatsächlich gehen kann.
|
||||
|
||||
### 2.1 Ein Snake-Spiel in 60 Sekunden
|
||||
|
||||
Öffne zunächst die experimentelle Webseite [z.ai](https://chat.z.ai/), die im Tutorial verwendet wird. `z.ai` ist eine von Zhipu AI (einem der führenden chinesischen Sprachmodellunternehmen) entwickelte AI-Plattform, deren Kernfunktionen von Zhipus selbstentwickelter GLM-Serie bereitgestellt werden. Die Plattform integriert mehrere AI-Funktionen, darunter Folien-Generierung, Poster-Design und Full-Stack-Entwicklung. In diesem Tutorial konzentrieren wir uns auf die Nutzung des Full-Stack-Entwicklungsmoduls.
|
||||
|
||||
::: details 💡 Was ist das neue Paradigma „Programmieren im Browser"?
|
||||
|
||||
Früher erforderte die Entwicklung einer Webanwendung:
|
||||
- Installation einer Programmierumgebung (z. B. Python, Node.js)
|
||||
- Einrichtung eines Code-Editors
|
||||
- Erlernen von Sprachen wie HTML/CSS/JavaScript
|
||||
- Bewältigung von Abhängigkeiten und Fehlern
|
||||
|
||||
Heute reicht es mit AI-Programmierplattformen aus:
|
||||
- Browser öffnen, Webseite aufrufen
|
||||
- Gewünschte Funktionen in natürlicher Sprache beschreiben
|
||||
- AI generiert automatisch Code und zeigt Echtzeitvorschau
|
||||
|
||||
Dieses Paradigma „Gespräch als Programmierung" verwandelt das Programmieren vom „Code schreiben" zum „Anforderungen beschreiben". Du musst dich nicht um technische Details kümmern, sondern musst AI nur klar sagen, was du willst, und es verwandelt deine Ideen in lauffähige Programme. Das ist das neue Paradigma des Programmierens im AI-Zeitalter – **Vibe Coding**.
|
||||
:::
|
||||
|
||||
|
||||
|
||||
Gib nach der Eingabe unserer einfachen Anforderung auf **Full-Stack-Entwicklung** klicken, kannst du den kompletten Erstellungsprozess der Webseite in Echtzeit beobachten. Normalerweise reicht die Zeit für eine Tasse Kaffee, und die Webseite ist automatisch fertig!
|
||||
|
||||
```
|
||||
Erstelle ein Snake-Spiel für mich:
|
||||
1. Steuerung der Schlange mit Pfeiltasten
|
||||
2. Die Schlange wird nach dem Fressen von Nahrung länger und der Punktestand erhöht sich
|
||||
3. Das Spiel endet bei Kollision mit Wänden oder dem eigenen Körper
|
||||
4. Es sollte Start- und Neustart-Buttons geben
|
||||
5. Die Oberfläche soll übersichtlich und ansprechend sein
|
||||
```
|
||||
|
||||
|
||||
|
||||
Nach der Generierung siehst du rechts eine durchblätterbare Weboberfläche. Du kannst nach oben und unten scrollen, um den Seiteninhalt zu betrachten, oder oben auf die 🧭 -Schaltfläche klicken, um in den Vollbildmodus zu wechseln.
|
||||
|
||||
> Von links nach rechts oben: Pfeil-Schaltfläche öffnet die Seitenleiste mit dem Gesprächsverlauf, Stift-Schaltfläche für einen neuen Dialog, Kreisschaltfläche aktualisiert die Seite, Kompass-Schaltfläche schaltet in den Vollbildmodus, Download-Schaltfläche lädt das Projekt herunter, <>-Schaltfläche schaltet zur Code-Ansicht, Publish-Schaltfläche veröffentlicht das Projekt.
|
||||
|
||||
|
||||
|
||||
Wenn du den Quellcode der Webseite anzeigen möchtest, klicke auf das Code-Symbol oben rechts, um den vollständigen Code zu sehen.
|
||||
|
||||
|
||||
|
||||
::: tip 🌐 Entdecke weitere AI-Programmierwerkzeuge
|
||||
|
||||
Neben z.ai empfehlen wir dir, auch folgende hervorragende AI-Programmierplattformen auszuprobieren:
|
||||
|
||||
| Werkzeug | Adresse | Merkmale |
|
||||
|------|------|------|
|
||||
| **Google AI Studio** (empfohlen) | [aistudio.google.com/apps](https://aistudio.google.com/apps) | Offizielles Google-Produkt, unterstützt Gemini-Modelle, geeignet für schnelle Prototypenentwicklung |
|
||||
| **Figma Make** | [figma.com/make](https://www.figma.com/make) | Tiefe Integration mit Designwerkzeugen, geeignet für Designer zur schnellen Erstellung interaktiver Prototypen |
|
||||
| **Coze** | [coze.com](https://www.coze.cn) | AI-Bot-Plattform von ByteDance, bietet No-Code-Visuellerstellung. Tiefe Integration mit nationalen Modellen wie Doubao und Kimi, unterstützt Plugin-Marktplatz, geplante Aufgaben und Multi-Kanal-Publishing |
|
||||
| **v0.dev** | [v0.dev](https://v0.dev) | AI-UI-Generierungstool von Vercel, generiert lauffähige React-Komponenten-Code aus Beschreibungen |
|
||||
| **Bolt.new** | [bolt.new](https://bolt.new) | AI-Full-Stack-Entwicklungsplattform von StackBlitz, generiert und deployt komplette Webanwendungen |
|
||||
| **Lovable** | [lovable.dev](https://lovable.dev) | Spezialisiert auf hochwertige React-Anwendungen, unterstützt GitHub-Integration und One-Click-Deployment |
|
||||
| **Replit Agent** | [replit.com](https://replit.com) | Online IDE mit integriertem AI-Programmierassistenten, unterstützt mehrere Sprachen und Echtzeit-Zusammenarbeit |
|
||||
|
||||
Für einen detaillierten Vergleich und Tutorial zu Web-Programmierwerkzeugen siehe unsere Ergänzungslektüre: [Vergleich von 7 Vibe-Coding-Plattformen](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
|
||||
:::
|
||||
|
||||
### 2.2 Was kann und was kann konversationelles Programmieren?
|
||||
|
||||
Dieser Abschnitt konzentriert sich auf eine konkrete Frage: Wenn du dich nur auf konversationelle AI verlässt und keinen Code schreibst, wieweit kann es die Dinge vorantreiben?
|
||||
|
||||
Auf Erfahrungsebene lautet eine relativ stabile Schlussfolgerung: Es kann dir helfen, etwas „kleines, aber Vollständiges" zu erstellen, aber „wann ist es genug" musst du bei jedem Schritt selbst entscheiden.
|
||||
|
||||
#### Besser bei „kleinen und klaren" Anwendungen
|
||||
|
||||
Aus dem vorherigen Snake-Beispiel hast du bereits ein typisches Muster gesehen:
|
||||
Solange du die Oberfläche und Interaktion klar beschreiben kannst, kann AI normalerweise innerhalb weniger Gesprächsrunden eine vollständige Webseite erstellen, die sich öffnen, anklicken und spielen lässt.
|
||||
|
||||
Solche Aufgaben haben oft gemeinsame Merkmale:
|
||||
|
||||
- Klaren Umfang: eine Webseite, ein einfaches internes Tool, ein kleines Spielprinzip
|
||||
- Sichtbare Ergebnisse: Du kannst sofort im Browser überprüfen, ob es wie erwartet funktioniert
|
||||
- Direkte Fehlerbehebung: Bei Problemen kannst du in nachfolgenden Gesprächen spezifische Phänomene beschreiben und Korrekturen anfordern (durch Kopieren von Fehlern oder Screenshots)
|
||||
|
||||
Innerhalb dieser Grenzen kannst du konversationelle AI als einen „Hilfsentwickler mit guter Ausführung" betrachten. Du musst nur in jeder Runde die Anforderungen in natürlicher Sprache verfeinern und korrigieren, um schnell einen brauchbaren Prototyp zu erhalten.
|
||||
|
||||
**Erfolgsquote von AI bei kleinen Projekten:**
|
||||
<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
|
||||
|
||||
#### Große Projekte brauchen eine „Prozessperspektive"
|
||||
|
||||
Sobald du den Bereich „klein und klar" verlässt und erwartest, dass AI mit wenigen Gesprächsrunden ein komplexes System End-to-End erstellt, wirst du schnell an Grenzen stoßen. Große Projekte müssen Backends anbinden, Datenbanken verbinden, Drittanbieterdienste integrieren und betreffen Berechtigungen, Sicherheit, Nebenläufigkeit und viele Geschäftsregeln – das Ziel ist die Lieferung eines kompletten Systems, nicht einer einzigen Webseite.
|
||||
|
||||
In diesem Fall ist es vernünftiger, nicht alle Anforderungen auf einmal an AI zu werfen, sondern zuerst einen klaren Gesamtprozess zu skizzieren: Was sind die Schlüsselschritte, was sind die Eingaben, Ausgaben und Zustandsänderungen bei jedem Schritt, und welche Knoten sind am empfindlichsten für Leistung und Sicherheit. Basierend auf diesem Prozessdiagramm kannst du relativ unabhängige Schritte herauslösen und der konversationellen AI zur Generierung von Schnittstellen, Modulen, Skripten und Tests übergeben.
|
||||
|
||||
Nach aktueller Leistungsfähigkeit ist AI besser darin, einzelne kleine Schritte zu beschleunigen, während du (oder dein Team) entscheidest, wie die Schritte aufgeteilt und verknüpft werden, sowie für die endgültige Architektur, Systemintegration und den Betrieb verantwortlich bist.
|
||||
|
||||
#### Der Unterschied zwischen „können schreiben" und „brauchbar sein"
|
||||
|
||||
Auf den ersten Blick scheint AI alles zu können, aber wie brauchbar sind diese Dinge wirklich, und wieweit? Wie sollten wir das einordnen?
|
||||
|
||||
Eine hilfreiche Faustregel:
|
||||
|
||||
::: warning ⚠️ Leitfaden für Anwendungsszenarien
|
||||
|
||||
- **Prototyp / Demo / internes Tool**: Sehr geeignet, um von AI die erste Version erstellen zu lassen, dann selbst Details zu iterieren.
|
||||
- **Große Produkte für echte Nutzer**: Erfordert normalerweise langfristiges Engagement von Ingenieuren in Architektur, Abstraktion, Leistung und Wartung.
|
||||
- **Stark sicherheits- oder compliancekritische Systeme** (z. B. Zahlung, Risikokontrolle, Medizin): In der aktuellen Phase sollte man nicht „generieren und sofort live schalten"; es muss strenge Prüf- und Testprozesse geben.
|
||||
:::
|
||||
|
||||
Heutzutage kannst du AI relativ beruhigt als effizienten Partner für Demos und interne Tools betrachten:
|
||||
Solange du bereit bist, mehr zu testen, mehr zu iterieren und ein paar Runden „Hier stimmt etwas nicht, bitte korrigiere es und erkläre warum" zu spielen, ist die Qualität auf Prototyp- und Tool-Ebene normalerweise ausreichend und hat praktischen Wert.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
|
||||
{ title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
|
||||
{ title: 'Native Praxis', description: 'AI-native Snake bauen' },
|
||||
{ title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Praxis: Deine erste AI-native Anwendung
|
||||
|
||||
Kommen wir zum praktischen Teil. Im vorherigen Abschnitt haben wir mit AI schnell einen spielbaren Snake-Prototyp erstellt und grob verstanden, was AI kann und was nicht. Als Nächstes lernen wir, wie man mit grundlegenden **Vibe Coding**-Techniken eine **moderne** AI-native Snake erstellt. Wir lassen die Schlange Textzeichen statt Bohnen fressen. Am Ende soll das Spiel basierend auf den gefressenen Textzeichen ein Gedicht und ein Bild generieren.
|
||||
Durch dieses praktische Beispiel verstehst du den Kern des neuen Programmierparadigmas: Wie man Anforderungen klar in natürlicher Sprache ausdrückt.
|
||||
|
||||
### 3.1 AI-native Snake
|
||||
|
||||
Am Anfang können wir auf die einfachste Weise mit dem großen Modell sprechen, was uns hilft, schnell einen Produktprototyp zu erhalten. Gib einfach im Chat ein:
|
||||
|
||||
> **💡 Beispiel-Prompt:** Erstelle ein Snake-Spiel für mich
|
||||
>
|
||||
> 
|
||||
|
||||
> **💡 Beispiel-Prompt:** Erstelle ein Snake-Spiel, das Folgendes unterstützen soll:
|
||||
>
|
||||
> 1. Ich kann verschiedene Wörter fressen, die in einer Box gesammelt werden
|
||||
> 
|
||||
|
||||
> **💡 Beispiel-Prompt:** Erstelle ein Snake-Spiel, das Folgendes unterstützen soll:
|
||||
>
|
||||
> 1. Ich kann verschiedene Wörter fressen, die in einer Box gesammelt werden
|
||||
> 2. Wenn die Schlange 8 Wörter gefressen hat, soll das LLM basierend auf diesen Wörtern ein Gedicht erstellen; wir können das Gedicht nach Bedarf neu mischen.
|
||||
> 3. Nach Abschluss des Gedichts wird automatisch ein Bild basierend auf dem Gedicht erstellt.
|
||||
>
|
||||
> 
|
||||
|
||||
Beachte, dass während der Entwicklung Probleme auftreten können, bei denen zum Beispiel das Klicken auf einen Button keine Reaktion zeigt, Fehler bei der Nutzung von Funktionen auftreten, Funktionen nicht wie erwartet arbeiten oder die Frontend-Oberfläche nicht dem erwarteten Design entspricht.
|
||||
|
||||
In diesem Fall müssen wir das Modell weiter fragen, um diese unerwarteten Probleme zu beheben.
|
||||
|
||||
|
||||
|
||||
### 3.2 Neue Funktionen zum Spiel hinzufügen
|
||||
|
||||
Nachdem die Grundfunktionen fertig sind, können wir versuchen, unserem Programm einige neue Extras hinzuzufügen! Wenn du das Fressen von Wörtern oder Zeichen zu langweilig findest, kannst du die Schlange Wörter in verschiedenen Farben fressen lassen und entsprechend die Farbe der Schlange ändern.
|
||||
|
||||
Du kannst auch Spezialeffekte für den „Fress"-Vorgang hinzufügen oder magische Wörter einführen, die Effekte auslösen – zum Beispiel die Geschwindigkeit oder Größe der Schlange erhöhen. Eine andere Idee ist, bei jedem gefressenen Wort ein Gedicht und ein Bild generieren zu lassen, anstatt bis zu acht Wörtern zu warten.
|
||||
|
||||
Wenn das zu anspruchsvoll klingt, kannst du das Sprachmoduell direkt um Hilfe bitten! Es kann kreative Vorschläge machen, um dein Spiel interessanter zu gestalten. Probier es aus!
|
||||
|
||||
```
|
||||
1. „Wörter-entfesseln-Welten"-Mechanismus
|
||||
Jedes Mal, wenn die Schlange ein Wort frisst, assoziiert das LLM poetisch damit (z. B. „Baum" → „Wald", „Schatten") und das Bildmodell erstellt sofort ein kleines Kunstwerk für dieses Wort. Diese Bilder setzen sich nach und nach zu einem einzigartigen, vom Spieler geschaffenen Panorama zusammen, sodass der Spieler bei jedem Durchlauf „malend und dichtend" spielt.
|
||||
|
||||
2. „Gedicht-Puzzle"-Gameplay
|
||||
Jedes gefressene Wort löst das LLM aus, einen kurzen Vers zu generieren, und das Bildmodell erstellt eine Illustration. Diese Verse und Bilder setzen sich wie ein Puzzle zusammen und bilden am Ende einer Runde ein AI-gestaffeltes Gedicht und Bild.
|
||||
|
||||
3. „Magische Wörter" & „Story-Verzweigungen"
|
||||
Besondere „magische Wörter" (z. B. „Wind", „Nacht", „Traum") lösen nicht nur LLM-Gedichte aus, sondern ändern auch die Stimmung oder das Thema der Szene – der Stil der Bildgenerierung wechselt zu Nacht, Sturm oder traumhafter Atmosphäre.
|
||||
Story-Verzweigung: Das LLM gibt zu Beginn ein Thema oder Rätsel (z. B. „Herbsterinnerungen"). Die Wortwahl des Spielers beeinflusst direkt die Entwicklung der Geschichte und der Gedichte, und das Bildmodell aktualisiert Hintergrund und visuelle Effekte in Echtzeit.
|
||||
|
||||
4. „Echtzeit-Interaktionsgenerierung"
|
||||
Nach jedem Wort generiert das LLM eine Dialogzeile oder Beschreibung; NPCs im Spiel können mit dem Spieler „sprechen" oder die Umgebung ändert sich entsprechend.
|
||||
Das Aussehen der Schlange oder die Hindernisse im Spiel können sich basierend auf den gefressenen Wörtern visuell verändern – dank des Bildmodells.
|
||||
|
||||
5. „Kreation & Teilen"
|
||||
Spieler können am Ende der Sitzung ihre AI-kreierten Gedichte und Bilder speichern und teilen und ihre einzigartige „AI-Kollaboration" präsentieren.
|
||||
Bestenlisten für „Schönstes Gedicht + Kunst", „Kreativste Wortkombination" etc., die Replayability und Kreativität fördern.
|
||||
|
||||
6. „Satz-Snake"-Herausforderung
|
||||
Umgekehrter Modus: Das LLM gibt einen Vers oder ein Rätsel, und der Spieler muss die Schlange leiten, um die Wörter in der richtigen Reihenfolge zu fressen und den Satz zu rekonstruieren. Falsche Wörter lösen über das Bildgenerierungsmodell lustige oder künstlerische Konsequenzen aus.
|
||||
|
||||
7. „Themen-Level" & „Stilauswahl"
|
||||
Zu Beginn des Spiels wählt der Spieler ein Thema (z. B. „Märchen", „Sci-Fi", „Tang-Gedichte"); LLM und Bildmodell passen Wortauswahl, Gedichtstil und visuelle Effekte entsprechend an, sodass jeder Durchlauf frisch wirkt.
|
||||
|
||||
8. „Live-Zusammenarbeit"
|
||||
Wenn ein spezielles Wort gefressen wird, kann das LLM den Spieler auffordern, einen Satz oder Stil einzugeben, und generiert dann entsprechende Verse und Illustrationen – eine echte Mensch-AI-Kollaboration.
|
||||
|
||||
9. „AI-Easter Eggs & Erfolge"
|
||||
Bestimmte Wortkombinationen werden vom LLM als spezielle Themen oder interne Witze erkannt (z. B. „Mond", „Osmanthus", „Flussufer") und lösen seltene Verse und Illustrationen aus, die Erkundung belohnen.
|
||||
|
||||
10. „Wachsende Geschichte"
|
||||
Mit dem Wachsen der Schlange generiert das LLM ein fortlaufendes Geschichtsgedicht, und das Bildmodell erstellt ein nahtloses langes Scroll- oder Panorama-Bild, sodass der Spieler gleichzeitig „schreibt, malt und spielt".
|
||||
```
|
||||
|
||||
Darüber hinaus können wir das LLM bitten, projektweite Prompts für uns zu generieren. Im vorherigen Abschnitt haben wir nur selbst den Prompt für das Snake-Spiel geschrieben. Lass uns jetzt versuchen, das Modell einen Prompt mit einem Gesamtframework und Implementierungspfad generieren zu lassen (du kannst das direkt mit z.ai machen).
|
||||
|
||||
Wenn du lernen möchtest, bessere Prompts zu schreiben, siehe das [Prompt-Engineering-Appendix](/de-de/appendix/8-artificial-intelligence/prompt-engineering).
|
||||
|
||||
> Ich möchte, dass AI ein Web-Snake-Spiel generiert. Ich brauche einen umfassenderen Prompt, damit das Ergebnis beeindruckender und interessanter wird. Bitte generiere einen entsprechenden Prompt. Das aktuelle Ziel ist: ein Snake-Spiel zu generieren, das die Funktion des Fressens verschiedener Wörter zur Gedichtgenerierung implementieren soll und ein Bildgenerierungsmodul enthalten sollte.
|
||||
|
||||
Die Antwort von z.ai wird ungefähr so aussehen:
|
||||
|
||||
|
||||
|
||||
Wir können diesen Prompt verwenden, um das Projekt im Full-Stack-Modus neu zu generieren:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
|
||||
{ title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
|
||||
{ title: 'Native Praxis', description: 'AI-native Snake bauen' },
|
||||
{ title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
### 3.3 Versuche, andere Mini-Spiele zu erstellen
|
||||
|
||||
Neben dem Snake-Spiel können wir der Fantasie freien Lauf lassen.
|
||||
|
||||
Erschaffe alles, was du willst, versuche sogar, alles kaputt zu machen! Und dann fang von vorne an!
|
||||
|
||||
```
|
||||
1. AI-Kunstgalerie-Plattform
|
||||
Beschreibung: Eine Online-Galerie zur Präsentation von AI-generierter Kunst, auf der Nutzer Werke hochladen, teilen und kommentieren können.
|
||||
Funktionen: Nutzerkontosystem, Kunstwerk-Upload und -Präsentation, Bewertungssystem, Kategorisierungsbrowser, AI-Generierungstool-Integration.
|
||||
Technische Highlights: React/Vue-Frontend, Node.js-Backend, MongoDB-Datenbank, AI-API-Integration.
|
||||
|
||||
2. Retro-Spiele-Archiv
|
||||
Beschreibung: Eine Website, die klassische Spiele ehrt, mit Spielgeschichte, Spielanleitungen und online spielbaren Retro-Spielen.
|
||||
Funktionen: Spieledatenbank, Zeitstrahl-Anzeige, Online-Emulator, Nutzerkommentare, Spielsammlung.
|
||||
Technische Highlights: Responsive Design, WebGL/Canvas-Spiele, RESTful API, Nutzer-Authentifizierungssystem.
|
||||
|
||||
3. Nachhaltiger-Lebensstil-Tracker
|
||||
Beschreibung: Eine Website, die Nutzern hilft, ihren CO2-Fußabdruck durch Umweltschutztipps und Community-Challenges zu verfolgen und zu reduzieren.
|
||||
Funktionen: Persönlicher CO2-Rechner, Zielsetzung, Fortschrittsverfolgung, Community-Challenges, Umweltschutzwissensdatenbank.
|
||||
Technische Highlights: Datenvisualisierung, mobile Optimierung, Social-Funktionen, Push-Benachrichtigungen.
|
||||
|
||||
4. Virtuelle-Küchen-Assistent
|
||||
Beschreibung: Eine AI-basierte Kochberatungsplattform mit personalisierten Rezeptvorschlägen und Schritt-für-Schritt-Kochanweisungen.
|
||||
Funktionen: Rezeptdatenbank, Zutatenerkennung, personalisierte Empfehlungen, Küchentimer, Nährwertanalyse.
|
||||
Technische Highlights: Bilderkennungs-API, ML-Empfehlungssystem, Sprachsteuerung, Echtzeit-Videoführung.
|
||||
|
||||
5. Indie-Musik-Entdeckungsplattform
|
||||
Beschreibung: Eine Musikstreaming-Plattform, die sich auf unabhängige und aufstrebende Künstler konzentriert, mit einzigartigem Entdeckungserlebnis.
|
||||
Funktionen: Musikstreaming, Künstlerprofile, personalisierte Empfehlungen, Playlist-Erstellung, Community-Bewertungen.
|
||||
Technische Highlights: Audio-Stream-Verarbeitung, Empfehlungsalgorithmus, Social-Funktionen, Musikvisualisierung.
|
||||
|
||||
6. Minimalistische Aufgabenverwaltung
|
||||
Beschreibung: Ein Aufgabenverwaltungstool mit zen-ästhetischem Design, das sich auf einfache und effiziente Aufgabenorganisation konzentriert.
|
||||
Funktionen: Aufgabenerstellung und -kategorisierung, Prioritäteneinstellung, Fortschrittsverfolgung, Teamzusammenarbeit, Datenanalyse.
|
||||
Technische Highlights: Minimalistisches UI-Design, Drag-and-Drop, Echtzeit-Synchronisation, plattformübergreifende Kompatibilität.
|
||||
|
||||
7. Sci-Fi-Schreibwerkstatt
|
||||
Beschreibung: Eine Plattform für Sci-Fi-Autoren mit kreativen Werkzeugen und Inspiration, einschließlich Worldbuilding-Hilfe und Charakterentwicklungstools.
|
||||
Funktionen: Geschichtenstrukturwerkzeuge, Charakterprofile, Worldbuilding-Vorlagen, Schreibstatistiken, Community-Feedback.
|
||||
Technische Highlights: Rich-Text-Editor, Datenvisualisierung, kollaboratives Editieren, AI-gestützte Kreation.
|
||||
|
||||
8. Persönliches Wissens-Graph
|
||||
Beschreibung: Ein Tool, das Nutzern hilft, persönliche Wissensnetzwerke aufzubauen und verschiedene Ideen und Informationen zu visualisieren und zu verknüpfen.
|
||||
Funktionen: Knotenerstellung und -verknüpfung, Tag-System, Suchfunktion, Import/Export-Werkzeuge, Visualisierungsdiagramme.
|
||||
Technische Highlights: Graph-Datenbank, Datenvisualisierungsalgorithmen, Markdown-Unterstützung, geräteübergreifende Synchronisation.
|
||||
|
||||
9. Virtueller Pflanzengarten
|
||||
Beschreibung: Eine interaktive Pflanzenenzyklopädie, in der Nutzer die Pflanzenwelt erkunden und virtuelle Gärten anlegen können.
|
||||
Funktionen: Pflanzendatenbank, 3D-Pflanzenmodelle, Wachstumssimulation, Gartenbauanleitung, Community-Showcase.
|
||||
Technische Highlights: 3D-Rendering, saisonale Wechselsimulation, AR-Integration, Pflanzen-Identifikations-API.
|
||||
|
||||
10. Programmier-Challenge-Arena
|
||||
Beschreibung: Eine Online-Wettbewerbsplattform für Programmierer mit verschiedenen Schwierigkeitsstufen.
|
||||
Funktionen: Herausforderungsaufgaben, Code-Editor, automatische Bewertung, Bestenliste, Lernpfad.
|
||||
Technische Highlights: Code-Sandbox-Umgebung, Echtzeit-Bewertungssystem, Algorithmus-Visualisierung, Social-Learning-Funktionen.
|
||||
```
|
||||
|
||||
Und noch mehr... Wenn du gerne spielst, lass uns gemeinsam versuchen, Spiele zu erschaffen!
|
||||
|
||||
```
|
||||
1. 3D Open-World RPG
|
||||
Beschreibung: Ein Fantasy-RPG mit weitläufiger Open World, Quests und Charakterentwicklung.
|
||||
Funktionen: Tag-Nacht-Zyklus, dynamisches Wetter, Skill-Baum, Multiplayer-Koop, Handwerkssystem.
|
||||
Technische Highlights: Three.js oder Babylon.js für 3D-Rendering, serverseitige Spiellogik, Charakteranpassung, Save-System.
|
||||
|
||||
2. Ego-Shooter (FPS) Arena
|
||||
Beschreibung: Ein schnelles Multiplayer-FPS mit verschiedenen Spielmodi und Karten.
|
||||
Funktionen: Team-Deathmatch, Capture-the-Flag, Waffenanpassung, Rangliste.
|
||||
Technische Highlights: WebGL/Three.js für 3D-Grafik, Multiplayer-Netzwerkcode, Treffererkennung, Voice-Chat.
|
||||
|
||||
3. AI-Schach und Multiplayer
|
||||
Beschreibung: Eine voll funktionsfähige Schachplattform mit AI-Gegnern und Online-Multiplayer.
|
||||
Funktionen: AI-Schwierigkeitsstufen, Endspiel-Herausforderungen, Turniermodus, Replay-Analyse.
|
||||
Technische Highlights: Schachlogikbibliothek, WebSocket für Echtzeit-Multiplayer, ELO-Ranglistensystem, Anti-Cheat.
|
||||
|
||||
4. Mahjong Online-Multiplayer
|
||||
Beschreibung: Ein traditionelles Mahjong-Spiel mit Online-Multiplayer und Punktestand.
|
||||
Funktionen: Mehrere Regelwerke, private Räume, Ranglistensystem, Replay-Funktion.
|
||||
Technische Highlights: Tile-Matching-Logik, Echtzeit-Multiplayer, Lobby-System, Punktestand-Tracking.
|
||||
|
||||
5. Rundenbasiertes Strategiespiel
|
||||
Beschreibung: Ein taktisches Strategiespiel mit Raster-Kampf und Einheitenverwaltung.
|
||||
Funktionen: Kampagnenmodus, Gefechtsmodus, Einheitenupgrade, Nebel des Krieges, Multiplayer.
|
||||
Technische Highlights: Raster-Bewegungssystem, AI-Entscheidungsfindung, Runden-Synchronisation, Save/Load-System.
|
||||
|
||||
6. Zeitfahren-Rennspiel
|
||||
Beschreibung: Ein 3D-Rennspiel mit Fokus auf Zeitfahren und Streckenrekorde.
|
||||
Funktionen: Mehrere Strecken, Autoanpassung, Geister-Replay, Bestenliste.
|
||||
Technische Highlights: 3D-Auto-Physik, Streckeneditor, Replay-System, Online-Bestenliste.
|
||||
|
||||
7. Kartenspiel (Deck-Building)
|
||||
Beschreibung: Ein strategisches Kartenspiel, in dem Spieler Decks bauen und gegen Gegner antreten.
|
||||
Funktionen: Kartensammlung, Deck-Building, Rangliste, Saison-Events.
|
||||
Technische Highlights: Kartenspiellogik, Matchmaking-System, AI-Gegner, Kartenanimationen.
|
||||
|
||||
8. Battle Royale (Top-Down 2D)
|
||||
Beschreibung: Ein Top-Down-2D-Battle-Royale mit schrumpfender Spielzone und Loot-Mechanik.
|
||||
Funktionen: Solo- und Squad-Modus, Waffenvielfalt, In-Game-Events, Bestenliste.
|
||||
Technische Highlights: Echtzeit-Multiplayer, Zonen-Schrumpfungslogik, Loot-Spawn-System, Matchmaking.
|
||||
|
||||
9. Horror-Überlebensspiel (Ego-Perspektive)
|
||||
Beschreibung: Ein Ego-Perspektive-Horrorspiel mit Ressourcenmanagement und Fluchtmechanik.
|
||||
Funktionen: Atmosphärische Umgebung, Rätsel, Enemy-AI, Multiple Endings.
|
||||
Technische Highlights: Dynamische Beleuchtung, Sound-Design, Enemy-Pathfinding, Save-System.
|
||||
|
||||
10. Rhythmus-Musikspiel (3D)
|
||||
Beschreibung: Ein 3D-Rhythmus-Spiel, in dem Spieler im Takt der Musik Noten treffen.
|
||||
Funktionen: Mehrere Schwierigkeitsstufen, Streckeneditor, Custom-Song-Unterstützung, Bestenliste.
|
||||
Technische Highlights: Audioanalyse, Beat-Synchronisation, 3D-Noten-Spuren, Input-Timing-Erkennung.
|
||||
```
|
||||
|
||||
## 📚 Assignment
|
||||
|
||||
<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🎯 Kapitelaufgabe: Erstelle deine erste AI-native Mini-Spiele</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
In diesem Abschnitt hast du den kompletten Prozess von „Gespräch-generiertes Snake" bis zum „Verständnis des AI-native Mini-Spiel-Design-Gedankens" durchlaufen. Die folgende Aufgabe hilft dir, dieses Verständnis in echte Fähigkeiten umzuwandeln.
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Reproduziere das AI-native Snake-Spiel vollständig</strong>
|
||||
<ul>
|
||||
<li>Mindestens implementiert: Die Schlange kann sich bewegen, nach dem Fressen von „Nahrung" ändern sich Länge und Punktestand, Kollision mit Wänden oder dem eigenen Körper beendet das Spiel.</li>
|
||||
<li>Während der Reproduktion übe, Fehlerphänomene + Fehlermeldungen + relevante Code-Snippets zusammen an AI zu übergeben und es um Korrektur im „Anfängermodus" zu bitten.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>(Optional) Erstelle 1 AI-native Mini-Spiel oder Demo</strong>
|
||||
<ul>
|
||||
<li>Kann jedes leichte Gameplay rund um Text, Bilder, Musik oder Rhythmus sein, z. B. „Wörter fressen und Gedichte schreiben", „Rhythmus-Tippen", „Generatives Endless Runner" etc.</li>
|
||||
<li>Der Fokus liegt nicht auf aufwendiger Grafik, sondern darauf, dass du klar sagen kannst: Wobei hat AI konkret geholfen, und welches „schwer manuell Machbare oder Umständliche" es gelöst hat.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
Das ist das komplette Tutorial! Du brauchst möglicherweise <strong>4 Stunden</strong>, um alle Inhalte abzuschließen und dein eigenes Snake-Spiel zu bauen. Keine Eile – erkunde, experimentiere und genieße den Prozess. Wenn du auf Konzepte stößt, die du nicht verstehst, schau in den Anhang unten.
|
||||
</p>
|
||||
</el-card>
|
||||
|
||||
## Anhang
|
||||
|
||||
<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">Anhang-Navigation</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Hier sind einige grundlegende Konzepte zu diesem Kapitel: Wenn du beim Lernen auf Fragen wie „Was ist Frontend?" oder „Was genau ist Vibe Coding?" stößt, kannst du jederzeit hier nachschlagen.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>Anhang 1: Brauchen wir Frontend-Entwicklungswissen?</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Verstehe die Rolle des Frontends in einer Anwendung und was „sichtbar" bedeutet.</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>Anhang 2: Was genau ist Vibe Coding</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Verstehe den Kerngedanken des „konversationellen Entwickelns" und wie man mit AI zusammenarbeitet.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" style="margin-top: 10px;">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>Anhang 3: Modellkontext</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Verstehe Konzepte wie „Kontextlänge", die oft gehört aber leicht verwechselt werden.</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>Anhang 4: Instruction-Following-Fähigkeit</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Verstehe, warum Modelle manchmal „nicht zuhören", und wie man klarer schreibt.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 12px; font-size: 12px; color: #909399;">
|
||||
Tipp: Du kannst mit Ctrl/⌘+F nach Stichwörten suchen oder unverständliche Abschnitte an AI kopieren, um sie im „komplett für Anfänger verständlichen" Modus erklären zu lassen.
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## <span id="appendix-1">[Anhang 1: Brauchen wir Frontend-Entwicklungswissen?](#appendix-nav)</span>
|
||||
|
||||
::: tip 💡 Ein Satz zusammengefasst
|
||||
Du musst nicht programmieren können, aber Grundkenntnisse helfen dir, Anforderungen besser an AI zu beschreiben.
|
||||
:::
|
||||
|
||||
<el-row :gutter="16" style="margin: 20px 0;">
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">👁️</span>
|
||||
<span style="font-weight: bold;">Frontend</span>
|
||||
<el-tag type="success" size="small">Sichtbar</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
Alles, was Nutzer <strong>sehen und anklicken</strong> können
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>Webseiten-Titel, Text, Bilder</li>
|
||||
<li>Schaltflächen, Eingabefelder, Dropdown-Menüs</li>
|
||||
<li>Spieloberfläche, Animationen</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">⚙️</span>
|
||||
<span style="font-weight: bold;">Backend</span>
|
||||
<el-tag type="info" size="small">Unsichtbar</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
Datenverarbeitung auf dem Server
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>Nutzerpunktestand-Speicherung</li>
|
||||
<li>Login-Authentifizierung</li>
|
||||
<li>Level-Inhaltsvergabe</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### Frontend-Dreiercombo
|
||||
|
||||
Der Browser baut Seiten mit drei Arten von „Code":
|
||||
|
||||
<el-tabs type="border-card" style="margin: 20px 0;">
|
||||
<el-tab-pane label="🏗️ HTML - Struktur">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Funktion:</strong> Definiert, <strong>welche</strong> Elemente auf der Seite vorhanden sind</p>
|
||||
<p><strong>Analogy:</strong> Strukturskizze eines Hauses (wo Wände, Türen, Fenster sind)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code><button>Klick mich</button>
|
||||
<h1>Überschrift</h1>
|
||||
<img src="photo.png"></code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="🎨 CSS - Stil">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Funktion:</strong> Steuert, <strong>wie</strong> Elemente aussehen</p>
|
||||
<p><strong>Analogy:</strong> Inneneinrichtung eines Hauses (Farbe, Material, Layout)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button {
|
||||
background: blue;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="⚡ JavaScript - Verhalten">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Funktion:</strong> Lässt die Seite <strong>interaktiv</strong> werden</p>
|
||||
<p><strong>Analogy:</strong> Elektrische Schalter eines Hauses (Reaktion auf Klicks)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button.onclick = () => {
|
||||
alert('Du hast mich geklickt!')
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
### Wie wird Code zur Seite?
|
||||
|
||||
Wenn du eine Webseite öffnest, verarbeitet der Browser drei Arten von Code nacheinander:
|
||||
|
||||
**1. HTML – Seitenstruktur definieren**
|
||||
Der Browser parst zuerst HTML, versteht, welche Elemente vorhanden sind (Überschriften, Absätze, Bilder, Buttons usw.) und ihre Hierarchie.
|
||||
|
||||
**2. CSS – Stile anwenden**
|
||||
Dann wendet der Browser CSS-Regeln an und fügt den Elementen Stile hinzu: Farbe, Größe, Position, Abstand usw., damit die Seite ansprechend wird.
|
||||
|
||||
**3. JavaScript – Interaktion hinzufügen**
|
||||
Schließlich wird JavaScript ausgeführt, um die Seite „lebendig" zu machen: auf Klicks reagieren, Formulare absenden, Animationen abspielen usw.
|
||||
|
||||
**4. Seitendarstellung**
|
||||
Das Zusammenspiel dieser drei ergibt die Webseite, die du schließlich siehst.
|
||||
|
||||
### Moderne Frontend-Frameworks: Von HTML zu React/Vue
|
||||
|
||||
Die zuvor vorgestellte HTML/CSS/JavaScript-Dreiercombo ist die Grundlage aller Webseiten. Wenn Seiten jedoch komplexer werden, stößt die direkte Nutzung auf Herausforderungen: Code ist schwer wartbar, viel Wiederholung, komplizierte Datensynchronisation.
|
||||
|
||||
**Moderne Frontend-Frameworks** (wie React, Vue, Angular) bauen auf HTML/CSS/JS auf und machen die Entwicklung effizienter:
|
||||
|
||||
**1. HTML/CSS/JS (Grundstufe)**
|
||||
Direkte Manipulation von Seitenelementen, geeignet für einfache Seiten. Bei wachsendem Code vermischen sich alle Logiken, was die Wartung erschwert.
|
||||
|
||||
**2. jQuery (Übergangsphase)**
|
||||
Vereinfachte DOM-Manipulation, machte Code übersichtlicher. Aber Seitenstatus musste weiterhin manuell verwaltet werden, bei Datenänderungen mussten selbst die entsprechenden Elemente gefunden und aktualisiert werden.
|
||||
|
||||
**3. React/Vue (Moderne Phase)**
|
||||
Nutzt komponentenbasierte und zustandsgesteuerte Designs:
|
||||
- **Komponenten**: Zerlegt die Seite in unabhängige, wiederverwendbare Module (wie Buttons, Karten, Navigationsleisten)
|
||||
- **Zustandsgesteuert**: Bei Datenänderungen aktualisiert das Framework automatisch die entsprechende Oberfläche, ohne manuelle Eingriffe
|
||||
|
||||
::: tip 💡 Einfach verstanden
|
||||
- **HTML/CSS/JS** = Grundmaterialien (Ziegel, Zement, Bewehrung)
|
||||
- **React/Vue** = Baugerüst (stellt Regeln und Werkzeuge für den Hausbau bereit)
|
||||
|
||||
Im Zeitalter des AI-gestützten Programmierens musst du nicht alle Details von Frameworks verstehen; es reicht, die Grundkonzepte zu kennen, um AI durch natürliche Sprachbeschreibungen Code generieren zu lassen.
|
||||
:::
|
||||
|
||||
### Im Vibe Coding
|
||||
|
||||
**Kernpunkt: Du musst keinen Code schreiben, du musst nur beschreiben können.**
|
||||
|
||||
Nach dem Verständnis von Frontend-Konzepten kannst du Anforderungen so an AI beschreiben:
|
||||
|
||||
> „Erstelle mit React eine Bestenliste-Seite: rechts die Punkteliste, bei Klick auf eine Zeile werden unten die Spielerdetails angezeigt, im minimalistischen modernen Stil."
|
||||
|
||||
Wenn du HTML, CSS, JavaScript und andere Frontend-Grundlagen vertiefen möchtest, siehe das [Web-Basics-Appendix](/de-de/appendix/3-browser-and-frontend/javascript-deep-dive). Für die Entwicklungsgeschichte der Frontend-Technologie siehe das [Frontend-Evolutionsgeschichte-Appendix](/de-de/appendix/3-browser-and-frontend/frontend-frameworks).
|
||||
|
||||
## <span id="appendix-2">[Anhang 2: Was genau ist Vibe Coding](#appendix-nav)</span>
|
||||
|
||||
> 💡 Was ist Vibe Coding? Der Informatiker [Andrej Karpathy](https://karpathy.ai/) (Mitbegründer von OpenAI, ehemaliger AI-Chef bei Tesla) prägte im Februar 2025 den Begriff **Vibe Coding**. Dieser Begriff beschreibt eine Programmiermethode, die auf LLMs basiert und **es Programmierern ermöglicht, lauffähigen Code durch natürliche Sprachbeschreibungen statt manuelles Codieren zu generieren.**
|
||||
|
||||
|
||||
|
||||
Wörtlich verstanden kann Vibe Coding als „Entwicklung durch Sprechen" verstanden werden. Der Kernwandel besteht darin: Du musst nicht mehr selbst Code Zeile für Zeile schreiben, Syntax nachschlagen und Bugs beheben; stattdessen beschreibst du in natürlicher Sprache, was du willst, z. B.:
|
||||
|
||||
„Ich brauche eine Login-Seite mit Eingabefeld für Handynummer und Bestätigungscode."
|
||||
„Nach erfolgreichem Login Weiterleitung zur Startseite mit Benutzername oben rechts."
|
||||
„Ein einfaches Snake-Minispiel mit Tastatursteuerung."
|
||||
|
||||
Große Sprachmodelle (LLM) übersetzen solche Beschreibungen automatisch in wirklich lauffähigen Code und generieren die entsprechende Seiten, Logik und Datenstrukturen. Nachdem du das Ergebnis gesehen hast, kannst du mit natürlicher Sprache Änderungswünsche äußern, z. B. „Button etwas größer", „Hintergrund dunkler", „Punktestand speichern und Bestenliste anzeigen", und AI passt die Implementierung weiter an.
|
||||
|
||||
In diesem Modus musst du nicht erst eine Programmiersprache lernen, um Code zu schreiben; stattdessen konzentrierst du dich darauf: klar zu beschreiben, was getan werden soll, das Ergebnis zu beurteilen und neue Änderungen vorzuschlagen. AI übernimmt die Umsetzung dieser übergeordneten Ideen in konkrete Implementierung und reduziert so mechanische, repetitive Codierungsarbeit erheblich.
|
||||
|
||||
Für weitere Details zu Vibe Coding siehe: [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
|
||||
|
||||
Für mehr von Karpathys Gedanken siehe: [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
|
||||
|
||||
### Wie man sich als Vibe-Coding-Meister ausgibt
|
||||
|
||||
In der Praxis werden beim echten Vibe Coding oft keine komplexen Prompts verwendet. Vielleicht brauchst du am Anfang einen konkreten, etwas komplexen Prompt für das gesamte Programm, aber danach genügen oft einfache Prompts wie diese:
|
||||
|
||||
```
|
||||
"Es gibt einen Bug im Code, bitte beheben."
|
||||
"Ich will keinen Teil-Code, gib mir den kompletten korrigierten Code."
|
||||
"Dein Code hat immer noch Probleme."
|
||||
"Bitte korrigiere erneut und gib den vollständigen korrigierten Code."
|
||||
"Es lief vorhin, warum geht es jetzt nicht mehr?"
|
||||
"Hast du mich nicht verstanden? Ändere nicht meinen ursprünglichen Code."
|
||||
"Füge keine Debugging-Funktionen hinzu."
|
||||
"Tu nichts, was ich nicht verlangt habe."
|
||||
"Wo ist die Funktion, die ich verlangt habe?"
|
||||
"Verstehst du nicht, was ich sage?"
|
||||
"Ich brauche nur eine Funktion."
|
||||
"Ich habe dir gesagt, meinen vorherigen Code zu beachten."
|
||||
"Bitte füge keine unnötigen Kommentare hinzu."
|
||||
"Bitte ändere nicht die grundlegende Logik meines ursprünglichen Codes."
|
||||
"Hilf mir, den Code zu ändern."
|
||||
"Ändere basierend auf meinem Code..."
|
||||
"Ändere nicht meine Variablennamen!!!"
|
||||
"Ändere nicht die ursprünglichen Funktionsnamen!"
|
||||
"Rühr nicht an meinen Variablen."
|
||||
"Füge keine zusätzlichen Funktionen hinzu."
|
||||
"Generiere nicht nur ein Gerüst, sondern vollständigen Code."
|
||||
```
|
||||
|
||||
Das mag übertrieben klingen, aber in der Praxis sind das genau die Prompts, die wir täglich verwenden können. Wegen der **Kontextlängenbegrenzung** großer Sprachmodelle oder weil ihre **Instruction-Following-Fähigkeit** nicht immer stark ist, kann das Modell Inhalte vergessen, die früher im Gespräch besprochen wurden. Beim Vibe Coding bevorzugen wir Modelle mit langem Kontext und starker Instruction-Following-Fähigkeit; wir können dies anhand von Rankings oder Metriken beurteilen.
|
||||
|
||||
Alternativ neigen Modelle dazu, im Stil ihrer Trainingsdaten zu antworten. Manche sprechen sehr formell, andere mögen viele Verzierungen, und einige Modelle mögen es, viele Kommentare oder unnötige Module im Code hinzuzufügen.
|
||||
|
||||
## <span id="appendix-3">[Anhang 3: Modellkontext](#appendix-nav)</span>
|
||||
|
||||
Modellkontext kann als das Kurzzeitgedächtnis von AI verstanden werden. Er bezieht sich auf alle Textinhalte, die das Modell in einer einzelnen Konversation oder Aufgabe „sehen" und „erinnern" kann, einschließlich deiner vorherigen Fragen, Systemanweisungen, relevante Materialien usw.
|
||||
|
||||
Gerade wegen des Kontexts kann AI verstehen, dass du eine Frage stellst, die sich auf frühere Inhalte bezieht, und kann runde für runde, scheinbar kohärente natürliche Gespräche führen. Ohne Kontext würde jede deiner Aussagen im Modell wie eine völlig neue Frage wirken, und es könnte nicht wissen, was du zuvor gesagt hast.
|
||||
|
||||
Jedes Modell hat seine eigene effektive Kontextlänge (Context Window). Diese wird normalerweise in Token (grob als „Wortfragmente") gemessen; aktuell liegen die meisten Modelle zwischen 32k und 128k Token. Je länger der Kontext, desto mehr kann das Modell „lesen", z. B.:
|
||||
|
||||
- Einmal eine längere Arbeit oder einen Bericht lesen
|
||||
- In einem Gespräch mehrere Quellen und Fälle referenzieren
|
||||
- Das Modell komplexe Diskussionsergebnisse aus früheren Runden merken lassen
|
||||
|
||||
Wenn deine Eingabe die Kontextbegrenzung des Modells erreicht oder überschreitet, treten häufig folgende Phänomene auf:
|
||||
|
||||
- Das Modell beginnt, Details oder Schlüsselinformationen aus längeren Texten zu vergessen
|
||||
- Im weiteren Verlauf des Gesprächs weicht das Thema vom ursprünglichen Ziel ab
|
||||
- Zwischen verschiedenen Fragen zum selben Material sind die referenzierten Inhalte inkonsistent
|
||||
|
||||
Diese Phänomene bedeuten nicht, dass das Modell plötzlich „dümmer" wird, sondern sind natürliche Folgen, wenn die Kontextkapazität erschöpft oder fast erschöpft ist.
|
||||
|
||||
In der Praxis wünscht man sich sowohl einen möglichst langen Kontext als auch das Bewusstsein:
|
||||
- Je länger der Kontext, desto mehr Rechenressourcen werden verbraucht
|
||||
- Die entsprechenden Aufrufkosten steigen ebenfalls
|
||||
|
||||
Daher muss man bei der Entwicklung von AI-Anwendungen eine Balance finden zwischen dem, was das Modell sehen kann, und der Kostenkontrolle sowie Effizienzsteigerung. Zum Beispiel:
|
||||
- Informationen, die langfristig erhalten bleiben müssen, werden aufbereitet, bevor sie dem Modell übergeben werden
|
||||
- Unnötige Details werden nicht immer wieder unverändert in den Kontext gestopft
|
||||
- Externe Wissensdatenbanken übergeben „langfristiges Gedächtnis" an das System, anstatt es in den Modellkontext zu quetschen
|
||||
|
||||
## <span id="appendix-4">[Anhang 4: Instruction-Following-Fähigkeit](#appendix-nav)</span>
|
||||
|
||||
Die Instruction-Following-Fähigkeit bezieht sich darauf: Ob das Modell nach dem Verstehen deiner Anweisung in der Lage ist, diese korrekt und vollständig auszuführen. Sie umfasst nicht nur die Beantwortung von Fragen, sondern auch die Ausführung von Aufgaben im angegebenen Format, Stil und mit den angegebenen Schritten.
|
||||
|
||||
Zum Beispiel sind folgende Anweisungen mit klaren Anforderungen:
|
||||
|
||||
- Fasse diesen Artikel in drei Hauptpunkte zusammen
|
||||
- Schreibe eine höfliche Antwort-E-Mail im formellen Stil
|
||||
- Übersetze dieses Wort ins Englische und bilde jeweils einen Beispielsatz
|
||||
- Extrahiere Autor, Datum und Hauptereignis aus dem Artikel
|
||||
|
||||
Ein Modell mit starker Instruction-Following-Fähigkeit hat normalerweise folgende Eigenschaften:
|
||||
|
||||
- Ausgabe in der geforderten Menge
|
||||
Wenn drei Hauptpunkte gefordert werden, werden nicht fünf geliefert.
|
||||
- Abdeckung aller angegebenen Elemente
|
||||
Wenn Autor, Datum und Ereignis gefordert werden, wird keines davon weggelassen.
|
||||
- Einhaltung des angegebenen Formats und Stils
|
||||
Wenn ein formeller Stil gefordert wird, wird keine zu umgangssprachliche Antwort geliefert.
|
||||
- Keine unnötigen zusätzlichen Erweiterungen
|
||||
Wenn nur Übersetzung und Beispielsatz gefordert werden, wird kein großer irrelevanter Erklärungsblock ausgegeben.
|
||||
|
||||
In der Praxis ist eine starke Instruction-Following-Fähigkeit aus folgenden Gründen sehr wichtig:
|
||||
|
||||
- Verbesserte Stabilität: Bei gleicher Anweisung sind Ausgabestruktur und Verhaltensmuster über verschiedene Zeitpunkte und bei mehrfacher Ausführung konsistenter, ohne willkürliche Ergänzungen
|
||||
- Verbesserte Reproduzierbarkeit: Wenn du einen Prompt in ein Produkt oder einen Prozess integrierst, kannst du erwarten, wie das Modell grob antwortet, was Testen und Iteration erleichtert
|
||||
- Einfachere Systemintegration: Wenn die Modellausgabe dem erwarteten Format entspricht, ist die automatische Anbindung an Backend-Programme, Workflows oder andere Tools einfacher
|
||||
|
||||
Daher sollte man bei der Auswahl und Bewertung eines großen Sprachmodells neben Intelligenz und Wissensabdeckung besonders auf seine Instruction-Following-Fähigkeit achten. Für industrielle Anwendungen ist oft wichtiger, ob es stabil und korrekt Anweisungen ausführen kann, als gelegentlich eine beeindruckende Antwort zu liefern.
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Weiterlernen"
|
||||
description="Von der spielerischen Erfahrung ausgehend, empfehlen wir dir, zur lokalen Entwicklung und Produktpraxis überzugehen."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
---
|
||||
title: 'Anfaenger 1: Im KI-Zeitalter reicht Reden zum Programmieren'
|
||||
description: 'Baue eine AI-native Snake-Variante per Dialog und uebertrage den Workflow auf dein eigenes Mini-Spiel oder Demo.'
|
||||
---
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
title: 'Produktthinking und Loesungsentwurf'
|
||||
description: 'Wie du von "ein Tool bauen" zu "ein wertvolles Produkt entwerfen" kommst: Ideenquellen, Zerlegung in Loesungsbausteine, Verfeinerung und sinnvoller AI-Einsatz.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'ca. <strong>6 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# Produktthinking und Loesungsentwurf
|
||||
|
||||
## Kapiteluebersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Produktthinking', 'Beduerfnisanalyse', 'Loesungsentwurf', 'Nutzereinblicke']" coreOutput="1 kompletter Produktentwurf" expectedOutput="Umsetzbare Produktideen">
|
||||
|
||||
In den vorherigen Kapiteln hast du gelernt, wie du mit AI IDEs schnell Prototypen und kleine Tools umsetzt. In diesem Anhang verschieben wir den Fokus von <strong>"Kann ich es bauen?"</strong> zu <strong>"Was lohnt es sich zu bauen?"</strong>.
|
||||
|
||||
Wir behandeln:
|
||||
|
||||
1. Was ist eine Idee und wann ist sie gut genug, um Zeit zu investieren?
|
||||
2. Wie zerlegt man eine Idee in eine umsetzbare App (Scope, Nutzer, Szenario, Kernfluss)?
|
||||
3. Wie wird aus "funktioniert irgendwie" eine Anwendung, die Menschen gerne nutzen?
|
||||
4. Wo verstärkt AI den Wert wirklich (und wo ist AI nur Deko)?
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Ideenquellen', description: 'Verlaessliche Produktideen finden' },
|
||||
{ title: 'Loesungszerlegung', description: 'Ideen in umsetzbare Apps verwandeln' },
|
||||
{ title: 'Verfeinerung', description: 'Von funktionsfaehig zu benutzerfreundlich' },
|
||||
{ title: 'AI-Verstaerkung', description: 'AI sinnvoll einsetzen, um Wert zu schaffen' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Was du lernen wirst
|
||||
|
||||
Am Ende solltest du beantworten koennen:
|
||||
|
||||
1. Woher kommen verlaessliche Ideen?
|
||||
2. Wie wird aus einer Idee ein umsetzbarer Loesungsentwurf?
|
||||
3. Woran erkenne ich eine "gute" App und wie verbessere ich sie?
|
||||
4. An welcher Stelle setze ich AI ein, um den Nutzen zu vergroessern?
|
||||
5. Wie finde ich die ersten echten Nutzer?
|
||||
|
||||
---
|
||||
|
||||
# 1. Verlaessliche Ideen finden
|
||||
|
||||
Viele suchen nach einem "genialen Einfall". In der Praxis entstehen die meisten guten Apps aus konkreten Situationen: wiederkehrende Probleme, echte Friktion, klare Zielgruppen.
|
||||
|
||||
## 1.1 Was ist eine Idee?
|
||||
|
||||
Eine Idee ist nicht nur Begeisterung. Eine umsetzbare Idee hat mindestens:
|
||||
|
||||
1. Eine klare Zielgruppe (wer genau?).
|
||||
2. Ein konkretes Nutzungsszenario (wann/wo tritt das Problem auf?).
|
||||
3. Eine konkrete Aufgabe (welches Ergebnis will der Nutzer erreichen?).
|
||||
4. Eine plausible Verbesserung gegenueber dem Status quo (warum ist es heute nervig/teuer/risikoreich?).
|
||||
|
||||
## 1.2 Idee vs. Bedarf (Need)
|
||||
|
||||
Eine Idee ist deine Hypothese. Ein Bedarf ist ein Problem, das Nutzer bereits aktiv loesen (auch mit schlechten Workarounds).
|
||||
|
||||
Eine einfache Unterscheidung:
|
||||
|
||||
- Echter Bedarf: Nutzer investieren heute schon Zeit/Geld/Stress, um das Problem zu umgehen.
|
||||
- Scheinbedarf: Nutzer finden es "interessant", aber wuerden weder bezahlen noch Verhalten aendern.
|
||||
|
||||
|
||||
|
||||
## 1.3 Warum "gute" Ideen wachsen
|
||||
|
||||
Gute Ideen haben oft einen natuerlichen Pfad:
|
||||
|
||||
Problem -> kleiner Nutzen sofort -> Weiterempfehlung -> wiederkehrende Nutzung.
|
||||
|
||||
Schlechte Ideen benoetigen konstanten externen Schub (Marketing, Erklaeren, Push), weil der Kernnutzen nicht trifft.
|
||||
|
||||
## 1.4 Vier stabile Ideenquellen
|
||||
|
||||
Diese Quellen liefern haeufig bessere Startpunkte als Trends:
|
||||
|
||||
1. Eigene Arbeit: repetitive Ablaufe, Koordination, Reporting, QA, Deployment.
|
||||
2. Communities: Foren/Chats, in denen dieselben Fragen staendig wiederkommen.
|
||||
3. Beschwerden: App-Reviews, Kommentare, "Warum geht das nicht einfacher?"-Momente.
|
||||
4. Bestehende Produkte: nicht kopieren, sondern Luecken finden (zu teuer, zu komplex, zu wenig spezialisiert).
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 2. Loesungszerlegung: Von Idee zu App
|
||||
|
||||
Eine Idee wird erst dann baubar, wenn du sie in Entscheidungen uebersetzt.
|
||||
|
||||
## 2.1 Minimum: Nutzer, Szenario, Kernfluss
|
||||
|
||||
Definiere:
|
||||
|
||||
1. Nutzerprofil: Rolle, Ziel, Constraints, Zahlungsbereitschaft.
|
||||
2. Szenario: Trigger -> Arbeitsschritte -> Ergebnis.
|
||||
3. Kernfluss: die 3-7 Schritte, die den Wert liefern.
|
||||
|
||||
## 2.2 Scope schneiden (MVP)
|
||||
|
||||
Prinzip: Ein MVP ist nicht "weniger Features", sondern "ein klares Versprechen, das haelt".
|
||||
|
||||
Hilfsfragen:
|
||||
|
||||
- Was ist der kleinste Moment, in dem der Nutzer "Ah, das spart mir wirklich Zeit" sagt?
|
||||
- Welche Schritte kann ich streichen, ohne den Kernwert zu verlieren?
|
||||
- Welche Annahme ist am riskantesten? (Die muss zuerst validiert werden.)
|
||||
|
||||
---
|
||||
|
||||
# 3. Verfeinerung: Von benutzbar zu gern genutzt
|
||||
|
||||
Wenn die erste Version steht, ist die Arbeit nicht vorbei. Jetzt geht es um:
|
||||
|
||||
1. Klarheit: Nutzer verstehen sofort, was der naechste Schritt ist.
|
||||
2. Friktion: weniger Klicks, weniger Formulare, weniger Kontextwechsel.
|
||||
3. Vertrauen: transparente Daten, nachvollziehbare Ergebnisse, saubere Defaults.
|
||||
|
||||
Ein guter Test: Kann ein neuer Nutzer in 60 Sekunden Wert bekommen, ohne eine Anleitung zu lesen?
|
||||
|
||||
---
|
||||
|
||||
# 4. AI-Verstaerkung: AI dort einsetzen, wo sie Wert verstaerkt
|
||||
|
||||
AI ist besonders stark, wenn sie:
|
||||
|
||||
1. Sprache/Unstruktur in Struktur verwandelt (Text -> Aufgaben, Notizen -> ToDos).
|
||||
2. Zusammenfasst und priorisiert (lange Inhalte -> Kernpunkte + naechste Aktionen).
|
||||
3. Personalisierung ermoeglicht (unterschiedliche Nutzer brauchen unterschiedliche Vorschlaege).
|
||||
|
||||
AI ist oft schwach, wenn sie nur als "Chatbot-Schicht" auf eine App geklebt wird, ohne den Kernfluss besser zu machen.
|
||||
|
||||
---
|
||||
|
||||
## Abschluss: Dein Output
|
||||
|
||||
Nach diesem Anhang solltest du einen Loesungsentwurf schreiben koennen, der enthaelt:
|
||||
|
||||
1. Zielgruppe und Use-Case
|
||||
2. Kernproblem und warum es teuer/nervig ist
|
||||
3. Kernfluss (3-7 Schritte)
|
||||
4. MVP-Scope
|
||||
5. Validierungsplan (wie du in 7 Tagen echte Signale sammelst)
|
||||
|
||||
<RelatedArticlesSection />
|
||||
|
||||
+359
@@ -0,0 +1,359 @@
|
||||
# Sieben AI-Programmier-Tools im Vergleich
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
Angesichts der schillernden Auswahl an AI-Programmier-Tools: Welches ist das richtige für Sie? Dieses Kapitel vergleicht 7 gängige Web Vibe Coding Plattformen wie Lovable, Replit, Z.ai usw. anhand einer einheitlichen Praxisaufgabe – der Entwicklung eines "Snake + AI-Poesie"-Spiels. Wir vergleichen sie aus mehreren Dimensionen wie Anfängerfreundlichkeit, Code-Kontrollierbarkeit und Bereitstellungskomfort, um Ihnen bei der schnellen Auswahl des besten Entwicklungstools zu helfen.
|
||||
|
||||
---
|
||||
|
||||
# 1. Snake-Spiel mit Vibe Coding erstellen: Vollständiges Praxis-Tutorial
|
||||
|
||||
Dieser Artikel stellt eine neue Softwareentwicklungspraxis vor – "Vibe Coding", die KI nutzt, um den Anwendungsentwicklungsprozess zu beschleunigen.
|
||||
|
||||
Als Nächstes werden wir nacheinander die Kernkonzepte von Vibe Coding vorstellen, erklären, was ein AI Agent ist, und praktische Methoden zum Schreiben von Prompts geben. Schließlich werden wir durch eine vollständige Praxis das "Snake"-Spiel von Grund auf erstellen und mehrere gängige Vibe Coding Plattformen im Detail vergleichen, um Ihnen bei der Auswahl der besten Tool-Kombination zu helfen.
|
||||
|
||||
## Was Sie lernen werden:
|
||||
|
||||
- **Was ist Vibe Coding**: Definition, Workflow und wichtigste Vorteile verstehen.
|
||||
- **Die Rolle von AI Agents**: Arbeitsweise von AI Agents und Unterschiede zu traditionellen Programmen verstehen.
|
||||
- **Wie man gute Prompts schreibt**: Klare, spezifische Prompt-Formulierungen für bessere Ergebnisse beherrschen.
|
||||
- **Vibe Coding Tools**: Eine Reihe gängiger AI-Programmier- und Design-Plattformen kennenlernen.
|
||||
- **Plattform-Vergleich**: Bewertung und Vergleich der Vor- und Nachteile von 7 verschiedenen AI Agent Plattformen aus der Perspektive von Einsteigern.
|
||||
- **UI / UX Tools**: Lernen, wie man Figma, Mastergo und andere UI/UX-Tools in den gesamten Workflow integriert.
|
||||
|
||||
## 1. Einleitung
|
||||
|
||||
In den bisherigen Kursen haben wir stets das Full-Stack-Entwicklungsmodell von z.ai für Programmieraufgaben verwendet.
|
||||
|
||||
Haben wir uns jedoch jemals gefragt: Sein Kern ist eigentlich der "AI Agent" (anders als gewöhnliche Chat-KI und viel intelligenter)? Denn es kommuniziert nicht nur mit Ihnen, sondern kann auch denken (wenn Sie ihm eine Aufgabe geben, plant es zunächst) und proaktiv handeln (z.B. Web-Suche aufrufen, Computerbefehle ausführen, Webseiten öffnen). Wir werden später darauf zurückkommen.
|
||||
|
||||
## 1. Was ist Vibe Coding?
|
||||
|
||||
Vibe Coding ist eine neue Softwareentwicklungsmethode, die KI nutzt, um den Anwendungsentwicklungsprozess zu beschleunigen. Es ist kein Ersatz für traditionelle Programmierung, sondern ein "konversationelleres" Programmiermodell. Dieses Konzept wurde vom AI-Forscher Andrej Karpathy vorgeschlagen: In diesem Workflow schreiben Entwickler nicht mehr Zeile für Zeile Code selbst, sondern steuern hauptsächlich AI Agents, um Anwendungen zu generieren, zu optimieren und zu debuggen.
|
||||
|
||||
Die Kernidee von Vibe Coding ist der Übergang von **"code-first"** zu **"intent-first"**. Sie müssen nicht mehr ab der ersten Codezeile planen, sondern beschreiben das gewünschte Ergebnis in natürlicher Sprache.
|
||||
|
||||
Ein typischer Vibe Coding-Workflow ist ein iterativer Kreislauf:
|
||||
|
||||
- **Ziel beschreiben**: Zunächst mit einem Satz oder Absatz beschreiben, was Sie implementieren möchten, z.B.: "Ein einfaches Snake-Spiel mit Python-Backend, das Gedichte generieren kann."
|
||||
- **AI generiert Code**: Der AI Agent analysiert Ihre Anforderungen, generiert eine erste Codeversion mit grundlegender Struktur, Frontend-Seiten und Backend-Logik.
|
||||
- **Ausführen und beobachten**: Den generierten Code ausführen, prüfen, ob er wie erwartet funktioniert, und dabei Bugs oder Schwächen entdecken.
|
||||
- **Feedback geben und iterieren**: Bei Fehlern oder unbefriedigenden Ergebnissen im Dialog weiter instruieren, z.B.: "Die Schlange bewegt sich zu langsam, mach sie schneller" oder "Der API Key in der `.env`-Datei wird nicht richtig gelesen, bitte den Backend-Code reparieren."
|
||||
- **Obige Schritte wiederholen**: Kontinuierlich im Kreislauf "Beschreiben → Generieren → Ausführen → Feedback" iterieren, bis die Anwendung zufrieden stellend ist.
|
||||
|
||||
### Die wichtigsten Vorteile von Vibe Coding:
|
||||
|
||||
- **Einstiegshürde senken**: Auch Designer, Gründer und Studierende ohne Programmiererfahrung können durch natürliche Sprache an der Anwendungsentwicklung teilnehmen.
|
||||
- **Schnelle Prototypen**: Die Zeit von der Idee zum MVP (Minimum Viable Product) wird drastisch verkürzt.
|
||||
- **Effizienz steigern**: Automatische Erledigung großer Mengen repetitiver, mechanischer Codierungsarbeit (wie Boilerplate-Code), sodass Entwickler sich auf Architektur-Design und Probleabstraktion konzentrieren können.
|
||||
- **Experimentieren fördern**: Ermutigt zu schnellem Ergebnis und kontinuierlicher Verbesserung, was das Ausprobieren neuer Ideen und Funktionen erleichtert.
|
||||
|
||||
## 2. Was sind Vibe Coding Online-Plattformen (Web-based)?
|
||||
|
||||
In diesem Praxis-Test werden Sie feststellen, dass die von uns bewerteten Tools in zwei Kategorien eingeteilt werden: **Web-based (Online-Plattformen)** und **IDE (lokale Entwicklungsumgebungen)**.
|
||||
|
||||
Obwohl beide im Kern AI-gestützt Code schreiben, gibt es gewaltige Unterschiede in der Nutzererfahrung und den Anwendungsszenarien:
|
||||
|
||||
### Vibe Coding Online-Plattformen (Web-based)
|
||||
|
||||
**Repräsentative Tools:** Lovable, Replit, Z.ai, v0
|
||||
|
||||
Das ist wie ein "Ready-to-move-in"-Hotelapartment.
|
||||
|
||||
- **Keine Umgebungskonfiguration nötig**: Sie müssen sich nicht um Python-Umgebung, Node.js-Version oder Abhängigkeitsinstallation kümmern. Browser öffnen, URL eingeben, direkt loslegen.
|
||||
- **Ein-Klick-Vorschau und Bereitstellung**: Nach der Codegenerierung zeigt die Plattform das Ergebnis automatisch in einem Seitenfenster an. Wenn fertig, einen Klick, um einen Link zu generieren und mit Freunden zu teilen.
|
||||
- **Geeignete Szenarien:**
|
||||
- **Schnelle Ideenvalidierung (MVP)**: Eine Idee im Kopf, mal eine halbe Stunde ausprobieren.
|
||||
- **Einsteiger**: Komplett frei von komplexen Umgebungsfehlern, nur die Freude an AI-Programmierung erleben.
|
||||
- **Leichtgewichtige Anwendungen**: Eine einfache Tool-Webseite, ein kleines Spiel oder eine persönliche Präsentationsseite.
|
||||
|
||||
### AI IDE (Lokale Entwicklungsumgebung)
|
||||
|
||||
**Repräsentative Tools:** Cursor, Trae, VS Code + AI-Plugin
|
||||
|
||||
Das ist wie ein "voll ausgestattetes" Eigenheim.
|
||||
|
||||
- **Starke lokale Fähigkeiten**: Läuft auf Ihrem Computer, hat direkten Zugriff auf alle Ihre lokalen Dateien und nutzt die Rechenleistung Ihres Computers.
|
||||
- **Nahtlose professionelle Workflow-Integration**: Geeignet für große Projekte, freie Plugin-Installation, Verbindung zu lokalen Datenbanken, komplexes Debugging.
|
||||
- **Geeignete Szenarien:**
|
||||
- **Professionelle Projektentwicklung**: Langfristig zu wartende, strukturell komplexe kommerzielle Projekte.
|
||||
- **Tiefe Anpassung**: Extreme Code-Kontrolle oder tiefe Integration mit bestehendem lokalem Workflow (wie Git, Docker).
|
||||
- **Datenschutz**: Code komplett lokal, besser konform zu Sicherheitsrichtlinien mancher Unternehmen.
|
||||
|
||||
**Zusammenfassend:** Wenn Sie gerade erst mit AI-Programmierung beginnen oder nur schnell etwas Kleines ausprobieren wollen, sind **Online-Plattformen** der perfekte Startpunkt. Wenn Sie professioneller Entwickler sind oder das Projekt immer komplexer wird, bietet eine **lokale IDE** eine höhere Obergrenze.
|
||||
|
||||
---
|
||||
|
||||
## 3. Was ist ein AI Agent?
|
||||
|
||||
### Was ist ein AI Agent?
|
||||
|
||||
Ein AI Agent ist ein Softwaresystem, das seine Umgebung wahrnehmen, Entscheidungen treffen und autonom handeln kann, um bestimmte Ziele zu erreichen. Im Vergleich zu traditioneller Software, die festen Anweisungen folgt und einen einzigen Prozessablauf hat, sind AI Agents flexibler und anpassungsfähiger.
|
||||
|
||||
Hier sind einige Schlüsseleigenschaften, die AI Agents von traditionellen Programmen unterscheiden:
|
||||
|
||||
- **Autonomie**: AI Agents haben hohe Unabhängigkeit. Traditionelle Programme müssen meist Schritt für Schritt von Menschen ausgelöst werden, während ein Agent basierend auf seinem Ziel selbst entscheiden kann, was er als Nächstes tun soll.
|
||||
- **Wahrnehmung und Gedächtnis**: Agents sammeln Daten aus der Umgebung (z.B. API-Antworten, Sensordaten, Nutzereingaben) und behalten Kontext durch "Gedächtnis", um Erfahrung in späteren Aktionen wiederzuverwenden und die Leistung kontinuierlich zu verbessern.
|
||||
- **Rationalität und Zielorientierung**: Agents analysieren und planen um ein gegebenes Ziel herum und wählen die geeignete Aktionssequenz, um höhere "Leistungskennzahlen" zu verfolgen.
|
||||
- **Werkzeugnutzung**: Ein Hauptmerk moderner AI Agents ist die Fähigkeit, externe Tools aufzurufen und nicht auf "Textgenerierung" beschränkt zu bleiben. Sie können z.B. Webseiten durchsuchen, Code ausführen, Datenbanken abfragen, E-Mails senden – ein Gehirn, das "Tools orchestriert".
|
||||
|
||||
Man kann es sich so vorstellen:
|
||||
|
||||
- Ein **traditionelles Programm** ist wie ein Taschenrechner. Man gibt Zahlen und Operatoren ein, es rechnet nur, wenn man den Knopf drückt.
|
||||
- Ein **AI-Assistent** ist wie ein menschlicher Assistent. Man bittet ihn "Finde Restaurants in meiner Nähe", er gibt Suchergebnisse und listet Optionen auf, aber die Entscheidung trifft am Ende man selbst.
|
||||
- Ein **AI Agent** ist eher wie ein automatisiertes Forschungsteam. Man gibt nur ein hochrangiges Ziel (z.B. "Plane eine Japanreise für mich"), und es zerlegt die Aufgabe, recherchiert online, bucht Flüge und Hotels (per API), erstellt einen Zeitplan und liefert das Ergebnis – fast ohne dass Sie sich um Details kümmern müssen.
|
||||
|
||||
---
|
||||
|
||||
# 2. Zum Thema Prompt-Schreiben
|
||||
|
||||
## 1. Prompt am besten auf einmal oder in mehreren Schritten schreiben?
|
||||
|
||||
Viele sind versucht, in einem einzigen Prompt "eine vollständige Full-Stack-Anwendung" zu beschreiben. Tatsächlich sind die aktuellen Tools bereits leistungsstark genug, um möglicherweise auf einmal ein einigermaßen akzeptables Ergebnis zu liefern. Insgesamt ist es jedoch oft besser, die Arbeit in kleine Schritte zu unterteilen und phasenweise zu iterieren, um nicht in einer "nicht mehr änderbaren" Sackgasse zu landen.
|
||||
|
||||
> **Kleiner Tipp:** Anstatt "alles auf einmal" zu erwarten, lieber das große Ziel in ausführbare kleine To-dos aufteilen.
|
||||
> Zum Beispiel: Nicht direkt "build me a Snake game" sagen, sondern aufteilen in:
|
||||
> "1. Zunächst ein Snake-Spiel-Frontend erstellen",
|
||||
> "2. Dann ein Backend zur Punkteaufzeichnung implementieren",
|
||||
> "3. Schließlich Frontend und Backend verbinden".
|
||||
> So kann AI Ihre Anforderungen genauer verstehen und zuverlässigere Ergebnisse liefern.
|
||||
|
||||
## 2. Je klarer, desto besser
|
||||
|
||||
- In Vibe Coding sind Ihre geschriebenen Prompts genauso wichtig wie Ihr geschriebener Code. Je klarer und spezifischer der Prompt, desto näher ist das Ergebnis an dem, was Sie sich vorstellen.
|
||||
- Ziel und Einschränkungen von Anfang an klar formulieren, reduziert spätere Änderungen, was nicht nur Zeit spart, sondern auch Kontingent und Kosten.
|
||||
|
||||
---
|
||||
|
||||
# 3. Tool-Übersicht (Vibe Coding / UIUX Tools)
|
||||
|
||||
## 1. AI Agent Plattformen
|
||||
|
||||
| **Name** | **Plattform** |
|
||||
| --- | --- |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
|
||||
## 2. AI UIUX Plattformen
|
||||
|
||||
| **Name** | **Plattform** |
|
||||
| --- | --- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[Figma](https://www.figma.com/)** | Web-based, PC-Plugin |
|
||||
|
||||
---
|
||||
|
||||
# 4. Praxis-Tutorial (Vibe Coding + UI Kombination)
|
||||
|
||||
1. Geben Sie im Chat-Fenster der Vibe Coding Plattform Ihre Programmbeschreibung ein.
|
||||
Beispiel:
|
||||
|
||||
> Bitte erstellen Sie eine einfache Snake-Webanwendung mit Frontend und Backend.
|
||||
>
|
||||
> 1. Frontend
|
||||
>
|
||||
> - Seite 1: Spiel-Seite
|
||||
> - Tastatursteuerung der Schlangenbewegung.
|
||||
> - Die Schlange frisst keine Nahrung, sondern englische Wörter.
|
||||
> - Seitenleiste zeigt gesammelte Wörter und deren Anzahl.
|
||||
> - Nach Spielende bleiben gesammelte Wörter erhalten und werden im nächsten Spiel fortgesetzt.
|
||||
> - Seite 2: Gedicht-Seite (Make Poem)
|
||||
> - Dieselbe Wortliste wie auf der Spiel-Seite anzeigen (Datenkonsistenz).
|
||||
> - Einen Button zum Senden der aktuell gesammelten Wörter an das Backend zur Generierung eines Gedichts.
|
||||
> - Nach Gedichtgenerierung die verwendeten Wörter aus der Liste entfernen oder deren Zähler verringern.
|
||||
>
|
||||
> * Einfache Navigation zum Wechseln zwischen Game und Make Poem.
|
||||
> * Sicherstellen, dass gesammelte Wörter auf beiden Seiten sichtbar sind.
|
||||
>
|
||||
> 2. Backend
|
||||
>
|
||||
> - Backend-Schnittstelle bereitstellen, die gesammelte Wörter empfängt und ein Gedicht zurückgibt.
|
||||
> - DeepSeek API zur Gedichtgenerierung verwenden.
|
||||
> - API Key in `.env`-Datei speichern und in `.gitignore` ignorieren.
|
||||
|
||||
2. DeepSeek API Key eingeben. (Erhältlich unter [https://platform.deepseek.com/](https://platform.deepseek.com/))
|
||||
1. Der API Key des LLM wird verwendet, um große Modelle in Ihrem eigenen Projekt aufzurufen. Da es sich um sensible Informationen handelt, die nicht öffentlich sein dürfen, muss er separat in einer Konfigurationsdatei gespeichert werden.
|
||||
**Warum eine `.env`-Datei verwenden und sie nicht auf GitHub hochladen?**
|
||||
- Die `.env`-Datei dient speziell zur Speicherung von **Schlüsseln oder Passwörtern** (z.B. DeepSeek API Key).
|
||||
- Wenn diese Datei auf GitHub hochgeladen wird, kann jeder Ihren Schlüssel sehen und missbrauchen.
|
||||
- Aus Sicherheitsgründen müssen wir `.env` in der `.gitignore`-Datei deklarieren, damit Git sie nicht verfolgt.
|
||||
- So kann Ihr Projekt diese Schlüssel lokal weiterhin nutzen, ohne sie im Repository preiszugeben.
|
||||
|
||||
3. Nachdem das Ergebnis angezeigt wurde, können Sie bei Fehlern oder gewünschten Änderungen Ihre Änderungswünsche direkt im Chat-Fenster eingeben.
|
||||
4. Wenn Sie mit dem Seitendesign unzufrieden sind, können Sie das Interface auch in Figma oder Mastergo neu gestalten und die Designideen an den Agent zurückmelden.
|
||||
|
||||
- **Beispiel**
|
||||
|
||||
> Bitte entwerfen Sie eine **zweiseitige Web-Anwendung** namens _Word-Snake_.
|
||||
>
|
||||
> - **Game-Seite:**
|
||||
> - Schlange wird per Tastatur gesteuert.
|
||||
> - Die Schlange frisst englische Wörter statt normale Nahrung.
|
||||
> - Rechtes Panel zeigt gesammelte Wörter und deren Anzahl.
|
||||
> - Nach Spielende wird der Wortbestand nicht gelöscht, sondern im nächsten Spiel weiterverwendet.
|
||||
> - **Make Poem-Seite:**
|
||||
> - Denselben gemeinsamen Wortbestand anzeigen.
|
||||
> - Nutzer wählt einige Wörter aus und klickt auf **Generate Poem**-Button.
|
||||
> - Diese Wörter an das Backend senden, das DeepSeek API generiert ein Gedicht.
|
||||
> - Nach Gedichtgenerierung die verwendeten Wörter aus dem Bestand löschen oder verringern.
|
||||
> - **Navigation:** Einfacher Tab oder Top-Menü zum Wechseln zwischen den beiden Seiten.
|
||||
> - **Gemeinsamer Zustand:** Sicherstellen, dass gesammelte Wörter auf beiden Seiten stets synchron sichtbar sind.
|
||||
|
||||
- **Ergebnis-Beispiel**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. AI Agent Plattform-Vergleich (Wie man die beste Kombination für einfache Projekte wählt)
|
||||
|
||||
Verschiedene Vibe Coding Plattformen haben unterschiedliche Stärken und Workflows. Wir haben denselben "Snake-Spiel mit DeepSeek API"-Anforderungssatz auf mehreren Plattformen getestet und aus der Perspektive von Einsteigern bewertet. Hier ist die Zusammenfassung.
|
||||
|
||||
## 1. Vergleichskriterien
|
||||
|
||||
1. **Ziel**
|
||||
Ein Snake-Web-App mit DeepSeek API integrieren.
|
||||
2. **Spieldetails**
|
||||
1. Das Spiel generiert Gedichte über die DeepSeek LLM API.
|
||||
2. Die Schlange frisst englische Wörter; gesammelte Wörter bleiben nach Spielende erhalten und werden im nächsten Spiel weiterverwendet. Gleiche Wörter können mehrfach gesammelt und separat gezählt werden.
|
||||
3. Wenn ein Gedicht generiert wird, werden die verwendeten Wörter aus dem Bestand entfernt.
|
||||
|
||||
3. **Must-Haves**
|
||||
1. Eine lauffähige Frontend-Seite mit Snake-Spiel (Tastatursteuerung, Canvas-Rendering).
|
||||
2. Wort-Sammelmechanismus (Wörter erscheinen auf dem Brett, Schlange frisst sie, Seitenleiste-Liste wird aktualisiert).
|
||||
3. Persistenz des Wortbestands über mehrere Spielrunden.
|
||||
4. Backend mit DeepSeek API (ohne API Key zunächst ein Mock-Gedicht zurückgeben).
|
||||
5. "Gedicht generieren"-Button: Klick ruft Backend auf, zeigt Gedicht, aktualisiert Wortbestand basierend auf Nutzung.
|
||||
6. `.env`-Unterstützung für API Key und `.gitignore` zur Vermeidung von Schlüssellecks.
|
||||
|
||||
4. **Nice-to-Haves**
|
||||
1. Nutzer kann auswählen, welche Wörter für das Gedicht verwendet werden.
|
||||
2. Nutzerfreundliche Erfahrung (z.B. klare Wortliste in der Seitenleiste, gutes Layout im Gedicht-Bereich).
|
||||
3. Kommentare im Code für Einsteiger, die die Schlüssellogik erklären.
|
||||
|
||||
## 2. Codierungsergebnis-Vergleich
|
||||
|
||||
### 1. Lovable (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** Lovable macht Integration und Zusammenarbeit gut, automatisiert Initialisierungen wie die Verbindung mit Supabase-Datenbank und macht den Projektaufbau sehr reibungslos. Sie beschreiben einfach die Projektanforderungen, und der Agent verbindet alle Dienste und erstellt die Grundstruktur.
|
||||
- **Geeignete Nutzer:** Für Einsteiger, die zum ersten Mal Vibe Coding ausprobieren, ist Lovable eine sehr freundliche Wahl. Es vereinfacht die Komplexität der Mehrdienst-Verkettung und lässt Sie sich auf Prompts und Iterationen konzentrieren statt auf Umgebungskonfiguration. Dank hoher Automatisierung erhalten Sie schnell einen lauffähigen Prototyp.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:** Relativ teuer, aber mit einer Uni-E-Mail können Sie durch Studenten-Verifizierung den halben Preis erhalten.
|
||||
|
||||
|
||||
### 2. Cursor (IDE)
|
||||
|
||||
- **Plattform-Typ:** Desktop-Anwendung (PC)
|
||||
- **Haupteigenschaften und Workflow:** Cursor ist eine proprietäre IDE mit integrierten AI-Fähigkeiten, unterstützt Windows, macOS und Linux. Es baut Codegenerierung, intelligentes Umschreiben und Codebasis-Abfrage direkt in die Entwicklungsumgebung ein. Im Vergleich zu Web-Tools ist es näher an der traditionellen lokalen Entwicklungserfahrung. Da es eine lokale Umgebung ist, variieren die Konfigurationen verschiedener Computer, was gelegentlich zu umgebungsbezogenen Problemen führen kann. Der Vorteil: Das Projekt ist lokal, keine zusätzte Download- oder Laufzeitumgebung nötig, Cursor erledigt viele mühsame Schritte für Sie.
|
||||
- **Geeignete Nutzer:** Für Nutzer mit gewissen Programmierkenntnissen ist Cursor eine sehr leistungsstarke und vertraute Umgebung. Für absolute Einsteiger ohne Vorkenntnisse ist die Lernkurve jedoch steiler, da man selbst Projektstruktur, Abhängigkeitsmanagement und Dateiorganisation verstehen muss. Besser geeignet für Entwickler, die AI-Unterstützung in ihren traditionellen Codierungs-Workflow integrieren wollen.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:**
|
||||
|
||||
|
||||
### 3. Z.ai (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** Z.ai ist relativ direkt zu bedienen, aber eine offensichtliche Herausforderung ist: Sie müssen den generierten Code **manuell kopieren und einfügen**. Die Plattform selbst hat kein Echtzeit-Vorschaufenster, sodass man die Code-Ausführung nicht sofort sehen kann.
|
||||
- **Geeignete Nutzer:** Diese Plattform erfordert einen "hands-on" Ansatz. Fehlende Automatisierung bedeutet, dass Sie direkt mit dem Code arbeiten müssen, was für Leute, die AI-Outputs tief verstehen wollen, eine Art Training ist. Häufiges Kopieren und Einfügen bringt jedoch Effizienzprobleme und Fehler Risiken mit sich. Besser geeignet für Leute, die "rohe AI-Code-Outputs" sehen wollen, nicht für diejenigen, die ein One-Click-Erlebnis suchen.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:**
|
||||
|
||||
|
||||
### 4. Replit (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** Replit ist eine All-in-One Online-Entwicklungs- und Bereitstellungsumgebung. Im Browser können Sie Code schreiben, Programme ausführen und eine Online-Zugriffs-URL generieren. Vor dem Codieren zeigt es einen klaren Aktionsplan; außerdem gibt es einen visuellen Editor, in dem Sie direkt im Vorschaufenster die UI ändern können, und der Quellcode wird automatisch synchronisiert. So können Sie jederzeit überprüfen, ob die AI-Ausgabe Ihren Erwartungen entspricht, und die Anzahl der Hin- und Her-Korrekturen erheblich reduzieren.
|
||||
|
||||
|
||||
|
||||
- **Geeignete Nutzer:** Replit ist sehr einsteigerfreundlich. Es vereinfacht den vollständigen Kreislauf von der Codierung bis zur Bereitstellung, ohne zusätzte Server- oder Hosting-Konfiguration. Die Kollaborationsfunktion ist ebenfalls stark, ideal für Gruppenprojekte unter Kommilitonen oder Remote-Hilfe.
|
||||
- **Prompt-Prozess:** Während des Aufbaus verstand die AI die Anforderungen nicht sofort; es dauerte etwa 3 Iterationsrunden, bis das Ergebnis zufriedenstellend war.
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:**
|
||||
|
||||
|
||||
### 5. Minimax (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** Minimax benötigt bei der Aufgabenausführung oft länger. Der Prozess umfasst häufig: AI entdeckt und repariert automatisch Fehler, daher kann der gesamte Prozess langsam oder etwas mühsam sein. In diesem Projekt erstellt der Agent zunächst einen detaillierten Plan und baut dann Schritt für Schritt Backend, Datenbank und Frontend-Logik auf.
|
||||
- **Geeignete Nutzer:** Da es automatisch Tests ausführt und Fehler repariert, sind Zeit- und Token-Verbrauch hoch, aber man kann klar sehen, wie AI Probleme lokalisiert und löst, was aus Lernperspektive sehr wertvoll ist.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:** Die kostenlose Version kann bei komplexen Projekten wahrscheinlich nicht vollständig durchlaufen, daher wird ein kostenpflichtiges Upgrade empfohlen, um sicherzustellen, dass das Projekt vollständig erstellt werden kann.
|
||||
|
||||
|
||||
### 6. Trae (IDE)
|
||||
|
||||
- **Plattform-Typ:** Desktop-Anwendung (PC)
|
||||
- **Haupteigenschaften und Workflow:** Als Desktop-Anwendung hat Trae gegenüber Web-Tools normalerweise Vorteile bei Leistung und Reaktionsgeschwindigkeit. Es erfordert jedoch Download und Installation, was für einige Nutzer eine etwas höhere Einstiegshürde darstellt. Da es eine lokale Umgebung ist, bringen unterschiedliche Computerkonfigurationen und Abhängigkeitsumgebungen eine gewisse Unsicherheit mit sich. Der Vorteil: Trae hilft Ihnen, Projekterstellung und Laufzeitkonfiguration lokal abzuschließen; Sie können direkt auf Ihrem Rechner entwickeln und debuggen.
|
||||
- **Geeignete Nutzer:** Besser geeignet für Nutzer, die langfristig Vibe Coding-Projekte betreiben und ein spezielles Desktop-Tool verwenden möchten. Für Gelegenheitsnutzer ist es möglicherweise nicht die leichteste Wahl.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:** Preis relativ günstig, selbst die kostenlose Version reicht für qualitativ gute kleine Projekte.
|
||||
|
||||
|
||||
### 7. V0 (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** V0 ist ein Tool von Vercel, das sich auf die Generierung von React-UI-Komponenten konzentriert. Es zeichnet sich durch die Erzeugung hochwertiger, produktionsreifer Oberflächen aus. In der Praxis kann man jedoch auf Probleme stoßen wie "Code-Ansicht schwer zu finden" oder "keine klare Angabe, wo der API Key konfiguriert werden sollte".
|
||||
- **Geeignete Nutzer:** V0 ist sehr geeignet für Studierende oder Designer, die sich auf Frontend und UI/UX-Design konzentrieren. Es ist jedoch keine vollständige Full-Stack-Lösung; Sie benötigen weiterhin andere Plattformen für Backend-Logik und API-Integration. Wenn Ihr Ziel "ein komplettes Projekt in einem Durchgang" ist, ist es möglicherweise nicht die beste Erstwahl.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
|
||||
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
- **Preis:** Kostenlose Nutzer können etwa 4-5 einfache Projekte erstellen.
|
||||
|
||||
|
||||
## 3. Plattform-Gesamtvergleich
|
||||
|
||||
| **Plattform** | **Bewertung** | **Plattform** | **Anmerkungen** |
|
||||
| --- | --- | --- | --- |
|
||||
| **[Lovable](https://lovable.dev/)** | Sehr freundlich für AI-Programmier-Einsteiger, einfacher Einstieg, reibungslose Erfahrung, ideal als Erstwahl. | Web-based | Automatisiert Supabase- und andere Dienstverbindungen, reduziert Konfigurationsaufwand. |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | Geeignet für Nutzer mit Entwicklungserfahrung, steigert Produktivität und Code-Qualität erheblich. | PC | Erfordert gewisse Programmierkenntnisse, lokales Umfeld erfordert eigenes Verständnis von Projektstruktur und Abhängigkeiten. |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Besser geeignet für Nutzer mit Programmierkenntnissen, die AI-Code-Output-Details direkt untersuchen wollen. | Web-based | Kein Vorschaufenster, Ergebnisprüfung mühsam; Code manuell kopieren, Ordner und Dateien manuell erstellen und Service manuell starten. |
|
||||
| **[Replit](https://replit.com/~)** | Empfohlen für Nutzer, die Ideen schnell zu zugänglichen Online-Services machen wollen. | Web-based | All-in-One Online-Entwicklung und -Bereitstellung, unterstützt Kollaboration und bietet visuellen Editor. |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Geeignet für Leute, die den gesamten AI-Fehlererkennungs- und -Reparaturprozess sehen und daraus lernen wollen, aber insgesamt langsamer und token-intensiv. | Web-based | Längerer Gesamtprozess, AI führt mehrfach automatisch Tests aus und repariert Fehler. |
|
||||
| **[Trae](https://www.trae.ai/)** | Für Nutzer mit Programmiererfahrung, die Desktop-IDE + AI Agent kombinieren wollen, ein leistungsstarkes Effizienz-Tool. | PC | Lokale Installation und Umgebungskonfiguration erforderlich, aber bessere Leistung, geeignet für langfristige Vibe Coding-Projekte. |
|
||||
| **[V0](https://v0.app/)** | Optimiert für Nicht-Entwickler, die schnell React-UI erstellen wollen, geeignet für Frontend-/Design-orientierte Studierende. | Web-based | Fokussiert auf React-UI-Generierung, muss mit anderen Plattformen für Backend und vollständigen App-Aufbau kombiniert werden. |
|
||||
---
|
||||
title: 'Vergleich von 7 KI-Programmiertools'
|
||||
description: 'Praxisnaher Vergleich von Web-Vibe-Coding-Plattformen mit einer einheitlichen Aufgabe: Bedienbarkeit, Code-Kontrolle und Deployment.'
|
||||
---
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
# Website mit Design- und Programmier-Agent entwerfen
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
Dieses Kapitel zeigt, wie Design und Entwicklung durch AI perfekt zusammenarbeiten. Sie spielen die Rolle des Produktmanagers, leiten den "Design-Agent" bei der Erstellung von Logo-Design, Farbschema und Seitenlayout an und koordinieren dann den "Programmier-Agent" bei der Umsetzung der visuellen Entwürfe in lauffähigen Code. Von der Ideenfindung bis zum Website-Launch erleben Sie den vollständigen AI-gestützten Entwicklungsprozess und werden zu einem Ein-Personen-Team.
|
||||
|
||||
---
|
||||
|
||||
# 1. Erste Schritte
|
||||
|
||||
## 1. Tutorial-Einführung
|
||||
|
||||
Lassen Sie uns AI Design Agent und Coding Agent verwenden, um eine vollständige Website von Grund auf zu erstellen.
|
||||
|
||||
- **Design-Agent**: Verantwortlich für die Erstellung von Logo, Seitenlayout, Farbschema und anderen visuellen Elementen
|
||||
- **Coding-Agent**: Schreibt tatsächlichen Code (HTML/CSS/JS etc.) basierend auf Ihren Anforderungen an Funktionen und Layout und erstellt eine lauffähige Website
|
||||
|
||||
## 2. Design-Agent und Coding-Agent
|
||||
|
||||
- **Design-Agent**: AI, die basierend auf Ihren Prompts Bilder, Seitenmodelle oder Designstile generiert.
|
||||
- Mastergo
|
||||
- Lovart
|
||||
- Figma MCP
|
||||
- **Coding-Agent**: AI, die basierend auf Ihren Funktions- und Layoutanforderungen tatsächlichen Code (HTML/CSS/JS etc.) schreibt.
|
||||
- Z.AI
|
||||
- Trae
|
||||
- Cursor
|
||||
- Lovable
|
||||
|
||||
---
|
||||
|
||||
# 2. Logo mit Design-Agent erstellen
|
||||
|
||||
## 1. Wichtige Aspekte beim Logo-Design
|
||||
|
||||
Das Logo ist eines der Schlüsselelemente, die den ersten Eindruck Ihrer Website bestimmen. Um vom AI Design-Agent zufriedenstellende Ergebnisse zu erhalten, müssen Sie in Ihrem Prompt klar beschreiben, welche Art von Logo Sie möchten.
|
||||
|
||||
1. **Markenname / Text**
|
||||
|
||||
- Text, der im Logo erscheinen muss (z.B.: Website-Titel, Markenname).
|
||||
|
||||
2. **Stil (Stimmung / Atmosphäre)**
|
||||
|
||||
- Das Gesamtgefühl oder die Atmosphäre, die das Logo vermitteln soll.
|
||||
- _Beispiele: Minimalistisch, niedlich, schlicht, modern, Retro, futuristisch etc._
|
||||
|
||||
3. **Farbschema** (optional)
|
||||
|
||||
- Am besten die Logo-Farben mit dem Gesamtton der Website abstimmen.
|
||||
- Spezifische Hex-Codes oder grobe Farbtöne (kalt, warm etc.) angeben.
|
||||
- _Beispiele: **`#171721`** (Schwarz), **`#FF7130`** (Orange)._
|
||||
|
||||
4. **Form (Gestalt / Struktur)**
|
||||
|
||||
- Klären, ob das Logo eine bestimmte Form oder Komposition benötigt.
|
||||
- _Beispiele: Text innerhalb eines Kreises, Icon + Text-Kombination, Icon-dominiertes Logo etc._
|
||||
|
||||
5. **Icon / Symbol-Elemente** (optional)
|
||||
|
||||
- Grafiken oder Symbole, die im Logo erscheinen sollen.
|
||||
- _Beispiele: Bücher-Icon, Blitz-Symbol, AI-bezogene Grafik, abstrakte geometrische Formen etc._
|
||||
|
||||
## 2. Logo-Design-Prompt schreiben
|
||||
|
||||
**Beispiel-Prompt**
|
||||
|
||||
```
|
||||
"Bitte entwerfe ein minimalistisches Logo mit dem Markennamen 'My First Website'.
|
||||
Verwende Schwarz (#171721) und Orange (#FF7130) und platziere den Text innerhalb eines Kreises."
|
||||
```
|
||||
|
||||
```
|
||||
"Bitte entwerfe ein Logo mit dem Markennamen 'AIID'.
|
||||
Der Gesamtstil soll futuristisch, sauber und schlicht sein, Hauptfarben Blau und Weiß.
|
||||
Kombiniere ein abstraktes AI-Symbol mit dem Text und exportiere als PNG mit transparentem Hintergrund."
|
||||
```
|
||||
|
||||
## 3. Design beim Agent anfordern
|
||||
|
||||
- Obigen Prompt eingeben → Mehrere Designentwürfe des Agents vergleichen.
|
||||
|
||||
|
||||
|
||||
## 4. Endgültiges Logo bestimmen
|
||||
|
||||
- Die bevorzugte Version aus den Entwürfen auswählen und herunterladen.
|
||||
|
||||
---
|
||||
|
||||
# 3. Website-Struktur planen
|
||||
|
||||
## 1. Grundlegende Bereiche verstehen
|
||||
|
||||
Bevor Sie mit der Website-Erstellung beginnen, ist es wichtig zu planen, welche Menüs (Bereiche) Sie einfügen wollen. Das Menü-Design hängt davon ab, was Sie den Besuchern zeigen möchten und welche Aktionen Sie von ihnen erwarten.
|
||||
Generell besteht eine Website aus Grundbereichen wie **Home / About / Contact**.
|
||||
|
||||
## 2. Selbst eine Struktur-Skizze zeichnen (optional)
|
||||
|
||||
Sie können zunächst basierend auf dem Website-Ziel eine einfache Menüstruktur entwerfen.
|
||||
|
||||
### Grundmenü
|
||||
|
||||
1. **Home**
|
||||
1. Die Hauptseite, die Besucher nach dem Betreten der Website zuerst sehen
|
||||
2. Enthält normalerweise Logo, Hero-Bereich und einen kurzen Slogan oder eine Einleitung
|
||||
2. **About**
|
||||
1. Vorstellung, wer Sie sind oder Zweck des Projekts / Service
|
||||
2. Persönliches Portfolio: Selbstvorstellung + kurzer Lebenslauf
|
||||
3. Service-Website: Vision, Ziele und Kernfunktionen
|
||||
3. **Contact**
|
||||
1. Kontaktinformationen wie E-Mail, Telefonnummer, Social-Media-Links etc.
|
||||
2. Auch ein einfaches Kontaktformular möglich
|
||||
|
||||
### Optionale Menüs
|
||||
|
||||
4. **Services / Projects**
|
||||
1. Präsentation Ihrer Dienstleistungen oder Projekte / Portfolio
|
||||
2. Normalerweise als Liste oder Karten dargestellt
|
||||
|
||||
5. **Gallery**
|
||||
1. Zur Anzeige von Bildern, Fotos oder Designarbeiten
|
||||
|
||||
6. **Blog / News**
|
||||
1. Für Artikel, Updates oder Logs
|
||||
|
||||
7. **FAQ**
|
||||
1. Häufig gestellte Fragen und Antworten kompakt zusammengefasst
|
||||
|
||||
## 3. Farbschema wählen (optional)
|
||||
|
||||
Wenn Sie bereits ein Logo haben oder bestimmte Farben für das Website-Design verwenden möchten, können Sie die Farbcodes direkt im Prompt angeben.
|
||||
|
||||
**Beispiel:** `#171721, #872B97, #FF7130, #FF3C68`
|
||||
|
||||
Auch ohne eigenes Farbschema können Sie über Farb-Websites oder Suchbegriffe Inspiration finden.
|
||||
|
||||
- **Farbreferenz-Websites**
|
||||
- https://colorhunt.co/
|
||||
- https://coolors.co/
|
||||
|
||||
|
||||
|
||||
- **Farbsuche über Google-Schlüsselwörter**
|
||||
|
||||
|
||||
|
||||
## 4. Website-Design-Prompt schreiben
|
||||
|
||||
**Beispiel-Prompt**
|
||||
|
||||
```
|
||||
"Bitte entwerfe eine One-Page-Website mit den Bereichen Home, About und Contact.
|
||||
Verwende die Farben #171721, #FF7130 und #FF3C68.
|
||||
Der Gesamtstil soll modern und schlicht sein."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. Website mit Design-Agent entwerfen
|
||||
|
||||
## 1. Prompt eingeben → Designentwürfe generieren
|
||||
|
||||
- Die geplante Struktur und das gewählte Farbschema im Prompt angeben.
|
||||
|
||||
**Mastergo Prompt-Beispiel**
|
||||
|
||||
|
||||
|
||||
## 2. Designentwürfe prüfen und Änderungswünsche stellen
|
||||
|
||||
Sie können dem Agent Feedback geben, z.B.:
|
||||
|
||||
- "Zu verspielt, den Gesamtstil schlichter machen."
|
||||
- "Eine andere Schriftart verwenden."
|
||||
- "Farbkombination anpassen."
|
||||
- "Diesen Bereich entfernen."
|
||||
|
||||
|
||||
|
||||
## 3. Endgültiges Design bestimmen
|
||||
|
||||
Wenn Sie den Designentwurf nach mehreren Änderungsrunden zufrieden sind, können Sie das Design in Code umwandeln, den der Coding-Agent verstehen und weiterverarbeiten kann.
|
||||
|
||||
Die Methode zur Umwandlung von Design in Code variiert je nach Plattform, erfolgt aber normalerweise über die Installation und Nutzung bestimmter Plugins innerhalb der Design-Plattform.
|
||||
|
||||
**Mastergo-Beispiel**
|
||||
|
||||
1. [Mastergo Plugin-Website](https://mastergo.com/community/plugin) öffnen und nach **seal** suchen.
|
||||
|
||||
|
||||
|
||||
2. Zurück zur Design-Seite, auf das **Quadrat-Icon (Plugins)** klicken.
|
||||
|
||||
|
||||
|
||||
3. Den Design-Bereich, den Sie in Code umwandeln möchten, auswählen und auf **Generate** klicken, um den Code zu generieren.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Website mit Coding-Agent erstellen
|
||||
|
||||
## 1. Grundkonzepte von HTML/CSS/JS verstehen
|
||||
|
||||
Eine Website besteht im Wesentlichen aus drei Sprachen:
|
||||
|
||||
- **HTML (HyperText Markup Language)** → Struktur (Skelett)
|
||||
- **CSS (Cascading Style Sheets)** → Stil (Erscheinungsbild)
|
||||
- **JavaScript (JS)** → Funktionalität (Interaktion)
|
||||
|
||||
Diese drei arbeiten zusammen und bilden die komplette Webseite, die wir sehen.
|
||||
|
||||
1. **HTML (Struktur)**
|
||||
|
||||
- Definiert, "was auf der Seite angezeigt wird"
|
||||
- Platzierung von Text, Bildern, Buttons, Links etc.
|
||||
- Vergleichbar mit **Wänden und Rahmen** eines Gebäudes
|
||||
|
||||
**Beispiel**
|
||||
|
||||
```html
|
||||
<h1>Hallo!</h1>
|
||||
<p>Das ist meine erste Website.</p>
|
||||
<a href="contact.html">Kontakt</a>
|
||||
```
|
||||
|
||||
2. **CSS (Stil)**
|
||||
|
||||
- Bestimmt, "wie der Inhalt angezeigt wird"
|
||||
- Steuert Schriftgröße, Farbe, Abstände, Hintergrund, Button-Form etc.
|
||||
- Gibt dem HTML "Kleidung" und visuellen Stil
|
||||
|
||||
**Beispiel**
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: #FF7130; /* Textfarbe */
|
||||
font-size: 36px; /* Schriftgröße */
|
||||
text-align: center; /* Zentrierte Ausrichtung */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #171721; /* Hintergrundfarbe */
|
||||
color: white; /* Standard-Textfarbe */
|
||||
}
|
||||
```
|
||||
|
||||
3. **JavaScript (JS) (Funktionalität)**
|
||||
|
||||
- Ermöglicht der Webseite, mit Nutzern zu interagieren
|
||||
- Kann Button-Klicks, Menü-Aufklappen, Bilderkarussells, Formular-Übermittlung etc. umsetzen
|
||||
- Wenn HTML/CSS das statische Skelett und Aussehen sind, dann ist JS das **Gehirn**, das die Webseite "lebendig" macht
|
||||
|
||||
**Beispiel**
|
||||
|
||||
```javascript
|
||||
function showAlert() {
|
||||
alert("Der Button wurde geklickt!");
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<button onclick="showAlert()">Klick mich</button>
|
||||
```
|
||||
|
||||
## 2. Coding-Agent Code generieren lassen
|
||||
|
||||
**Beispiel-Prompt**
|
||||
|
||||
```
|
||||
"Bitte schreibe HTML und CSS für eine One-Page-Website mit Home-, About- und Contact-Bereichen.
|
||||
Verwende die Farben #171721, #FF7130, #FF3C68.
|
||||
Schwarzer Hintergrund, weißer Text."
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3. Website starten
|
||||
|
||||
Nachdem der Entwurfscode generiert wurde, startet der Agent normalerweise automatisch das Projekt und zeigt die generierte Website-Seite an.
|
||||
|
||||
Wenn Sie den Agent neu gestartet haben oder die Website-Anzeige nicht erscheint, können Sie einen Prompt wie diesen eingeben:
|
||||
|
||||
```
|
||||
"Please activate the project"
|
||||
```
|
||||
|
||||
Damit lässt der Agent das Projekt neu starten und öffnet die Vorschauseite, damit Sie den aktuellen Stand sehen können.
|
||||
|
||||
## 4. Einfache Änderungen vornehmen
|
||||
|
||||
Sie können den Entwurf weiterhin über natürliche Sprache feinjustieren, z.B.:
|
||||
|
||||
- "Den Button größer machen."
|
||||
- "Schriftstärke erhöhen."
|
||||
|
||||
|
||||
|
||||
## 5. Website-Textinhalte ändern
|
||||
|
||||
Die vom Agent generierte Erstversion enthält meist automatisch generierten Platzhaltertext. Um sie näher an Ihrem realen Szenario zu bringen, können Sie den tatsächlichen Inhalt vorbereiten und den Agent ihn ersetzen lassen.
|
||||
|
||||
**Anwendungsbeispiel**: About-Seite der AIID-Website aktualisieren
|
||||
|
||||
1. Zunächst den Inhalt, den Sie auf der About-Seite zeigen möchten, aufschreiben. Für besseres Agent-Verständnis kann der Inhalt im Markdown-Format gespeichert werden.
|
||||
|
||||
|
||||
|
||||
2. Dann im Dialog dem Agent mitteilen, den Inhalt der Datei auf der angegebenen Seite anzuwenden.
|
||||
|
||||
|
||||
|
||||
3. Die aktualisierte Version nach der Inhaltsanwendung ansehen.
|
||||
|
||||
|
||||
|
||||
## 6. Bilder einfügen
|
||||
|
||||
Wenn Sie bestimmte Bilder einfügen möchten (z.B. Logo, Hintergrundbild), können Sie diese zunächst in den Projektordner hochladen und im Prompt angeben, an welcher Stelle der Seite diese Bilder verwendet werden sollen.
|
||||
|
||||
- **Beispiel:**
|
||||
|
||||
|
||||
|
||||
- **Ergebnis:**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 6. Design und Code integrieren
|
||||
|
||||
## 1. Design-Dateien mit Website-Code integrieren (optional)
|
||||
|
||||
Wenn Sie vom Design-Agent Codedateien heruntergeladen haben, können Sie diese in das aktuelle Projektverzeichnis verschieben und den Coding-Agent bitten, diesen Design-Code mit dem bestehenden Projekt zu mergen.
|
||||
|
||||
- **Beispiel:**
|
||||
|
||||
|
||||
|
||||
- **Ergebnis:**
|
||||
|
||||
|
||||
---
|
||||
title: 'Eine Website mit Design- und Coding-Agents bauen'
|
||||
description: 'Von Idee bis Launch: Design-Agent fuer Visuals, Coding-Agent fuer Umsetzung. Ein wiederverwendbarer Workflow fuer Solo-Entwicklung.'
|
||||
---
|
||||
@@ -0,0 +1,325 @@
|
||||
---
|
||||
title: 'Was tun bei Fehlern im Code - Praxisleitfaden: Screenshots an die KI senden'
|
||||
description: 'Lernen Sie, wie Sie der KI effizient Fragen stellen, um verschiedene Fehler bei der Entwicklung zu lösen. Beherrschen Sie den Standardprozess aus Screenshot, Beschreibung und Problemeingrenzung und machen Sie die KI zu Ihrem Debugging-Assistenten.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>30 Minuten</strong>'
|
||||
</script>
|
||||
|
||||
# Was tun bei Fehlern im Code
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Debugging-Tipps', 'KI-Zusammenarbeit', 'Problemeingrenzung', 'Entwicklertools']" coreOutput="Ein standardisierter Fehlerbehebungsprozess" expectedOutput="90 % der häufigen Fehler selbstständig beheben können">
|
||||
|
||||
In der KI-Ära hat sich die Art und Weise, wie man Fehler behebt, verändert.
|
||||
|
||||
Sie müssen nicht alle Fehlertypen auswendig kennen, kein Debugging-Experte sein und nicht einmal verstehen, was der Fehler bedeutet.
|
||||
|
||||
<strong>Sie müssen nur eines lernen: wie man die KI richtig fragt.</strong>
|
||||
|
||||
Dieses Kapitel vermittelt Ihnen einen <strong>von einfach bis fortgeschritten</strong> strukturierten Behebungsprozess:
|
||||
|
||||
1. <strong>Schritt 1: Direkt fragen</strong>: Phänomen beschreiben + Screenshot, mit einem Satz fragen
|
||||
2. <strong>Schritt 2: Informationen ergänzen</strong>: Wenn das Problem nicht gelöst werden kann, F12 öffnen und wichtige Informationen nachreichen
|
||||
|
||||
Mit diesem Prozess können Sie <strong>90 % der Fehler selbst beheben</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Hinweis
|
||||
Alle Methoden in diesem Kapitel basieren auf praktischer Erfahrung mit KI-IDEs wie Cursor/Trae/Claude und lassen sich direkt in der täglichen Entwicklung anwenden.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Direkt fragen', description: 'Phänomen beschreiben + Screenshot' },
|
||||
{ title: 'Info ergänzen', description: 'F12 öffnen, Problem eingrenzen' },
|
||||
{ title: 'Iterativ lösen', description: 'Bis das Problem gelöst ist' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Kernprinzip: Screenshot an die KI senden
|
||||
|
||||
::: warning Warum ist dieses Kapitel so wichtig?
|
||||
|
||||
Viele Anfänger reagieren auf Fehlermeldungen wie folgt:
|
||||
- In Panik geraten und blind Code ändern
|
||||
- Eine halbe Stunde nach "Wie löse ich den Fehler xxx" suchen
|
||||
- Versuchen, selbst zu verstehen, was der Fehler bedeutet
|
||||
- Sich bis nachts um drei allein durchs Debugging quälen
|
||||
|
||||
<strong>Das ist alles verschwendete Zeit.</strong>
|
||||
|
||||
In der KI-Ära ist Debugging etwas sehr Einfaches geworden:
|
||||
|
||||
```
|
||||
Fehlermeldung sehen → Screenshot machen → KI fragen → Den Anweisungen der KI folgen
|
||||
```
|
||||
|
||||
Sie müssen den Fehler nicht verstehen, nicht debuggen können und nicht einmal wissen, wo das Problem liegt.
|
||||
|
||||
<strong>Sie müssen nur lernen, wie man fragt.</strong>
|
||||
|
||||
:::
|
||||
|
||||
### 1.1 Die einfachste Fragestellung
|
||||
|
||||
Keine komplizierten Vorlagen nötig -- zwei Methoden zur Auswahl:
|
||||
|
||||
**Methode 1: Phänomen beschreiben**
|
||||
|
||||
Format: Was Sie gerade getan haben, was jetzt aufgetreten ist
|
||||
|
||||
```
|
||||
Ich habe gerade den Code der Login-Seite geändert, jetzt ist die Seite weiß. Was soll ich tun?
|
||||
```
|
||||
|
||||
**Methode 2: Screenshot**
|
||||
|
||||
Einfach einen Screenshot der aktuellen Seite oder Fehlermeldung machen
|
||||
|
||||
```
|
||||
[Screenshot]
|
||||
|
||||
Wie löse ich diesen Fehler?
|
||||
```
|
||||
|
||||
**Die beste Methode: Beschreibung + Screenshot**
|
||||
|
||||
```
|
||||
Ich habe gerade den Code der Login-Seite geändert, jetzt ist die Seite weiß.
|
||||
|
||||
[Screenshot]
|
||||
|
||||
Was soll ich tun?
|
||||
```
|
||||
|
||||
**Merken: Beschreiben Sie den Kontext klar und fügen Sie einen Screenshot hinzu -- so kann die KI das Problem schneller lösen.**
|
||||
|
||||
### 1.2 Wie man das Problem klar beschreibt
|
||||
|
||||
Viele Anfänger wissen, dass sie fragen sollen, aber nicht, wie. Dabei genügt es, drei Dinge klar zu machen:
|
||||
|
||||
**1. Was Sie gerade getan haben**
|
||||
|
||||
```
|
||||
Ich habe gerade auf Speichern geklickt
|
||||
Ich habe gerade den Code der Login-Seite geändert
|
||||
Ich habe gerade die Seite aktualisiert
|
||||
```
|
||||
|
||||
**2. Was Sie jetzt sehen**
|
||||
|
||||
```
|
||||
Die Seite ist jetzt leer
|
||||
Der Button reagiert nicht auf Klicks
|
||||
Jetzt wird eine Fehlermeldung angezeigt
|
||||
```
|
||||
|
||||
**3. Welches Ergebnis Sie erzielen möchten**
|
||||
|
||||
```
|
||||
Ich möchte, dass die Daten erfolgreich gespeichert werden
|
||||
Ich möchte, dass die Seite normal angezeigt wird
|
||||
Ich möchte, dass nach dem Klick auf den Button eine Meldung erscheint
|
||||
```
|
||||
|
||||
**Vollständiges Beispiel:**
|
||||
|
||||
```
|
||||
Ich habe gerade auf Speichern geklickt, jetzt zeigt die Seite den Fehler "Speichern fehlgeschlagen".
|
||||
|
||||
[Screenshot]
|
||||
|
||||
Ich möchte, dass die Formulardaten erfolgreich in der Datenbank gespeichert werden. Was soll ich tun?
|
||||
```
|
||||
|
||||
**Wichtige Prinzipien:**
|
||||
- In einfachen Worten beschreiben, keine Fachbegriffe verwenden
|
||||
- Chronologisch vorgehen: Was zuerst getan wurde, was dann passiert ist
|
||||
- Die eigenen Erwartungen aussprechen, damit die KI weiß, was Sie wollen
|
||||
|
||||
## 2. Erster Schritt: Direkt das Phänomen beschreiben und fragen
|
||||
|
||||
Wenn Sie auf ein Problem stoßen, <strong>öffnen Sie noch nicht sofort F12</strong>. Beschreiben Sie zuerst das Phänomen, machen Sie einen Screenshot der aktuellen Seite und geben Sie es der KI.
|
||||
|
||||
Oft kann die KI anhand des Screenshots direkt eine Lösung vorschlagen.
|
||||
|
||||
### 2.1 Häufige Phänomene beschreiben
|
||||
|
||||
::: tip Einfach beschreiben
|
||||
|
||||
**Seite ist weiß**
|
||||
```
|
||||
Die Seite öffnet sich und ist leer. Was soll ich tun?
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
**Button reagiert nicht auf Klicks**
|
||||
```
|
||||
Dieser Button reagiert nicht. Bitte prüfen.
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
**Daten lassen sich nicht speichern**
|
||||
```
|
||||
Ich habe auf Speichern geklickt, aber die Daten wurden nicht gespeichert. Was soll ich tun?
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
**Styling stimmt nicht**
|
||||
```
|
||||
Dieser Button ist verschoben. Wie kann ich das anpassen?
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
**API-Fehler**
|
||||
```
|
||||
Beim Aufruf der Schnittstelle ist ein Fehler aufgetreten. Bitte prüfen.
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 Wenn die KI das Problem direkt löst
|
||||
|
||||
Herzlichen Glückwunsch, das Problem ist gelöst! Folgen Sie einfach den Anweisungen der KI.
|
||||
|
||||
### 2.3 Wenn die KI "weitere Informationen benötigt"
|
||||
|
||||
Jetzt müssen Sie F12 öffnen und wichtige Informationen nachreichen. Weiter unten.
|
||||
|
||||
## 3. Zweiter Schritt: Wichtige Informationen ergänzen
|
||||
|
||||
Wenn die KI weitere Informationen benötigt, öffnen Sie je nach Problemtyp F12 und ergänzen Sie die entsprechenden Inhalte.
|
||||
|
||||
### 3.1 Wann Informationen ergänzt werden müssen
|
||||
|
||||
Die KI könnte wie folgt antworten:
|
||||
- "Bitte öffnen Sie die Console und prüfen Sie, ob Fehler vorliegen"
|
||||
- "Machen Sie einen Screenshot des Network-Panels"
|
||||
- "Ich benötige die genaue Fehlermeldung"
|
||||
|
||||
In diesem Fall ergänzen Sie die Screenshots anhand der folgenden Anleitung.
|
||||
|
||||
### 3.2 Console-Informationen ergänzen (weiße Seite / Fehler)
|
||||
|
||||
::: tip Arbeitsschritte
|
||||
|
||||
**Schritt 1: F12 drücken, um die Entwicklertools zu öffnen**
|
||||
|
||||
Auf dem Mac: `Cmd+Option+I`, oder Rechtsklick auf die Seite und "Untersuchen" wählen.
|
||||
|
||||
**Schritt 2: Zum Tab Console wechseln**
|
||||
|
||||
**Schritt 3: Screenshot der roten Fehlermeldungen machen**
|
||||
|
||||
**Schritt 4: An die KI senden**
|
||||
|
||||
```
|
||||
Die Console zeigt folgende Fehler:
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.3 Network-Informationen ergänzen (Datenprobleme / API-Fehler)
|
||||
|
||||
::: tip Arbeitsschritte
|
||||
|
||||
**Schritt 1: F12 drücken, um die Entwicklertools zu öffnen**
|
||||
|
||||
**Schritt 2: Zum Tab Network wechseln**
|
||||
|
||||
**Schritt 3: Die Aktion erneut ausführen** (auf Speichern klicken / Seite aktualisieren)
|
||||
|
||||
**Schritt 4: Die entsprechende Anfrage finden und einen Screenshot machen**
|
||||
|
||||
- URL und Statuscode prüfen
|
||||
- Payload (gesendete Parameter) prüfen
|
||||
- Response (Rückgabeergebnis) prüfen
|
||||
|
||||
**Schritt 5: An die KI senden**
|
||||
|
||||
```
|
||||
Network-Informationen wie folgt:
|
||||
|
||||
Anfrage: [Screenshot 1]
|
||||
Parameter: [Screenshot 2]
|
||||
Antwort: [Screenshot 3]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.4 Elements-Informationen ergänzen (Styling-Probleme)
|
||||
|
||||
::: tip Arbeitsschritte
|
||||
|
||||
**Schritt 1: Rechtsklick auf das Element → "Untersuchen"**
|
||||
|
||||
Die Entwicklertools positionieren sich automatisch auf diesem Element.
|
||||
|
||||
**Schritt 2: Screenshot des Styles-Panels machen**
|
||||
|
||||
**Schritt 3: An die KI senden**
|
||||
|
||||
```
|
||||
Element-Styling wie folgt:
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 4. Dritter Schritt: Iterativ bis zur Lösung
|
||||
|
||||
### 4.1 Ineffiziente Vorgehensweisen
|
||||
|
||||
Diese Vorgehensweisen verschwenden Ihre Zeit:
|
||||
|
||||
Bei einer Fehlermeldung in Panik geraten und blind Code ändern
|
||||
Eine halbe Stunde nach Lösungen suchen
|
||||
Versuchen, selbst die Bedeutung jedes Fehlers zu verstehen
|
||||
Sich allein bis nachts um drei durchs Debugging quälen
|
||||
|
||||
### 4.2 Effiziente Vorgehensweise
|
||||
|
||||
Gehen Sie nach diesem Prozess vor:
|
||||
|
||||
Zunächst das Phänomen beschreiben und mit Screenshot fragen
|
||||
Wenn die KI weitere Informationen benötigt, F12 öffnen und ergänzen
|
||||
Den Empfehlungen entsprechend den Code ändern
|
||||
Nach der Änderung testen; falls das Problem weiterhin besteht, weiter mit Screenshot fragen
|
||||
|
||||
## 5. Zusammenfassung: Vollständiger Prozess
|
||||
|
||||
```
|
||||
Problem aufgetreten
|
||||
↓
|
||||
Phänomen direkt beschreiben + Screenshot
|
||||
↓
|
||||
An die KI senden: "Was soll ich tun?"
|
||||
↓
|
||||
Hat die KI das Problem direkt gelöst?
|
||||
↓ Ja
|
||||
Den Anweisungen der KI folgen
|
||||
↓
|
||||
Testen, ob das Problem gelöst ist
|
||||
↓
|
||||
↓ Nein / KI benötigt weitere Informationen
|
||||
F12 öffnen, wichtige Informationen ergänzen
|
||||
↓
|
||||
Erneut an die KI senden
|
||||
↓
|
||||
Wiederholen, bis das Problem gelöst ist
|
||||
```
|
||||
@@ -0,0 +1,642 @@
|
||||
---
|
||||
title: 'C-End Konsumszenarien - Inspirationsreferenz'
|
||||
description: 'Dieses Dokument fasst kreative Anwendungsrichtungen von LLM in C-End-Konsumszenarien zusammen, inklusive Inspirationszenarien aus Lebensstil, emotionaler Begleitung, Unterhaltung, persoenlichem Wachstum und sozialer Interaktion als Referenz fuer Entwickler von AI-Anwendungen fuer Endverbraucher.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'ca. <strong>4 Stunden</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// Themenpool pro Szenario: Fokus auf Gefuehl, Atmosphaere und psychologische Suggestion
|
||||
const topicPool = {
|
||||
'lifestyle': [
|
||||
{ title: 'Morgenritual-Aktivierer', desc: 'Erstellt persoenliche Morgenrituale basierend auf Wetter, Terminen und Stimmung' },
|
||||
{ title: 'Wohlfuehl-Atmosphaere fuer Single-Haushalte', desc: 'Gestaltet Wohlfuehl-Ambiente mit Licht, Musik und Duft-Kombinationen' },
|
||||
{ title: 'Wochenend-Wellness-Plan-Generator', desc: 'Empfiehlt die perfekte Couch-Kombination: Film + Snacks + Ambiente' },
|
||||
{ title: 'Einschlaf-Geschichten-Radio', desc: 'Sanfte Geschichten und Meditationsfuehrungen als persoenlicher Begleiter zum Einschlafen' },
|
||||
{ title: 'Alltagsaesthetik-Inspiration', desc: 'Entdeckt Schoenheit im Alltag und generiert Aesthetik-Tipps und Ritualfuehrer' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'Nachtlicher Zuhoerer', desc: '24/7 verfuegbarer emotionaler Zuhoerer ohne Wertung' },
|
||||
{ title: 'Trennungs-Begleiter', desc: 'Sanfte Begleitung, Heilungsraete und emotionale Entlastung nach einer Trennung' },
|
||||
{ title: 'Angstbewaeltigungs-Atemtrainer', desc: 'Erkennt Angst und fuehrt Atemuebungen und Achtsamkeitsmeditation an' },
|
||||
{ title: 'Selbstvertrauens-Aufbauer', desc: 'Hilft durch positive Dialoge und psychologische Suggestion beim Wiederaufbau von Selbstwert' },
|
||||
{ title: 'Emotionales Tagebuch-Analyst', desc: 'Analysiert Emotionstagebuecher, erkennt Muster und gibt warme Einblicke' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'Immersives Murder-Mystery DM', desc: 'Spielt den Spielleiter, erzeugt Spannung und treibt die Handlung voran' },
|
||||
{ title: 'Open-World-Seelen-NPC', desc: 'NPCs mit Persoenlichkeit, die sich an Spielergeschichten erinnern' },
|
||||
{ title: 'Personalisierter Podcast-Generator', desc: 'Erstellt eigene Podcasts basierend auf Interessen, natuerlich wie ein Gespraech' },
|
||||
{ title: 'Virtuelles Konzert-Ambiente', desc: 'Erzeugt Live-Gefuehl bei Online-Konzerten mit Echtzeit-Interaktion' },
|
||||
{ title: 'Interaktiver Roman-Mitschreiber', desc: 'Erstellt gemeinsam Geschichten, jede Wahl beeinflusst die Handlung' }
|
||||
],
|
||||
'growth': [
|
||||
{ title: 'Persoenlicher Wachstums-Begleiter', desc: 'Dokumentiert Entwicklung, ermutigt und blickt auf wichtige Meilensteine zurueck' },
|
||||
{ title: 'Gamifizierter Gewohnheits-Coach', desc: 'Verwandelt oede Gewohnheitsbildung in ein spannendes Abenteuerspiel' },
|
||||
{ title: 'Lernpartner-Vermittlung', desc: 'Findet gleichgesinnte Lernpartner fuer gegenseitige Motivation' },
|
||||
{ title: 'Taegliche Kleinodes-Entdecker', desc: 'Hilft, kleine Schoenheiten im Alltag zu finden und Dankbarkeit zu kultivieren' },
|
||||
{ title: 'Lebenssimulator', desc: 'Simuliert verschiedene Lebensentscheidungen und erlebt alternative Wege' }
|
||||
],
|
||||
'social': [
|
||||
{ title: 'Eisbrecher-Thema-Generator', desc: 'Bietet interessante Themen fuer soziale Anlaesse zum Aufbrechen' },
|
||||
{ title: 'Social-Media-Copywriter', desc: 'Generiert stilvolle Posts basierend auf Fotos und Stimmung' },
|
||||
{ title: 'Date-Atmosphaere-Planer', desc: 'Plant komplette Date-Ambientes von Ort ueber Themen bis Ueberraschungen' },
|
||||
{ title: 'Remote-Party-Animator', desc: 'Belebt Online-Geselligkeit mit Spielen und Interaktion' },
|
||||
{ title: 'Sozialenergie-Manager', desc: 'Hilft Introvertierten, soziale Energie zu managen' }
|
||||
],
|
||||
'creative': [
|
||||
{ title: 'Inspiration-Notfallkit', desc: 'Unerwartete kreative Funken bei Ideenblockaden' },
|
||||
{ title: 'Personal-Style-Entdecker', desc: 'Hilft, den eigenen einzigartigen Stil zu finden' },
|
||||
{ title: 'Bullet-Journal-Aesthetik-Berater', desc: 'Bietet Layout-, Farb- und Content-Tipps fuer Buecher und Tagebuecher' },
|
||||
{ title: 'Fotografie-Kompositions-Leitfaden', desc: 'Gibt Foto- und Bearbeitungstipps basierend auf Szene und gewuenschter Stimmung' },
|
||||
{ title: 'Stimmungsbasierter Musik-Matcher', desc: 'Empfiehlt die perfekte Musikauswahl fuer aktuelle Stimmung und Szene' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'City-Walk-Entdeckerfuehrer', desc: 'Erkunde Staedte wie ein Einheimischer und finde versteckte Orte' },
|
||||
{ title: 'Reise-Tagebuch-Generator', desc: 'Verwandelt Reisefotos und Stimmungen in schoene Reiseberichte' },
|
||||
{ title: 'Solo-Reise-Begleiter', desc: 'Bietet Begleitung, Ratschlaege und Sicherheit fuer Alleinreisende' },
|
||||
{ title: 'Zielort-Atmosphaere-Vorschau', desc: 'Erlebe die Atmosphaere des Reiseziels vorab immersiv' },
|
||||
{ title: 'Reisefotografie-Stimmungsberater', desc: 'Gibt Anleitung fuer atmosphaerische Reisefotos basierend auf Szene und Licht' }
|
||||
],
|
||||
'health': [
|
||||
{ title: 'Motivations-Aktivierer', desc: 'Gibt genau die richtige Ermutigung wenn man sich nicht bewegen moechte' },
|
||||
{ title: 'Gesunde-Kueche-Inspiration', desc: 'Generiert gesunde, wohltuende Rezepte basierend auf Stimmung und Zutaten' },
|
||||
{ title: 'Schlafqualitaet-Optimierer', desc: 'Erstellt umfassend optimale Schlafbedingungen von Umwelt bis Psyche' },
|
||||
{ title: 'Koerperwahrnehmungs-Leitfaden', desc: 'Lenkt die Aufmerksamkeit auf Koerpersignale und foerdert Koerper-Geist-Verbindung' },
|
||||
{ title: 'Selbstfuersorge-Erinnerung', desc: 'Erinnert daran, im Alltag innezuhalten und sich selbst zu pflegen' }
|
||||
],
|
||||
'learning': [
|
||||
{ title: 'Gamifizierter Wissens-Explorer', desc: 'Verwandt oedes Lernen in ein spannendes Entdeckungsabenteuer' },
|
||||
{ title: 'Sprachlern-Szenariopartner', desc: 'Spielt verschiedene Rollen fuer natuerliches Sprachenlernen in Dialogen' },
|
||||
{ title: 'Neugier-Befriediger', desc: 'Beantwortet wilde Fragen und stillt die Neugier auf die Welt' },
|
||||
{ title: 'Lesebuch-Inspiration', desc: 'Hilft beim Ordnen von Leseeindruecken und findet neue Perspektiven' },
|
||||
{ title: 'Wissensvermittlung-Gestalter', desc: 'Verwandelt Gelerntes in interessante Teilen-Inhalte' }
|
||||
],
|
||||
'relationship': [
|
||||
{ title: 'Beziehungs-Kommunikationscoach', desc: 'Hilft, schwierige Gefuehle auszudruecken und Beziehungen zu verbessern' },
|
||||
{ title: 'Familien-Gedanken-Erinnerung', desc: 'Erinnert daran, sich um Familie zu kuemmern mit herzlichen Interaktions-Tipps' },
|
||||
{ title: 'Freundschaftspflege-Berater', desc: 'Hilft, Fernfreundschaften zu pflegen und gemeinsame Themen zu finden' },
|
||||
{ title: 'Liebesgesten- und Ueberraschungsplaner', desc: 'Plant unvergessliche Ueberraschungen und romantische Momente' },
|
||||
{ title: 'Konfliktdeeskalations-Berater', desc: 'Bietet Ratschlaege und Formulierungen zur Entspannung bei Beziehungskonflikten' }
|
||||
],
|
||||
'pet': [
|
||||
{ title: 'Haustier-Tagebuch', desc: 'Tagebucheintraege aus der Perspektive des Haustiers' },
|
||||
{ title: 'Haustier-Verhaltensdeuter', desc: 'Entschluesselt die Korpersprache des Haustiers' },
|
||||
{ title: 'Haustier-Aktivitaeten-Planer', desc: 'Plant kreative Interaktionsaktivitaeten mit dem Haustier' },
|
||||
{ title: 'Haustier-Gedaechtnis-Geschichten', desc: 'Verwandelt Fotos und Erinnerungen in herzliche Geschichten' },
|
||||
{ title: 'Neulings-Haustierfuehrer', desc: 'Bietet waerme Begleitung und Anleitung fuer Erst-Haustierbesitzer' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'Kaufimpuls-Bewusstsein', desc: 'Erkennt Emotionen hinter Impulskaeufen und foerdert gesunde Konsumgewohnheiten' },
|
||||
{ title: 'Sparziel-Visualisierer', desc: 'Verwandelt Sparziele in sichtbare Traumfortschritte' },
|
||||
{ title: 'Finanzwissen-Spaasschule', desc: 'Lerne Finanzwissen auf unterhaltsame Weise' },
|
||||
{ title: 'Finanzangst-Beruhiger', desc: 'Bietet emotionale Unterstuetzung und praktische Ratschlaege bei Finanzstress' },
|
||||
{ title: 'Mini-Investment-Experience', desc: 'Spielerischer Einstieg ins Investieren mit niedriger Hemmschwelle' }
|
||||
],
|
||||
'career': [
|
||||
{ title: 'Karriereorientierungs-Begleiter', desc: 'Bietet Zuhoeren, Erkundung und Orientierung in beruflichen Uebergangsphasen' },
|
||||
{ title: 'Beruflicher Sinn-Aktivierer', desc: 'Hilft, Wert und Bedeutung in der Arbeit zu entdecken' },
|
||||
{ title: 'Beruflicher Netzwerk-Berater', desc: 'Bietet lockere Themen und Interaktionstipps fuer berufliche Netzwerke' },
|
||||
{ title: 'Nebenverdienst-Ideengeber', desc: 'Weckt kreative Nebenverdienst-Ideen basierend auf Faehigkeiten und Interessen' },
|
||||
{ title: 'Vorstellungsgespraech-Confidence-Booster', desc: 'Psychologische Vorbereitung und Motivation vor Vorstellungsgespraechen' }
|
||||
],
|
||||
'home': [
|
||||
{ title: 'Wohnraum-Atmosphaere-Gestalter', desc: 'Designt Wohn-Ambientes basierend auf Stimmung und Jahreszeit' },
|
||||
{ title: 'Jahreszeiten-Einrichtungsberater', desc: 'Passt die Einrichtung an die Jahreszeiten an fuer Abwechslung' },
|
||||
{ title: 'Kleine-Raum-Magie', desc: 'Schoene, gemuetliche Atmosphaere auch auf engem Raum' },
|
||||
{ title: 'Haushaltsritual-Gestalter', desc: 'Verleiht alltaeglichen Haushaltsaktivitaeten Sinn und Ritual' },
|
||||
{ title: 'Ausmisten-Begleiter', desc: 'Psychologische Unterstuetzung und Entscheidungs Hilfe beim Ausmuellen' }
|
||||
],
|
||||
'food': [
|
||||
{ title: 'Solo-Mahlzeit-Genuss', desc: 'Einfache, wohltuende Rezepte fuer Single-Haushalte' },
|
||||
{ title: 'Festtisch-Ambiente-Designer', desc: 'Festliche Tischdekorationen fuer besondere Anlaesse' },
|
||||
{ title: 'Stimmungsbasierter Kuechen-Matcher', desc: 'Empfiehlt Speisen und Zubereitungen passend zur aktuellen Stimmung' },
|
||||
{ title: 'Kuechenanfaenger-Motivator', desc: 'Waerme Ermutigung und einfache Rezepte fuer Kochanfaenger' },
|
||||
{ title: 'Food-Fotografie-Ambiente-Guide', desc: 'Macht auch einfache Gerichte fotogen' }
|
||||
],
|
||||
'fashion': [
|
||||
{ title: 'Outfit-Moodboard des Tages', desc: 'Generiert Outfit-Inspiration basierend auf Wetter, Anlass und Stimmung' },
|
||||
{ title: 'Capsule-Wardrobe-Stylist', desc: 'Unendige Kombinationsmoeglichkeiten mit wenigen Teilen' },
|
||||
{ title: 'Personal-Style-Reise', desc: 'Hilft, den eigenen einzigartigen Stil zu entdecken und aufzubauen' },
|
||||
{ title: 'Upcycling-Style-Kreativierer', desc: 'Neue Kombinationsideen fuer vorhandene Kleidung' },
|
||||
{ title: 'Anlass-Outfit-Berater', desc: 'Selbstbewusste Outfits fuer besondere Anlaesse' }
|
||||
]
|
||||
}
|
||||
|
||||
// Vordefinierte Empfehlungszuordnung nach Atmosphaere und Gefuehl
|
||||
const recommendationMap = {
|
||||
// Atmosphaere: heilsam
|
||||
'healing': {
|
||||
'relax': ['emotion', 'lifestyle', 'health', 'home'],
|
||||
'inspire': ['creative', 'growth', 'learning', 'entertainment'],
|
||||
'connect': ['relationship', 'social', 'pet', 'emotion'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Atmosphaere: Wachstum
|
||||
'growth': {
|
||||
'relax': ['growth', 'learning', 'creative', 'health'],
|
||||
'inspire': ['career', 'learning', 'creative', 'growth'],
|
||||
'connect': ['social', 'relationship', 'career', 'learning'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Atmosphaere: sozial
|
||||
'social': {
|
||||
'relax': ['social', 'pet', 'food', 'home'],
|
||||
'inspire': ['social', 'creative', 'entertainment', 'travel'],
|
||||
'connect': ['relationship', 'social', 'pet', 'travel'],
|
||||
'escape': ['social', 'travel', 'entertainment', 'creative']
|
||||
},
|
||||
// Atmosphaere: Entdeckung
|
||||
'explore': {
|
||||
'relax': ['travel', 'creative', 'lifestyle', 'food'],
|
||||
'inspire': ['travel', 'creative', 'learning', 'entertainment'],
|
||||
'connect': ['travel', 'social', 'relationship', 'pet'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Atmosphaere: Alltag
|
||||
'daily': {
|
||||
'relax': ['lifestyle', 'home', 'health', 'emotion'],
|
||||
'inspire': ['creative', 'food', 'fashion', 'home'],
|
||||
'connect': ['relationship', 'social', 'pet', 'lifestyle'],
|
||||
'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
|
||||
}
|
||||
}
|
||||
|
||||
const vibeOptions = [
|
||||
{ label: 'Heilsam', value: 'healing', desc: 'Waerme, Trost, Heilung' },
|
||||
{ label: 'Wachstum', value: 'growth', desc: 'Fortschritt, Durchbruch, Transformation' },
|
||||
{ label: 'Sozial', value: 'social', desc: 'Verbindung, Teilen, Interaktion' },
|
||||
{ label: 'Entdeckung', value: 'explore', desc: 'Neugier, Abenteuer, Finden' },
|
||||
{ label: 'Alltag', value: 'daily', desc: 'Gewoehnlich, echt, im Moment' }
|
||||
]
|
||||
|
||||
const feelingOptions = [
|
||||
{ label: 'Entspannen', value: 'relax', desc: 'Stress abbauen, abschalten' },
|
||||
{ label: 'Inspiration suchen', value: 'inspire', desc: 'Kreativitaet anregen, Impulse erhalten' },
|
||||
{ label: 'Verbindung wuenschen', value: 'connect', desc: 'Mit Menschen verbinden, emotionale Resonanz' },
|
||||
{ label: 'Kurz entfliehen', value: 'escape', desc: 'Der Realitaet entfliehen, eintauchen' }
|
||||
]
|
||||
|
||||
const scenarios = [
|
||||
{ key: 'lifestyle', name: 'Lebensstil', anchor: '#_1-lebensstil' },
|
||||
{ key: 'emotion', name: 'Emotionale Begleitung', anchor: '#_2-emotionale-begleitung' },
|
||||
{ key: 'entertainment', name: 'Unterhaltung', anchor: '#_3-unterhaltung' },
|
||||
{ key: 'growth', name: 'Persoenliches Wachstum', anchor: '#_4-persoenliches-wachstum' },
|
||||
{ key: 'social', name: 'Soziale Interaktion', anchor: '#_5-soziale-interaktion' },
|
||||
{ key: 'creative', name: 'Kreativer Ausdruck', anchor: '#_6-kreativer-ausdruck' },
|
||||
{ key: 'travel', name: 'Reiseerfahrung', anchor: '#_7-reiseerfahrung' },
|
||||
{ key: 'health', name: 'Koerperliche und geistige Gesundheit', anchor: '#_8-koerperliche-und-geistige-gesundheit' },
|
||||
{ key: 'learning', name: 'Wissensentdeckung', anchor: '#_9-wissensentdeckung' },
|
||||
{ key: 'relationship', name: 'Beziehungspflege', anchor: '#_10-beziehungspflege' },
|
||||
{ key: 'pet', name: 'Haustier-Begleitung', anchor: '#_11-haustier-begleitung' },
|
||||
{ key: 'finance', name: 'Finanzielle Gesundheit', anchor: '#_12-finanzielle-gesundheit' },
|
||||
{ key: 'career', name: 'Karriereentwicklung', anchor: '#_13-karriereentwicklung' },
|
||||
{ key: 'home', name: 'Wohnraum', anchor: '#_14-wohnraum' },
|
||||
{ key: 'food', name: 'Kulinarik', anchor: '#_15-kulinarik' },
|
||||
{ key: 'fashion', name: 'Mode und Stil', anchor: '#_16-mode-und-stil' }
|
||||
]
|
||||
|
||||
// Empfehlungen berechnen: zufaellig aus dem Themenpool auswaehlen
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!vibePoint.value || !feeling.value) return []
|
||||
|
||||
const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
|
||||
const topics = []
|
||||
|
||||
// Aus jedem empfohlenen Szenario 1-2 Themen zufaellig auswaehlen
|
||||
keys.forEach(key => {
|
||||
const scenario = scenarios.find(item => item.key === key)
|
||||
const scenarioTopics = topicPool[key] || []
|
||||
|
||||
if (scenario && scenarioTopics.length > 0) {
|
||||
// 1-2 Themen zufaellig auswaehlen
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
scenarioKey: key,
|
||||
scenarioName: scenario.name,
|
||||
scenarioAnchor: scenario.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Zufaellig sortieren und Gesamtzahl begrenzen
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// Beschreibung der aktuellen Auswahl abrufen
|
||||
const currentSelection = computed(() => {
|
||||
const vibe = vibeOptions.find(i => i.value === vibePoint.value)
|
||||
const feel = feelingOptions.find(p => p.value === feeling.value)
|
||||
return {
|
||||
vibe: vibe?.label || '',
|
||||
feeling: feel?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// Scrollen verzoegern, damit das DOM aktualisiert ist
|
||||
setTimeout(() => {
|
||||
// Suche per ID versuchen (unterstuetzt mehrere Formate)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// Falls nicht gefunden, andere moegliche ID-Formate versuchen
|
||||
if (!element) {
|
||||
// Unterstrich-Praefix entfernen
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// Falls weiter nicht gefunden, per Ueberschriftentext suchen
|
||||
if (!element) {
|
||||
// Szenarionamen aus dem Anchor extrahieren
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// Exakte oder partielle Uebereinstimmung
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// Zielabschnitt hervorheben
|
||||
element.style.backgroundColor = '#fdf2f8'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
vibePoint.value = ''
|
||||
feeling.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# C-End Konsumszenarien - Inspirationsreferenz
|
||||
|
||||
## Kapiteluebersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['C-End-Apps', 'Lebensstil', 'Emotionales Erlebnis', 'Atmosphaere']" coreOutput="15+ Lebensszenario-Inspirationen entdecken" expectedOutput="Produktrichtungen finden, die Nutzer beruehren">
|
||||
|
||||
Dieses Dokument fasst <strong>kreative Anwendungsrichtungen von LLM in C-End-Konsumszenarien</strong> zusammen. Anders als B-End-Produkte, die auf Effizienz und Schmerzpunkte fokussieren, legen C-End-Produkte mehr Wert auf <strong>Atmosphaere, psychologische Suggestion und Gefuehlsbetonung</strong>, damit Nutzer emotionale Resonanz und positive Erlebnisse haben.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Schnellauswahl der Szenario-Atmosphaere
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Finden Sie inspirierende Szenarien</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Waehlen Sie Ihre gewuenschte Atmosphaere und aktuelle Stimmung - das System empfiehlt passende Szenarien. Klicken Sie auf Tags, um zum entsprechenden Kapitel zu springen.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="vibePoint" placeholder="Atmosphaere-Typ waehlen" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in vibeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="feeling" placeholder="Aktuelle Stimmung waehlen" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in feelingOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
|
||||
Fuer Sie empfohlen {{ currentSelection.vibe }} × {{ currentSelection.feeling }} Szenarien:
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<el-tag
|
||||
v-for="topic in recommendationTopics"
|
||||
:key="topic.title"
|
||||
type="danger"
|
||||
effect="light"
|
||||
style="cursor: pointer; margin-bottom: 4px;"
|
||||
@click="scrollToAnchor(topic.scenarioAnchor)"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
|
||||
Neu waehlen
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
---
|
||||
|
||||
## 1. Lebensstil
|
||||
|
||||
> 💡 **Kernkonzept**：Alltaegliches mit Ritualen versehen und Schoenheit in Details schaffen
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Morgenritual-Aktivierungsassistent | Integriert Wetter-API und Kalenderdaten; LLM generiert persoenliche Morgenplaene; spielt passende Musik ueber Smart Speaker ab und laesst Licht langsam heller werden |
|
||||
| 2 | Atmosphaeren-Gestalter fuer Single-Haushalte | Bindet Smart-Home-Geraete ein (Licht, Lautsprecher, Duftspender); LLM passt Parameter nach Uhrzeit und Stimmung an; lernt Nutzerpraeferenzen und optimiert laufend |
|
||||
| 3 | Wochenend-Wellness-Plan-Generator fuer Zuhause | Bindet Streaming-APIs fuer Filmlisten ein und kombiniert Nutzerpraeferenzen zu Film + Essen + Einrichtung |
|
||||
| 4 | Einschlaf-Radio fuer innere Ruhe | Nutzt TTS fuer sanfte Geschichten, mischt White Noise und laesst die Lautstaerke intelligent abfallen; passt Inhalte anhand von Schlafdaten an |
|
||||
| 5 | Alltagsaesthetik-Inspirationsfaenger | Analysiert Umgebungsfotos per Bilderkennung, LLM generiert Aesthetik-Tipps; Content-Empfehlungen im Stil von Pinterest/Xiaohongshu |
|
||||
|
||||
---
|
||||
|
||||
## 2. Emotionale Begleitung
|
||||
|
||||
> 💡 **Kernkonzept**：Bedingungslose Annahme und Begleitung als sanfter emotionaler Raum
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Naechtlicher Kummerkasten-Zuhoerer | Ende-zu-Ende-Verschluesselung fuer Privatsphaere; LLM-Emotionsanalyse versteht Gefuehle; Langzeitgedaechtnis speichert Nutzerstories und begleitet in Mehr-Runden-Dialogen |
|
||||
| 2 | Trennungs-Heilungsbegleiter | Erkennt emotionale Phasen und bietet phasenweise Unterstuetzung (Erzaehlphase -> Entlastungsphase -> Wiederaufbau); RAG-Suche in psychologischer Wissensbasis |
|
||||
| 3 | Atemcoach gegen Angst | Bindet Biosensordaten ein (Herzrate/Atem); ueberwacht Angstniveau in Echtzeit; fuehrt per Stimme Atemrhythmus und progressive Muskelentspannung an |
|
||||
| 4 | Mentor zum Wiederaufbau von Selbstvertrauen | Dialograhmen aus positiver Psychologie, dokumentiert kleine Erfolge und gibt Feedback; kognitive Umstrukturierung hilft gegen negative Selbstgespraeche |
|
||||
| 5 | Intelligente Deutung des Emotionstagebuchs | NLP-Modell zur Emotionserkennung, Zeitreihenanalyse entdeckt Muster; visualisierte Emotionskarte und praediktive Emotionswarnungen |
|
||||
|
||||
---
|
||||
|
||||
## 3. Unterhaltung
|
||||
|
||||
> 💡 **Kernkonzept**：Immersive Erlebnisse schaffen, Unterhaltung als Zufluchtsort der Seele
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Immersiver Murder-Mystery-DM | LLM generiert Handlungszweige in Echtzeit, Sprachsynthese spielt NPCs; Schwierigkeit und Tempo passen sich Spielerreaktionen an; AR/VR-Szenenrendering |
|
||||
| 2 | Seelenvoller NPC fuer Open-World-Spiele | Langzeitgedaechtnis-Datenbank speichert Spielerinteraktionen, LLM generiert persoenliche Dialoge; Affective Computing gibt NPCs echte emotionale Reaktionen |
|
||||
| 3 | Personalisierte Podcast-Content-Generierung | Generiert eigene Inhalte anhand des Interessenprofils; TTS klont bevorzugte Stimmen; beantwortet Hoererfragen interaktiv in Echtzeit |
|
||||
| 4 | Atmosphaeren-Team fuer virtuelle Konzerte | Virtuelle Avatare, Echtzeit-Chat-Interaktion, virtuelle Lightsticks/Fan-Requisiten; raeumliches Audio schafft Live-Gefuehl |
|
||||
| 5 | Co-Creation-Partner fuer interaktive Romane | LLM generiert Handlung in Echtzeit, Nutzerentscheidungen beeinflussen den Verlauf; mehrere Enden und dynamische Figurenbeziehungen |
|
||||
|
||||
---
|
||||
|
||||
## 4. Persoenliches Wachstum
|
||||
|
||||
> 💡 **Kernkonzept**：Wachstum ist keine Askese, sondern eine spannende Reise der Selbstentdeckung
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Zeuge persoenlichen Wachstums | Visualisiert Wachstumspfade als Timeline, markiert Meilensteine automatisch; Vergleichsbilder zeigen "frueheres Ich" vs. "heutiges Ich" |
|
||||
| 2 | Gamifizierter Coach fuer Gewohnheitsaufbau | Gamification-Mechaniken (XP, Level, Abzeichen), soziale Ranglisten, AI-Coach-Rollenspiel wie "Abenteuermentor" |
|
||||
| 3 | Matching fuer Lernpartner | Matching-Algorithmus nach Interessen und Lernzielen, Lerngruppen-Community, gegenseitige Check-ins |
|
||||
| 4 | Entdecker kleiner taeglicher Gluecksmomente | Bilderkennung entdeckt schoene Alltagsmomente, Gratitude-Journal-Fuehrung, woechentlicher Rueckblick auf schoene Momente |
|
||||
| 5 | Lebenssimulations-Erlebnis | Mehrzweigige Story simuliert Folgen verschiedener Entscheidungen, Vergleich paralleler Leben; visualisierte Entscheidungsfolgen |
|
||||
|
||||
---
|
||||
|
||||
## 5. Soziale Interaktion
|
||||
|
||||
> 💡 **Kernkonzept**：Soziales natuerlich und entspannt gestalten, komfortable Verbindung finden
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Eisbrecher-Themengenerator | Intelligente Themenempfehlungen nach Anlass und Teilnehmenden, Echtzeit-Gespraechsanalyse fuer Anschlussfragen; Rettungshinweise fuer peinliche Momente |
|
||||
| 2 | Social-Post-Atmosphaeren-Texter | Analysiert Bildinhalte, LLM generiert Texte in mehreren Stilen (literarisch/humorvoll/tiefgehend); intelligente Emoji- und Layout-Empfehlungen |
|
||||
| 3 | Date-Atmosphaerenplaner | Generiert Date-Plaene nach Interessen beider Personen, empfiehlt Restaurants/Aktivitaeten und Gespraechsthemen; Wetter- und Verkehrshinweise in Echtzeit |
|
||||
| 4 | Stimmungsmacher fuer Remote-Treffen | Online-Spielbibliothek, Eisbrecher-Aktivitaetsgenerator, Themenrad; virtuelle Hintergruende und Filter staerken die Atmosphaere |
|
||||
| 5 | Assistent fuer soziale Energie | Bewertet Energieverbrauch nach sozialen Aktivitaeten, gibt Erholungsvorschlaege (Alleinzeit-Aktivitaeten); intelligente Planung des Sozialkalenders |
|
||||
|
||||
---
|
||||
|
||||
## 6. Kreativer Ausdruck
|
||||
|
||||
> 💡 **Kernkonzept**：Jeder hat Kreativitaet, sie muss nur geweckt werden
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Notfallkit gegen Inspirationsmangel | Cross-Domain-Assoziationsalgorithmus, zufaellige Stimuluswoerter, kreative Prompt-Bibliothek; Mindmap-Tool fuer Ideendivergenz |
|
||||
| 2 | Guide zur Entdeckung des persoenlichen Stils | Bildanalyse erkennt vorhandenen Stil, empfiehlt Stiltrends, virtuelle Anprobe/Make-up; Timeline der Stilentwicklung |
|
||||
| 3 | Aesthetikberater fuer Bullet Journals und Tagebuecher | Layout-Vorlagen, Farbpaletten, Deko-Elemente; Handschrifterkennung und Content-Verschoenerung |
|
||||
| 4 | Fotografie-Kompositions- und Atmosphaeren-Guide | Szenenerkennung und Kompositionsvorschlaege, Filterstil-Empfehlungen, intelligente Anpassung von Bearbeitungsparametern; Lernpfad fuer Fototechnik |
|
||||
| 5 | Musik-Stimmungs-Matcher | Algorithmus fuer musikalische Emotionsanalyse, Stimmungserkennung, persoenliche Playlists; Musikgeschichten und Hintergrundinfos |
|
||||
|
||||
---
|
||||
|
||||
## 7. Reiseerkundung
|
||||
|
||||
> 💡 **Kernkonzept**：Reisen ist nicht nur Landschaften sehen, sondern verschiedene Lebensweisen erfahren
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | City-Walk-Erkundungsfuehrer | Aggregiert Inhalte lokaler Kenner, empfiehlt Nischenorte, AR-Navigation; Echtzeit-Uebersetzung und Spracherklaerungen |
|
||||
| 2 | Reise-Stimmungs-Tagebuchgenerator | Automatische Fotoklassifikation und Auswahl, LLM generiert schoene Reiseberichte, Geotag-Timeline; Reisevideo mit einem Klick |
|
||||
| 3 | Begleitassistent fuer Solo-Reisen | Echtzeit-Positionsfreigabe und Sicherheitshinweise, lokale Notfallkontakte, AI-Reisefuehrer per Stimme; Community fuer Alleinreisende |
|
||||
| 4 | Atmosphaerenvorschau des Reiseziels | VR/360-Grad-Panorama, Simulation lokaler Geraeusche und Gerueche, kulturelle Hintergruende; virtuelle "Probewohnen"-Erfahrung |
|
||||
| 5 | Atmosphaerenberatung fuer Reisefotografie | Golden-Hour-Erinnerungen, Kompositionshilfslinien, Empfehlungen lokaler Fotospots; Tipps fuer Farbgrading nach der Aufnahme |
|
||||
|
||||
---
|
||||
|
||||
## 8. Koerperliche und geistige Gesundheit
|
||||
|
||||
> 💡 **Kernkonzept**：Gesundheit ist kein Ziel, sondern sanfte Selbstfuersorge
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Aktivierer fuer Bewegungsmotivation | Empfiehlt passende Sportarten nach Nutzerzustand, Mikro-Workouts (5 Minuten), gamifizierte Sport-Challenges; soziale Sport-Check-ins |
|
||||
| 2 | Inspirationskueche fuer gesunde Ernaehrung | Erkennt Zutaten im Kuehlschrank, empfiehlt persoenliche Rezepte, analysiert Naehrstoffkombinationen; Step-by-step-Kochanleitung |
|
||||
| 3 | Atmosphaeren-Optimierer fuer Schlafqualitaet | Analysiert Schlaftracking-Daten, generiert Einschlafrituale, empfiehlt Umweltoptimierung (Temperatur/Luftfeuchte/Licht); intelligentes Wecken |
|
||||
| 4 | Guide fuer Koerperwahrnehmung | Fuehrt Body-Scan-Meditation an, verbindet Koerperbereiche mit Emotionen, Uebungen fuer Koerper-Geist-Verbindung; Biofeedback-Visualisierung |
|
||||
| 5 | Erinnerung an Selbstfuersorge | Ueberwacht Arbeitsintensitaet, erinnert regelmaessig an Pausen, empfiehlt Mikro-Selbstfuersorge (Wasser/Stretching/Tiefatmen); Selbstfuersorge-Protokoll |
|
||||
|
||||
---
|
||||
|
||||
## 9. Wissensentdeckung
|
||||
|
||||
> 💡 **Kernkonzept**：Lernen ist ein endloses Abenteuer, Neugier ist der beste Lehrer
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Gamifizierter Guide zur Wissensentdeckung | Visualisiert Wissenspunkte als Karte, Lernpfad mit Leveln, Erfolgsabzeichen; AI-Mentor-Rollenspiel |
|
||||
| 2 | Szenario-Partner fuer Sprachenlernen | LLM spielt verschiedene Rollen fuer Dialoge, korrigiert Aussprache, erklaert kulturelle Hintergruende; immersive Szenariosimulation |
|
||||
| 3 | Assistent zur Befriedigung von Neugier | Bindet Wikipedia/Wissensgraphen ein, erklaert komplexe Konzepte verstaendlich, empfiehlt verwandtes Wissen; Neugier-Protokoll |
|
||||
| 4 | Inspirationsgeber fuer Lesenotizen | Analysiert Buchinhalte, extrahiert und verknuepft Standpunkte, empfiehlt Denkperspektiven; Vorlagen und Verschoenerung fuer Lesenotizen |
|
||||
| 5 | Atmosphaeren-Gestalter fuer Wissensaustausch | Erstellt automatisch Wissenskarten, optimiert Share-Texte, verbessert Visuals; Datenfeedback fuer Social Sharing |
|
||||
|
||||
---
|
||||
|
||||
## 10. Beziehungspflege
|
||||
|
||||
> 💡 **Kernkonzept**：Gute Beziehungen brauchen Pflege - aber das muss nicht kompliziert sein
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Kommunikationscoach fuer intime Beziehungen | Generiert Vorlagen fuer Gefuehlsausdruck, leitet gewaltfreie Kommunikation an, bietet Formulierungen zur Konfliktloesung; bewertet Beziehungsgesundheit |
|
||||
| 2 | Erinnerungsassistent fuer Familienfuersorge | Erinnerungen an wichtige Daten (Geburtstage/Jahrestage), Vorschlaege fuer Fuersorgeformulierungen, Familienaktivitaeten; erstellt Familienalben |
|
||||
| 3 | Atmosphaeren-Gestalter fuer Freundschaftspflege | Protokolliert Freundesinteraktionen, empfiehlt gemeinsame Themen, organisiert Remote-Treffen; Freundschafts-Timeline und Erinnerungsgenerierung |
|
||||
| 4 | Planer fuer Gestandnisse und Ueberraschungen | Generiert persoenliche Ueberraschungsplaene, empfiehlt Geschenke und romantische Formulierungen; Zeitplan und Erinnerungen fuer die Umsetzung |
|
||||
| 5 | Guide zur Konfliktentschaerfung | Formulierungen zur emotionalen Abkuehlung, Perspektivwechsel-Anleitung, Schritte zur Versoehnung; Tracking der Beziehungsreparatur |
|
||||
|
||||
---
|
||||
|
||||
## 11. Haustier-Begleitung
|
||||
|
||||
> 💡 **Kernkonzept**：Haustiere sind Familie, ihre Begleitung verdient es, festgehalten zu werden
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Anthropomorphes Haustier-Tagebuch | Analysiert Haustierverhalten, generiert Tagebucheintraege in Ich-Perspektive, ordnet Fotos automatisch zu; Haustier-"Freundeskreis" |
|
||||
| 2 | Deuter fuer Haustierverhalten | Analysiert Videos von Haustierverhalten, Gesundheitswarnungen, Trainingstipps; Wissensbasis zu Rassemerkmalen |
|
||||
| 3 | Planer fuer gemeinsame Haustierzeit | Aktivitaetsempfehlungen fuer Haustiere, DIY-Spielzeuganleitungen, haustierfreundliche Orte; Haustier-Social-Matching |
|
||||
| 4 | Generator fuer Haustier-Erinnerungsgeschichten | Waehlt Fotos und Videos aus, generiert Timeline-Geschichten, kombiniert passende Musik; automatische Erstellung von Erinnerungsalbum/-video |
|
||||
| 5 | Beruhigender Guide fuer neue Haustierhalter | Phasenweiser Pflegeguide, FAQ, Umgang mit Notfaellen; Community-Support fuer Einsteiger |
|
||||
|
||||
---
|
||||
|
||||
## 12. Finanzielle Gesundheit
|
||||
|
||||
> 💡 **Kernkonzept**：Finanzielle Freiheit ist nicht das Ziel - finanzielle Gesundheit schon
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Assistent fuer Konsum-Emotionsbewusstsein | Analysiert Konsumaufzeichnungen und Emotion-Konsum-Zusammenhaenge, warnt vor Impulskaeufen; empfiehlt alternative Formen der Befriedigung |
|
||||
| 2 | Visuelle Motivation fuer Sparziele | Visualisiert Ziel-Fortschritt, rendert Traumszenen, feiert Meilensteine; Spiel zum Aufbau von Spargewohnheiten |
|
||||
| 3 | Finanzwissen leicht gelernt | Liefert Wissen in kleinen Einheiten, szenariobasierte Fallbeispiele, interaktive Q&A; Wissenstests und Zertifikate |
|
||||
| 4 | Beruhiger fuer Finanzangst | Bewertet finanzielle Gesundheit, Stressmanagement-Techniken, kleine Handlungsplaene; finanzpsychologische Beratung |
|
||||
| 5 | Spiel fuer Kleininvestment-Erfahrung | Virtuelle Investmentsimulation, Risikoaufklaerung, Portfolio-Spiel; Anleitung zu echten Kleininvestitionen |
|
||||
|
||||
---
|
||||
|
||||
## 13. Karriereentwicklung
|
||||
|
||||
> 💡 **Kernkonzept**：Karriere ist kein Schienenstrang, sondern eine Wildnis zum Erkunden
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Begleiter bei beruflicher Orientierungslosigkeit | Berufliches Interessensassessment, Kompetenzinventar, Brancheninformationen; Dialog mit Karrierementor |
|
||||
| 2 | Aktivierer fuer berufliches Erfolgserleben | Dokumentiert Arbeitsergebnisse, extrahiert Wert, visualisiert Erfolge; sammelt positives Feedback von Kollegen/Kunden |
|
||||
| 3 | Assistent fuer Workplace-Social-Atmosphaere | Empfiehlt berufliche Gespraechsthemen, Networking-Techniken, Branchenveranstaltungen; optimiert LinkedIn-Inhalte |
|
||||
| 4 | Inspirationsgeber fuer Nebenprojekte | Matching von Faehigkeiten, Interessen und Marktnachfrage, Nebenprojekt-Fallbibliothek, Startguide; Side-Project-Community |
|
||||
| 5 | Confidence-Booster vor Vorstellungsgespraechen | Simulierte Interviews, Vorbereitung haeufiger Fragen, Techniken zur Staerkung von Selbstvertrauen; Image-Tipps |
|
||||
|
||||
---
|
||||
|
||||
## 14. Wohnraum
|
||||
|
||||
> 💡 **Kernkonzept**：Zuhause ist nicht nur ein Wohnort, sondern ein Zufluchtsort der Seele
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Atmosphaeren-Designer fuer Wohnraeume | Analysiert Raumfotos, empfiehlt Stile, Moebel und Dekoration; AR-Vorschau des Effekts |
|
||||
| 2 | Guide fuer saisonale Wohnraumveraenderung | Empfiehlt saisonale Themen, Aufbewahrungs- und Praesentationsideen, Festtagsdeko; erstellt Einkaufsliste |
|
||||
| 3 | Magie fuer kleine Wohnungen | Raumoptimierungsalgorithmus, Empfehlungen fuer Multifunktionsmoebel, Aufbewahrungstipps; visuelle Raumvergroesserung |
|
||||
| 4 | Gestalter von Wohnritualen | Designt Alltagsrituale (Morgen/Abend/Wochenende), erinnert an Ausfuehrung; Feedback zur Ritualwirkung |
|
||||
| 5 | Psychologische Begleitung beim Ausmisten | Bewertet emotionalen Wert von Gegenstaenden, fuehrt durch Ausmist-Schritte, psychologische Unterstuetzung; Spenden-/Recyclingkanaele |
|
||||
|
||||
---
|
||||
|
||||
## 15. Kulinarik
|
||||
|
||||
> 💡 **Kernkonzept**：Essen ist die Sprache der Liebe, Kochen ist eine Art der Liebeserforschung
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Heilende Solo-Mahlzeiten | Erkennt Kuehlschrankzutaten, empfiehlt einfache Rezepte, Step-by-step-Anleitung; Aesthetik fuer Solo-Plating |
|
||||
| 2 | Atmosphaerendesign fuer Festtafeln | Festtagsmenues, Tischdeko-Plaene, Atmosphaeren-Tipps; Optimierung der Gaesteerfahrung |
|
||||
| 3 | Koch-Stimmungs-Matcher | Algorithmus fuer Stimmung-Essen-Zusammenhaenge, Rezepte zur Emotionsregulation, Comfort-Food-Empfehlungen; Kochtherapie-Anleitung |
|
||||
| 4 | Vertrauensaufbau fuer Kochanfaenger | Supereinfache Rezepte, Rettungstipps bei Fehlern, Formulierungen fuer Selbstvertrauen; schrittweise Steigerung der Schwierigkeit |
|
||||
| 5 | Atmosphaeren-Guide fuer Food-Fotografie | Plating-Tipps, Nutzung von Naturlicht, Aufnahmewinkel; Filter- und Nachbearbeitungstipps |
|
||||
|
||||
---
|
||||
|
||||
## 16. Mode und Stil
|
||||
|
||||
> 💡 **Kernkonzept**：Mode ist Selbstdarstellung, Stil ist der sichtbare Ausdruck des Inneren
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Outfit-Moodboard des Tages | Kombinierte Empfehlungen nach Wetter/Anlass/Stimmung, virtuelle Anprobe, Styling-Inspiration; Kleiderschrankverwaltung |
|
||||
| 2 | Capsule-Wardrobe-Stylist | Kleiderschrank-Inventar, Kombinationssets fuer Einzelteile, One-piece-multiple-looks; Einkaufstipps zum Schliessen von Luecken |
|
||||
| 3 | Reise zur Entdeckung des persoenlichen Stils | Stiltest, Referenz-Icon-Empfehlungen, Pfad der Stilentwicklung; Aufbau von Selbstvertrauen |
|
||||
| 4 | Kreativer fuer neue Looks aus alter Kleidung | Upcycling-Inspiration, neue Kombinationsweisen, Akzentuierung mit Accessoires; nachhaltige Modephilosophie |
|
||||
| 5 | Stylingberater fuer besondere Anlaesse | Deutet Dresscodes, generiert Stylingplaene, Make-up- und Frisurvorschlaege; stimmige Gesamtkoordination |
|
||||
|
||||
---
|
||||
|
||||
## Kernprinzipien fuer C-End-Produktdesign
|
||||
|
||||
### 1. Von "Funktion" zu "Gefuehl"
|
||||
|
||||
B-End-Produkte fragen: "Welches Problem loest diese Funktion?" C-End-Produkte fragen: "Welches Gefuehl erzeugt diese Funktion?"
|
||||
|
||||
| B-End-Denken | C-End-Denken |
|
||||
|---------|---------|
|
||||
| Effizienz steigern | Zeit fuer die Dinge sparen, die man liebt |
|
||||
| Kosten senken | Jeden Cent wertvoll ausgeben |
|
||||
| Schmerzpunkte loesen | Schoene Erlebnisse schaffen |
|
||||
| Vollstaendige Funktionalitaet | Stimmung passt |
|
||||
|
||||
### 2. Drei Ebenen der Atmosphaere-Gestaltung
|
||||
|
||||
**Sinnesebene**: Gestaltung von Sehen, Hoeren und Fuehlen
|
||||
- Waerme Farben
|
||||
- Beruhigende Geraeusche
|
||||
- Fliessende Animationen
|
||||
|
||||
**Emotionale Ebene**: Resonanz und Fuehrung von Emotionen
|
||||
- Die Stimmung des Nutzers verstehen
|
||||
- Emotionale Unterstuetzung bieten
|
||||
- Positive Emotionen erzeugen
|
||||
|
||||
**Bedeutungsebene**: Anerkennung von Wert und Zugehoerigkeit
|
||||
- Nutzer fuehlen sich verstanden
|
||||
- Zugehoerigkeitsgefuehl schaffen
|
||||
- Handlungen Sinn verleihen
|
||||
|
||||
### 3. Die Kraft psychologischer Suggestion
|
||||
|
||||
C-End-Produkte vermitteln durch Text und Design psychologische Suggestionen:
|
||||
|
||||
- **Positive Suggestion**: "Du machst das schon gut", "Geh langsam vor, das ist in Ordnung"
|
||||
- **Zugehoerigkeits-Suggestion**: "Viele Menschen fuehlen wie du", "Du bist nicht allein"
|
||||
- **Wachstums-Suggestion**: "Jeder Versuch ist Fortschritt", "Du wirst besser"
|
||||
|
||||
### 4. Nutzer zu einer besseren Version ihrer selbst machen
|
||||
|
||||
Die besten C-End-Produkte aendern Nutzer nicht, sondern helfen ihnen, die Person zu werden, die sie sein moechten.
|
||||
|
||||
- Nicht "du solltest...", sondern "du kannst..."
|
||||
- Nicht "du musst...", sondern "wenn du moechtest..."
|
||||
- Nicht "du bist noch nicht genug...", sondern "du hast bereits..."
|
||||
|
||||
---
|
||||
|
||||
> 🌟 **Merke**: C-End-Nutzer kaufen keine Funktionen, sondern Gefuehle; keine Werkzeuge, sondern Begleitung; keine Services, sondern Verstaendnis.
|
||||
@@ -0,0 +1,232 @@
|
||||
---
|
||||
title: 'C-End Szenarien - Inspirationsreferenz'
|
||||
description: 'Ideenpool fuer LLM-Anwendungen im Konsumentenbereich: Lifestyle, Emotion, Unterhaltung, Wachstum und mehr. Fokus: Gefuehl, Atmosphaere und geringe Friktion.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'ca. <strong>4 Stunden</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// Themenpool pro Kategorie: Fokus auf Gefuehl, Atmosphaere, psychologische Suggestion.
|
||||
const topicPool = {
|
||||
lifestyle: [
|
||||
{ title: 'Morgenritual-Aktivierer', desc: 'Erstellt persoenliche Morgenrituale basierend auf Wetter, Terminen und Stimmung' },
|
||||
{ title: 'Wohlfuehl-Atmosphaere fuer Single-Haushalte', desc: 'Gestaltet Wohlfuehl-Ambiente mit Licht, Musik und Duft-Kombinationen' }
|
||||
],
|
||||
emotion: [
|
||||
{ title: 'Nachtlicher Zuhoerer', desc: '24/7 verfuegbarer emotionaler Zuhoerer ohne Wertung' },
|
||||
{ title: 'Angstbewaeltigungs-Atemtrainer', desc: 'Fuehrt durch Atemuebungen und Achtsamkeit, wenn Stress hoch ist' }
|
||||
],
|
||||
entertainment: [
|
||||
{ title: 'Immersives Mystery-Adventure', desc: 'Interaktives Story-Spiel, das sich an Entscheidungen erinnert' },
|
||||
{ title: 'Personalisierter Podcast-Generator', desc: 'Erstellt kurze Audio-Snacks aus deinen Themen und Quellen' }
|
||||
],
|
||||
growth: [
|
||||
{ title: 'Gamifizierter Gewohnheits-Coach', desc: 'Verwandelt Gewohnheiten in ein motivierendes Quest-System' },
|
||||
{ title: 'Persoenlicher Lern-Sparringspartner', desc: 'Hilft beim Lernen, fragt ab und baut einen Plan aus deinem Ziel' }
|
||||
],
|
||||
social: [
|
||||
{ title: 'Eisbrecher-Thema-Generator', desc: 'Gibt passende Themen fuer Dates, Dinner oder Team-Events' },
|
||||
{ title: 'Social-Media-Copywriter', desc: 'Formuliert Posts im passenden Ton aus Foto + Kontext' }
|
||||
],
|
||||
travel: [
|
||||
{ title: 'City-Walk-Entdeckerfuehrer', desc: 'Walks wie ein Local: Routen, Spots, Timing, kleine Geschichten' },
|
||||
{ title: 'Reise-Tagebuch-Generator', desc: 'Macht aus Notizen/Fotos einen schoen strukturierten Reisebericht' }
|
||||
],
|
||||
health: [
|
||||
{ title: 'Schlafqualitaet-Optimierer', desc: 'Baut eine Schlafroutine aus Licht, Sound, Atem und Gewohnheiten' },
|
||||
{ title: 'Gesunde-Kueche-Inspiration', desc: 'Rezepte nach Stimmung, Zeit, Zutaten und Ziel (z.B. leicht/satt)' }
|
||||
]
|
||||
}
|
||||
|
||||
// Vordefinierte Empfehlungspfade (VibePoint + Feeling -> Kategorien).
|
||||
const recommendationMap = [
|
||||
{ vibe: 'healing', feeling: 'calm', picks: ['emotion', 'health', 'lifestyle'] },
|
||||
{ vibe: 'growth', feeling: 'focused', picks: ['growth', 'learning', 'lifestyle'] },
|
||||
{ vibe: 'social', feeling: 'connected', picks: ['social', 'entertainment', 'lifestyle'] },
|
||||
{ vibe: 'explore', feeling: 'curious', picks: ['travel', 'entertainment', 'learning'] },
|
||||
{ vibe: 'daily', feeling: 'light', picks: ['lifestyle', 'health', 'social'] }
|
||||
]
|
||||
|
||||
const categories = [
|
||||
{ key: 'lifestyle', name: 'Lebensstil', anchor: '#_1-lebensstil' },
|
||||
{ key: 'emotion', name: 'Emotionale Begleitung', anchor: '#_2-emotion' },
|
||||
{ key: 'entertainment', name: 'Unterhaltung', anchor: '#_3-unterhaltung' },
|
||||
{ key: 'growth', name: 'Persoenliches Wachstum', anchor: '#_4-wachstum' },
|
||||
{ key: 'social', name: 'Soziale Interaktion', anchor: '#_5-sozial' },
|
||||
{ key: 'travel', name: 'Reiseerfahrung', anchor: '#_6-reise' },
|
||||
{ key: 'health', name: 'Gesundheit', anchor: '#_7-gesundheit' }
|
||||
]
|
||||
|
||||
function pickTopics(keys) {
|
||||
const results = []
|
||||
for (const key of keys) {
|
||||
const pool = topicPool[key] || []
|
||||
if (pool.length === 0) continue
|
||||
// 1-2 zufaellige Themen je Kategorie.
|
||||
const count = Math.min(pool.length, Math.random() > 0.6 ? 2 : 1)
|
||||
const shuffled = [...pool].sort(() => Math.random() - 0.5)
|
||||
results.push(...shuffled.slice(0, count).map((t) => ({ ...t, category: key })))
|
||||
}
|
||||
return results.slice(0, 8)
|
||||
}
|
||||
|
||||
const recommended = computed(() => {
|
||||
const v = vibePoint.value.trim()
|
||||
const f = feeling.value.trim()
|
||||
const match =
|
||||
recommendationMap.find((x) => x.vibe === v && x.feeling === f) ||
|
||||
recommendationMap.find((x) => x.vibe === v) ||
|
||||
recommendationMap.find((x) => x.feeling === f)
|
||||
const picks = match?.picks?.filter((k) => k in topicPool) || ['lifestyle', 'emotion', 'growth']
|
||||
return pickTopics(picks)
|
||||
})
|
||||
|
||||
function scrollToAnchor(anchor) {
|
||||
if (!anchor) return
|
||||
const id = anchor.replace(/^#/, '')
|
||||
const el = document.getElementById(id)
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
</script>
|
||||
|
||||
# C-End Szenarien - Inspirationsreferenz
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['C-End', 'Szenarien', 'Inspiration', 'Atmosphaere']" coreOutput="Eine priorisierte Ideenliste" expectedOutput="3-5 lohnende Startpunkte">
|
||||
|
||||
Dieses Dokument ist eine Inspirationssammlung fuer Konsumenten-Apps. Der Fokus liegt nicht nur auf "Funktionen", sondern auf <strong>Gefuehl</strong> und <strong>Atmosphaere</strong>: Warum wuerde jemand wiederkommen? Welche Emotion wird gestaerkt? Welche Friktion wird entfernt?
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Schnell-Generator (optional)
|
||||
|
||||
Waehle einen Vibe und ein Feeling. Du bekommst ein paar zufaellige Ideen zum Start.
|
||||
|
||||
<div class="vp-doc" style="display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: end;">
|
||||
<div>
|
||||
<label style="display: block; font-weight: 600; margin-bottom: 6px;">VibePoint</label>
|
||||
<select v-model="vibePoint" style="width: 100%; padding: 8px;">
|
||||
<option value="">(frei)</option>
|
||||
<option value="healing">healing</option>
|
||||
<option value="growth">growth</option>
|
||||
<option value="social">social</option>
|
||||
<option value="explore">explore</option>
|
||||
<option value="daily">daily</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display: block; font-weight: 600; margin-bottom: 6px;">Feeling</label>
|
||||
<select v-model="feeling" style="width: 100%; padding: 8px;">
|
||||
<option value="">(frei)</option>
|
||||
<option value="calm">calm</option>
|
||||
<option value="focused">focused</option>
|
||||
<option value="connected">connected</option>
|
||||
<option value="curious">curious</option>
|
||||
<option value="light">light</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 12px;">
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<button v-for="c in categories" :key="c.key" class="VPButton medium" type="button" @click="scrollToAnchor(c.anchor)">
|
||||
{{ c.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="recommended.length" style="margin-top: 16px;">
|
||||
<h3>Empfehlungen</h3>
|
||||
<ul>
|
||||
<li v-for="(t, idx) in recommended" :key="idx">
|
||||
<strong>{{ t.title }}</strong>: {{ t.desc }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 1. Lebensstil
|
||||
|
||||
### 1.1 Morgenritual-Aktivierer
|
||||
|
||||
Ein kleiner Begleiter, der morgens aus Wetter, Kalender und Stimmung eine Mini-Routine baut (5-10 Minuten) und den Start in den Tag leichter macht.
|
||||
|
||||
### 1.2 Wohlfuehl-Atmosphaere fuer Single-Haushalte
|
||||
|
||||
Licht, Musik, Duft, kurze Impulse. Ziel ist ein spuerbar "waermeres" Zuhause ohne viel Aufwand.
|
||||
|
||||
## 2. Emotion
|
||||
|
||||
### 2.1 Nachtlicher Zuhoerer
|
||||
|
||||
Ein sicherer Raum fuer Gedanken. Keine Bewertung, klare Grenzen, Fokus auf Empathie und Reflexion.
|
||||
|
||||
### 2.2 Angstbewaeltigungs-Atemtrainer
|
||||
|
||||
Wenn Stress hoch ist: Atem, Grounding, kurze Uebungen. Einfach, schnell, wiederholbar.
|
||||
|
||||
## 3. Unterhaltung
|
||||
|
||||
### 3.1 Immersives Mystery-Adventure
|
||||
|
||||
Eine Story, die sich an Entscheidungen erinnert, Charaktere mit Kontinuitaet, kurze Sessions.
|
||||
|
||||
### 3.2 Personalisierter Podcast-Generator
|
||||
|
||||
Taeglicher 5-Minuten-Clip aus deinem Themenmix: Zusammenfassung, Einordnung, naechste Schritte.
|
||||
|
||||
## 4. Wachstum
|
||||
|
||||
### 4.1 Gamifizierter Gewohnheits-Coach
|
||||
|
||||
Quest-System statt ToDo-Liste. Kleine Belohnungen, klare Progression, weniger Schuldgefuehl.
|
||||
|
||||
### 4.2 Lern-Sparringspartner
|
||||
|
||||
Stellt Fragen, baut einen Plan, trackt Fortschritt. Fokus auf "dranbleiben".
|
||||
|
||||
## 5. Sozial
|
||||
|
||||
### 5.1 Eisbrecher-Thema-Generator
|
||||
|
||||
Passende Themen fuer Situationen (Date, Team-Dinner, Networking) plus kurze Follow-ups.
|
||||
|
||||
### 5.2 Social-Media-Copywriter
|
||||
|
||||
Aus Foto + Kontext -> 3 Textvarianten in unterschiedlichem Ton (locker, sachlich, poetisch).
|
||||
|
||||
## 6. Reise
|
||||
|
||||
### 6.1 City-Walk-Entdeckerfuehrer
|
||||
|
||||
Routen mit Timing (Sonne/Andrang), kleine Geschichten und "warum genau hier".
|
||||
|
||||
### 6.2 Reise-Tagebuch-Generator
|
||||
|
||||
Aus Notizen/Fotos -> ein sauberer Bericht, inklusive Highlights und Learnings.
|
||||
|
||||
## 7. Gesundheit
|
||||
|
||||
### 7.1 Schlafqualitaet-Optimierer
|
||||
|
||||
Routine, Umgebung, kleine Schritte. Fokus: weniger Friktion, mehr Kontinuitaet.
|
||||
|
||||
### 7.2 Gesunde-Kueche-Inspiration
|
||||
|
||||
Rezepte nach Zeit, Zutaten und Ziel. Einfach starten, nicht ueberfordern.
|
||||
|
||||
---
|
||||
|
||||
## Notizen zum Produktdenken fuer C-End
|
||||
|
||||
1. Nutzer kaufen selten "Funktionen". Sie kaufen Gefuehl: Sicherheit, Ruhe, Zugehoerigkeit, Neugier, Kontrolle.
|
||||
2. Gute C-End Produkte sind leicht, ritualisierbar und liefern schnell einen kleinen Nutzen.
|
||||
3. Copy und UI transportieren Suggestion: "Du bist nicht allein", "Das ist machbar", "Du machst Fortschritt".
|
||||
|
||||
<RelatedArticlesSection />
|
||||
|
||||
@@ -0,0 +1,544 @@
|
||||
---
|
||||
title: 'Double-Diamond-Modell: Erst das Richtige tun, dann die Dinge richtig tun'
|
||||
description: 'Ein Einführungsartikel zum Double-Diamond-Modell für Einsteiger. Verstehen Sie die vier Phasen Discover, Define, Develop und Deliver und vermeiden Sie es, voreilig Prototypen zu erstellen, bevor das Problem klar ist.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>1,5 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# Double-Diamond-Modell: Erst das Richtige tun, dann die Dinge richtig tun
|
||||
|
||||
<a id="top-dd"></a>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Double Diamond', 'Design Thinking', 'Anforderungsanalyse', 'Lösungsdesign']"
|
||||
coreOutput="1 klarere Problemdefinition und 1 geeigneterer Validierungsansatz"
|
||||
expectedOutput="Nicht mehr sofort Prototypen zeichnen, sondern erst das Problem durchdenken und dann Lösungen vergleichen"
|
||||
>
|
||||
|
||||
Viele Menschen, die zum ersten Mal ein Produkt entwickeln, fallen nicht in die Falle "nicht hart genug gearbeitet", sondern in die, zu schnell in die Lösung einzusteigen.
|
||||
|
||||
Sobald eine Richtung im Kopf auftaucht, beginnen sie darüber nachzudenken, wie die Seiten aussehen sollen, wo die Buttons hingehören, ob sie AI integrieren sollten, ob sie eine Login-Registrierung brauchen und welches Tool für den Prototyp geeignet ist. Nach all der Arbeit stellen sie fest, dass die grundlegendste Frage überhaupt nicht geklärt ist: Hat der Nutzer wirklich dieses Problem? Lohnt es sich, dieses Problem jetzt zu lösen? Sie dachten, sie würden das Projekt vorantreiben, aber eigentlich beschleunigen sie nur in die falsche Richtung.
|
||||
|
||||
Das Double-Diamond-Modell wurde genau entwickelt, um diese Situation zu vermeiden.
|
||||
|
||||
Seine wertvollste Erinnerung ist: **"Die richtigen Dinge tun" und "die Dinge richtig tun" sind zwei völlig verschiedene Phasen.** Wenn Sie noch nicht einmal das Problem verstanden haben und schon eilig einen Prototypen erstellen, machen Sie meist nur die falsche Richtung vollständiger.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Minimales SOP
|
||||
**Ziel**: Nach dem Lesen wissen Sie besser, wann Sie zuerst über das Problem nachdenken sollten und wann es an der Zeit ist, Lösungen und Prototypen zu entwerfen. So vermeiden Sie es, von Anfang an sehr fleißig in die falsche Richtung zu arbeiten.
|
||||
|
||||
**Aktionspunkte**: Gehen Sie nacheinander die vier Schritte `Discover → Define → Develop → Deliver` durch und tun Sie in jedem Schritt nur das, was in dieser Phase ansteht.
|
||||
|
||||
**Ergebnis**: Sie erhalten eine klarere Problemdefinition, mehrere vergleichbare Lösungen und eine überprüfbare minimale Version.
|
||||
|
||||
**Stichwortsprünge**: [Was ist das Double-Diamond-Modell](#dd-what) · [Erste Diamant](#dd-first) · [Wie AI Ihnen hilft](#dd-ai)
|
||||
:::
|
||||
|
||||
## Was Sie lernen werden
|
||||
|
||||
1. Was das Double-Diamond-Modell ist und warum es sich für Einsteiger in der Produktentwicklung eignet
|
||||
2. Was die vier Phasen Discover, Define, Develop und Deliver jeweils bewirken
|
||||
3. Wie man unterscheidet: "Soll ich weiter divergieren?" oder "Soll ich jetzt konvergieren?"
|
||||
4. Wie man das Double-Diamond-Modell bei AI-Produkten, Prototyp-Design und Anforderungsvalidierung einsetzt
|
||||
|
||||
<a id="dd-what"></a>
|
||||
## [1. Was ist das Double-Diamond-Modell überhaupt?](#top-dd)
|
||||
|
||||
Das Double-Diamond-Modell ist ein klassischer Designprozess-Rahmen, der vom britischen **Design Council** popularisiert wurde. Es stellt einen vollständigen Design- und Innovationsprozess als zwei aufeinanderfolgende Diamanten dar.
|
||||
|
||||
Warum "Diamanten"? Weil jeder Diamant zwei entgegengesetzte, aber gleichermaßen wichtige Aktionen enthält:
|
||||
|
||||
- **Divergieren**: Zunächst den Horizont erweitern und mehr Möglichkeiten betrachten
|
||||
- **Konvergieren**: Dann den Bereich verengen, Entscheidungen treffen und Prioritäten setzen
|
||||
|
||||
Der gesamte Prozess besteht aus vier Schritten:
|
||||
|
||||
1. **Discover**: Nutzer, Probleme, Umfeld und Markt umfassend verstehen
|
||||
2. **Define**: Aus den vielen Informationen das wirklich löswerte Kernproblem herausfiltern
|
||||
3. **Develop**: Mehrere Lösungsansätze um das Kernproblem divergieren
|
||||
4. **Deliver**: Auswählen, Prototypen erstellen, testen und die geeignetste Lösung liefern
|
||||
|
||||
Wenn man diese vier Schritte auf einen einprägsamen Satz komprimiert:
|
||||
|
||||
- **Erster Diamant**: Zunächst klären, welches Problem überhaupt gelöst werden soll
|
||||
- **Zweiter Diamant**: Dann entscheiden, mit welchem Ansatz es gelöst werden soll
|
||||
|
||||
Das lässt sich auch so ausdrücken:
|
||||
|
||||
- **Erster Diamant: Die richtigen Dinge tun**
|
||||
- **Zweiter Diamant: Die Dinge richtig tun**
|
||||
|
||||
## 2. Warum das Double-Diamond-Modell besonders für Einsteiger geeignet ist
|
||||
|
||||
Der typische Rhythmus von Einsteigern bei der Produktentwicklung sieht oft so aus:
|
||||
|
||||
- Eine Idee kommt auf
|
||||
- Man findet die Richtung toll
|
||||
- Sofort Prototypen zeichnen
|
||||
- Beim Erstellen werden es immer mehr Funktionen
|
||||
- Am Ende weiß man nicht mehr, welches Problem man eigentlich löst
|
||||
|
||||
Der Wert des Double-Diamond-Modells liegt nicht darin, den Prozess komplizierter zu machen, sondern darin, **"das Problem verstehen" und "die Lösung entwerfen" voneinander zu trennen**.
|
||||
|
||||
Das klingt banal, ist aber in der Praxis äußerst wichtig. Denn viele gescheiterte Produkte scheitern nicht an mangelndem Engagement, sondern daran, dass:
|
||||
|
||||
- Das falsche Problem gewählt wurde
|
||||
- Die Nutzer missverstanden wurden
|
||||
- Zu früh eine Lösung festgelegt wurde
|
||||
- Viel Zeit in Detailveredelung investiert wurde, ohne die Richtung zu validieren
|
||||
|
||||
Das Double-Diamond-Modell erinnert Sie ständig daran:
|
||||
|
||||
- Nicht davon ausgehen, dass das Problem bereits geklärt ist, nur weil die Idee naheliegt
|
||||
- Nicht davon ausgehen, dass die Lösung es wert ist, umgesetzt zu werden, nur weil sie machbar ist
|
||||
- Nicht davon ausgehen, dass die Nutzer sie wirklich brauchen, nur weil der Prototyp komplett aussieht
|
||||
|
||||
<a id="dd-first"></a>
|
||||
## [3. Erster Diamant: Die richtigen Dinge tun](#top-dd)
|
||||
|
||||
Der erste Diamant konzentriert sich auf **das Problem selbst**, nicht auf die Lösung.
|
||||
|
||||
Man kann ihn in einem Satz zusammenfassen: **Nicht sofort loslegen, sondern zuerst klären, ob es sich überhaupt lohnt.**
|
||||
|
||||
### 3.1 Discover: Zunächst den Problemraum öffnen
|
||||
|
||||
Die Kernaufgabe der Discover-Phase ist **umfassende Recherche, keine schnellen Schlüsse**.
|
||||
|
||||
Typische Tätigkeiten in diesem Schritt:
|
||||
|
||||
- Beobachten, wie Nutzer in echten Szenarien agieren
|
||||
- Potenzielle Nutzer interviewen und herausfinden, wann sie zuletzt ein Problem hatten
|
||||
- Beobachten, wie sie sich aktuell behelfen
|
||||
- Wettbewerbs- und Alternativlösungen analysieren
|
||||
- Markt-, Prozess-, Restriktions- und Wertschöpfungsinformationen sammeln
|
||||
|
||||
Viele glauben, Discover bedeute einfach "mehr Material lesen". Wichtiger ist jedoch: **Sie müssen Menschen und Szenarien verstehen, nicht nur Informationen sammeln.**
|
||||
|
||||
Wenn Sie beispielsweise ein Tool entwickeln möchten, das "AI beim Erstellen von Meeting-Protokollen hilft", sollten Sie in der Discover-Phase vor allem Folgendes klären:
|
||||
|
||||
- Was Nutzer nach Meetings am meisten belastet
|
||||
- Ist das Aufzeichnen das Problem, das Zusammenfassen oder das Weiterleiten
|
||||
- Schreiben sie selbst, lassen sie Praktikanten schreiben, hören sie Aufnahmen ab oder verzichten sie ganz auf Protokolle
|
||||
- Welche Meeting-Szenarien Protokolle am meisten benötigen und welche überhaupt nicht
|
||||
|
||||
Das wichtigste Ziel dieses Schritts ist nicht, eine Antwort zu finden, sondern **nicht zu früh zu glauben, man hätte bereits die Antwort.**
|
||||
|
||||
### 3.2 Define: Aus den Informationen das Kernproblem destillieren
|
||||
|
||||
Wenn Discover das Öffnen des Horizonts ist, ist Define das Einengen.
|
||||
|
||||
In der Define-Phase geht es nicht darum, alle Beobachtungen zu behalten, sondern zu fragen:
|
||||
|
||||
- Welches Problem ist wirklich am wichtigsten und sollte zuerst gelöst werden
|
||||
- Welches Problem am häufigsten auftritt, am schmerzhaftesten ist und den größten Wert bietet
|
||||
- Auf welches Szenario wir uns in der ersten Version konzentrieren sollten
|
||||
|
||||
Der Kern dieses Schritts besteht darin, ein breites Thema auf eine klare Problemdefinition zu verdichten.
|
||||
|
||||
Vielleicht sagen Sie zunächst:
|
||||
|
||||
> Ich möchte ein AI-Tool entwickeln, das die Meeting-Effizienz steigert.
|
||||
|
||||
In der Define-Phase könnte eine bessere Formulierung lauten:
|
||||
|
||||
> Wir lösen zunächst das Problem, dass Projektteams nach 30 bis 60 Minuten dauernden Kooperationsmeetings nicht in der Lage sind, innerhalb von 10 Minuten ein Protokoll mit Aufgaben, Verantwortlichen und Fristen zu erstellen.
|
||||
|
||||
Jetzt wird das Problem konkreter:
|
||||
|
||||
- Wer sind die Nutzer
|
||||
- Was ist das Szenario
|
||||
- Wo liegt der Engpass
|
||||
- Was ist das Erfolgskriterium
|
||||
|
||||
Das Wesen von Define ist: **Von "es gibt viele Probleme" konvergieren zu "welches Problem lösen wir diesmal zuerst".**
|
||||
|
||||
## 4. Zweiter Diamant: Die Dinge richtig tun
|
||||
|
||||
Erst wenn der erste Diamant abgeschlossen ist, sollten Sie in den zweiten Diamanten eintreten. Denn jetzt lösen Sie keine vage Richtung mehr, sondern ein konkretes, bereits eingegrenztes Problem.
|
||||
|
||||
### 4.1 Develop: Lösungsansätze um das Kernproblem divergieren
|
||||
|
||||
Der Fokus der Develop-Phase liegt auf **der Exploration mehrerer möglicher Lösungen für dasselbe Problem**.
|
||||
|
||||
Beachten Sie: Diese Divergenz unterscheidet sich von der Discover-Phase.
|
||||
|
||||
- Die Divergenz in Discover erforscht den Problemraum
|
||||
- Die Divergenz in Develop erforscht den Lösungsraum
|
||||
|
||||
Beim Meeting-Protokoll-Beispiel könnten Sie in der Develop-Phase Folgendes in Betracht ziehen:
|
||||
|
||||
- Web-Tool oder Meeting-Plugin
|
||||
- Hochgeladene Audioaufzeichnung nachträglich verarbeiten oder Echtzeit-Mitschrift
|
||||
- Nur Zusammenfassung oder Fokus auf Aufgabenextraktion
|
||||
- Persönliche Effizienz oder Team-Synchronisation betonen
|
||||
- Freie Bearbeitung für Nutzer oder direkte strukturierte Vorlage ausgeben
|
||||
|
||||
Dieser Schritt eignet sich gut für Brainstorming und die Zusammenarbeit im Team.
|
||||
|
||||
Aber es gibt eine Voraussetzung: **Alle Lösungen müssen demselben definierten Problem dienen.**
|
||||
Wenn das Problem nicht klar definiert ist, wird Develop schnell wieder zu einem ungeordneten Sammelsurium von Funktionen.
|
||||
|
||||
### 4.2 Deliver: Lösung auswählen, Prototyp erstellen, testen und liefern
|
||||
|
||||
Deliver ist die Konvergenzphase im zweiten Diamanten.
|
||||
|
||||
Jetzt geht es nicht mehr darum, weiter nachzudenken, sondern zu entscheiden:
|
||||
|
||||
- Welcher Ansatz passt am besten zur aktuellen Phase
|
||||
- Welche Version am kleinsten, aber am nützlichsten ist
|
||||
- Welche Funktionen zuerst entwickelt werden müssen und welche später kommen können
|
||||
- Wie man Prototypen erstellt, testet und in kleinem Rahmen validiert
|
||||
|
||||
Viele glauben, Deliver bedeute einfach "launch". Genauer gesagt bedeutet es: **Eine Lösung in etwas Überprüfbares, Validierbares und Iterierbares verwandeln.**
|
||||
|
||||
Das kann sein:
|
||||
|
||||
- Ein Low-Fidelity-Flussdiagramm
|
||||
- Ein Figma-Prototyp
|
||||
- Ein lauffähiger MVP
|
||||
- Ein kleiner Nutzer-Test
|
||||
- Eine iterative Version nach echtem Feedback
|
||||
|
||||
Der Fokus von Deliver liegt nicht auf "perfekter Auslieferung", sondern darauf, **die Lösung so schnell wie möglich in einer realen Umgebung zu validieren.**
|
||||
|
||||
## 5. Eine einprägsame Übersichtstabelle
|
||||
|
||||
Wenn Sie die vier Phasen immer wieder durcheinanderbringen, merken Sie sich einfach diese Version:
|
||||
|
||||
| Phase | Was Sie tun | Schlüsselwörter | Typische Ergebnisse |
|
||||
| --- | --- | --- | --- |
|
||||
| Discover | Problem verstehen | Recherche, Beobachtung, Interviews, Informationssammlung | Nutzererkenntnisse, Szenarienotizen, Problemliste |
|
||||
| Define | Problem definieren | Destillieren, Fokussieren, Priorisieren, Problem umformulieren | Problemdefinition, Prioritäten, MVP-Ansatz |
|
||||
| Develop | Lösungen erkunden | Brainstorming, Vergleichen, Co-Kreation, Prototyp-Ideen | Lösungsliste, Flussskizzen, Prototyp-Richtung |
|
||||
| Deliver | Lösung validieren | Prototyp, Testen, Iterieren, Ausliefern | Prototyp, Test-Feedback, optimierte Version |
|
||||
|
||||
Noch kompakter:
|
||||
|
||||
- **Discover / Define**: "Die richtigen Dinge tun"
|
||||
- **Develop / Deliver**: "Die Dinge richtig tun"
|
||||
|
||||
## 6. Die häufigsten Missverständnisse zum Double-Diamond-Modell
|
||||
|
||||
### 6.1 Direkt zu Deliver springen, ohne Discover
|
||||
|
||||
Das ist der häufigste Fehler. Viele beginnen sofort mit dem Zeichnen von Prototypen, dem Schreiben von PRDs, dem Anbinden von Modellen und dem Erstellen von Seiten, sobald sie eine Idee haben.
|
||||
|
||||
Das Problem ist nicht, dass Sie nicht fleißig genug arbeiten, sondern dass Sie möglicherweise nicht einmal bestätigt haben, ob sich das Problem überhaupt zu lösen lohnt.
|
||||
|
||||
### 6.2 Lange Discover-Phase, aber nie Define
|
||||
|
||||
Ein anderer Extremfall: ständig recherchieren, Material lesen, Interviews führen, aber sich nicht trauen zu konvergieren.
|
||||
|
||||
Das Double-Diamond-Modell soll Sie nicht endlos divergieren lassen, sondern erinnert Sie: Nach der Divergenz müssen Sie in die Entscheidungs- und Priorisierungsphase übergehen.
|
||||
|
||||
### 6.3 Nach Define das Problem heimlich ändern
|
||||
|
||||
Viele Teams ändern in der Develop-Phase die Problemdefinition, weil ein bestimmter Ansatz einfacher umsetzbar ist.
|
||||
|
||||
Das ist gefährlich. Denn Sie lösen möglicherweise gar kein Problem, sondern suchen nur Rechtfertigungen für Ihren bevorzugten Ansatz.
|
||||
|
||||
### 6.4 Deliver als "kompletter Launch" missverstehen
|
||||
|
||||
Deliver bedeutet nicht, dass das fertige Produkt komplett sein muss. Oft ist ein testbarer Prototyp oder eine kleine Nutzererprobung bereits ein gutes Deliverable.
|
||||
|
||||
## 7. Wie das Double-Diamond-Modell bei AI-Produkten eingesetzt wird
|
||||
|
||||
AI-Produkte neigen besonders zur "Fähigkeiten zuerst"-Falle, weil die Modellfähigkeiten so verlockend aussehen. Man möchte direkt darüber nachdenken:
|
||||
|
||||
- Soll ich multimodal integrieren
|
||||
- Soll ich einen Agenten erstellen
|
||||
- Soll ich einen Workflow hinzufügen
|
||||
- Soll ich Sprache, Bilder oder Websuche anbinden
|
||||
|
||||
Das Double-Diamond-Modell zwingt Sie jedoch, zuerst zu fragen:
|
||||
|
||||
- Wo genau hängen die Nutzer fest
|
||||
- Muss dieses Problem zwingend mit AI gelöst werden
|
||||
- Wenn man keine AI verwendet, was genau ist am aktuellen Ansatz am schlechtesten
|
||||
- Wenn AI hinzugefügt wird, was ist der zentrale Fortschritt
|
||||
|
||||
Das hilft Ihnen, eine häufige Situation zu vermeiden: **Starke Fähigkeiten, schwacher Wert.**
|
||||
|
||||
Ein praktischer Ablauf:
|
||||
|
||||
1. In der Discover-Phase beobachten, wie Nutzer Aufgaben aktuell erledigen
|
||||
2. In der Define-Phase das schmerzhafteste Szenario als klare Problemdefinition formulieren
|
||||
3. In der Develop-Phase vergleichen, welche AI-Fähigkeiten am besten zu diesem Problem passen
|
||||
4. In der Deliver-Phase eine Minimalversion erstellen und von echten Nutzern testen lassen
|
||||
|
||||
## 8. Eine direkt anwendbare Double-Diamond-Vorlage
|
||||
|
||||
Wenn Sie an Ihrem eigenen Produkt arbeiten, können Sie in dieser Reihenfolge vorgehen:
|
||||
|
||||
### Discover
|
||||
|
||||
- Wer sind die Nutzer, die ich beobachte?
|
||||
- Wann hatten sie zuletzt dieses Problem?
|
||||
- Wie lösen sie es derzeit?
|
||||
- Was sie am meisten nervt, am langsamsten ist und sie am wenigsten beruhigt?
|
||||
|
||||
### Define
|
||||
|
||||
- Welches dieser Probleme ist am wertvollsten und sollte zuerst gelöst werden?
|
||||
- Welches Szenario ist am häufigsten oder am kritischsten?
|
||||
- Wen und was bedienen wir in der ersten Version ausschließlich?
|
||||
- Wie ändert sich der Nutzerstatus, wenn das Problem erfolgreich gelöst ist?
|
||||
|
||||
### Develop
|
||||
|
||||
- Welche möglichen Lösungen gibt es für dieses Problem?
|
||||
- Welche Lösungen sind am leichtesten, am schnellsten und am einfachsten zu validieren?
|
||||
- Was muss zwingend gemacht werden, was kann später erfolgen?
|
||||
|
||||
### Deliver
|
||||
|
||||
- Was ist das Minimalste, das wir liefern können, um diese Richtung zu validieren?
|
||||
- Ist es ein Flussdiagramm, ein Prototyp oder ein MVP?
|
||||
- Wen müssen wir zum Testen einladen?
|
||||
- Wie entscheiden wir nach dem Test, ob wir weitermachen, ändern oder abbrechen?
|
||||
|
||||
## 9. Ein Beispiel, das auch Einsteiger verstehen
|
||||
|
||||
Angenommen, Sie möchten ein AI-Tool entwickeln, "das Hochschulabsolventen bei der Vorbereitung von Lebensläufen für Bewerbungen hilft".
|
||||
|
||||
Viele würden sofort in den zweiten Diamanten springen und über Folgendes nachdenken:
|
||||
|
||||
- Ein-Klick-Verschönerung
|
||||
- Intelligentes Umschreiben
|
||||
- Automatisches JD-Matching
|
||||
- Generierung von Selbstvorstellungen
|
||||
|
||||
Nach dem Double-Diamond-Modell wäre ein besserer Prozess:
|
||||
|
||||
### Erster Diamant
|
||||
|
||||
**Discover**
|
||||
|
||||
- Mit frischen Absolventen darüber sprechen, wann sie zuletzt einen Lebenslauf geändert haben
|
||||
- Beobachten, wie sie ihren alten Lebenslauf in eine neue Version umwandeln
|
||||
- Verstehen, ob sie am meisten von "nicht wissen, was sie schreiben sollen", "nicht wissen, wie sie ändern sollen" oder "nicht beurteilen können, ob es gut genug ist" betroffen sind
|
||||
|
||||
**Define**
|
||||
|
||||
- Zu einer spezifischeren Problemdefinition konvergieren:
|
||||
- Nicht "Studierende können keine Lebensläufe erstellen"
|
||||
- Sondern "Studierende bei der ersten Bewerbung um ein Praktikum können ihre bisherigen Erfahrungen nicht in Formulierungen umwandeln, die zur Stellenbeschreibung passen, und verzögern deshalb ihre Bewerbung"
|
||||
|
||||
### Zweiter Diamant
|
||||
|
||||
**Develop**
|
||||
|
||||
- Mehrere Lösungsansätze erwägen: Vorlagenbibliothek, AI-Umschreibung, Stellenvergleich, Lebenslauf-Bewertung, Fallbeispiele
|
||||
|
||||
**Deliver**
|
||||
|
||||
- Erste Version nur: "Erfahrungs-Bullet-Points basierend auf der Stellenbeschreibung umschreiben"
|
||||
- 5 Studierenden zum Test geben und prüfen, ob sie schneller die erste Version ihres Lebenslaufs einreichen
|
||||
|
||||
Sie werden feststellen: Wenn der erste Diamant gründlich bearbeitet wurde, wird der zweite viel klarer.
|
||||
|
||||
## 10. Zusammenfassung
|
||||
|
||||
Die größte Stärke des Double-Diamond-Modells liegt darin, ein Chaos in vier klarere Aktionen zu zerlegen:
|
||||
|
||||
- Erst divergieren, um das Problem zu verstehen
|
||||
- Dann konvergieren, um das Problem zu definieren
|
||||
- Dann divergieren, um Lösungen zu erkunden
|
||||
- Schließlich konvergieren, um die Lösung zu liefern
|
||||
|
||||
Es macht Sie nicht langsamer, sondern hilft Ihnen, **viele Umwege zu vermeiden, die beschäftigt aussehen, aber in die falsche Richtung führen.**
|
||||
|
||||
Besonders in der AI-Ära, in der das Erstellen von Dingen immer schneller wird, ist das Double-Diamond-Modell sogar noch wichtiger. Denn wenn "etwas zu bauen" immer einfacher wird, wird die wirklich seltene Fähigkeit: **Lösen Sie ein Problem, das es wert ist, gelöst zu werden, und tun Sie es auf angemessene Weise.**
|
||||
|
||||
Merken Sie sich nur diesen einen Satz:
|
||||
|
||||
**Erst die richtigen Dinge tun, dann die Dinge richtig tun.**
|
||||
|
||||
<a id="dd-ai"></a>
|
||||
## [11. Wie Sie AI nutzen können, um den Double-Diamond-Prozess zu durchlaufen](#top-dd)
|
||||
|
||||
Das Double-Diamond-Modell ist kein AI-Tool, aber AI eignet sich hervorragend als "Beschleuniger" in den vier Phasen. Der Schlüssel liegt nicht darin, AI für Sie entscheiden zu lassen, sondern darin, sie zu nutzen, um Ihren Horizont zu erweitern, Informationen zu ordnen, Lösungen zu vergleichen und Validierungsmaterial zu erstellen.
|
||||
|
||||
### 11.1 In der Discover-Phase: AI für eine erste Informationsgrundlage nutzen
|
||||
|
||||
Vor offiziellen Interviews und Recherche können Sie AI zunächst einen leichten Problemaufklärungsscan durchführen lassen:
|
||||
|
||||
- Welche gängigen Alternativlösungen gibt es auf dem Markt
|
||||
- Worauf Nutzer in öffentlichen Communitys am häufigsten klagen
|
||||
- In welchen Szenarien und bei welchen Zielgruppen dieses Problem auftritt
|
||||
- Was bestehende Produkte übersehen
|
||||
|
||||
Dieser Schritt kann echte Recherche nicht ersetzen, eignet sich aber gut, um schnell eine Problem-Landkarte zu erstellen.
|
||||
|
||||
Ein einfacher Einsteiger-Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Ich möchte ein Tool entwickeln, das Studierenden beim Umschreiben von Lebensläufen hilft.
|
||||
Bitte schlage nicht sofort Funktionen vor, sondern zeige zuerst, welche Schwierigkeiten in diesem Problem am häufigsten auftreten.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Erste Problem-Landkarte:
|
||||
|
||||
1. Man weiß nicht, welche Erfahrungen man erwähnen sollte
|
||||
2. Man weiß nicht, wie man den Lebenslauf auf eine bestimmte Stelle anpasst
|
||||
3. Nach vielen Überarbeitungen ist man sich immer noch nicht sicher, ob es gut genug ist
|
||||
4. Man braucht jemanden zum Gegenlesen, möchte aber nicht ständig um Gefälligkeiten bitten
|
||||
5. Wegen der Unsicherheit verschobt man den Lebenslauf immer wieder
|
||||
```
|
||||
|
||||
Diese Ausgabe soll Ihnen nicht die Entscheidung abnehmen, sondern Ihnen den schnelleren Einstieg in Discover ermöglichen.
|
||||
|
||||
### 11.2 In der Define-Phase: AI beim Konvergieren der Problemdefinition unterstützen
|
||||
|
||||
Nachdem man viele Informationen gesammelt hat, ist das Schwierigste oft, das Problem in einen wirklich klaren Satz zu verdichten. Sie können Ihre Recherche-Notizen an AI übergeben und sie bitten, daraus mehrere Problemdefinitionen zu komprimieren:
|
||||
|
||||
```text
|
||||
Hier sind die Nutzer-Feedbacks und Recherche-Notizen, die ich in der Discover-Phase gesammelt habe:
|
||||
[Inhalt einfügen]
|
||||
|
||||
Bitte hilf mir bei drei Dingen:
|
||||
1. Die häufigsten Problemmuster zusammenfassen
|
||||
2. Nach Häufigkeit, Schmerzintensität und Validierbarkeit 3 priorisierte Probleme identifizieren
|
||||
3. Jedes Problem als konkrete Problemdefinition formulieren
|
||||
```
|
||||
|
||||
So kommen Sie leichter in die Define-Phase, anstatt im Zustand "es gibt so viele Probleme" stecken zu bleiben.
|
||||
|
||||
Sie können die Eingabe auch sehr einfach formulieren:
|
||||
|
||||
```text
|
||||
Die Probleme, die ich bisher gesammelt habe:
|
||||
1. Man weiß nicht, was man im Lebenslauf schreiben soll
|
||||
2. Man weiß nicht, wie man ihn anpasst
|
||||
3. Man hat nie das Gefühl, er sei gut genug, und traut sich nicht, ihn abzuschicken
|
||||
|
||||
Bitte sage mir, welches Problem sich am besten für die erste Version eignet.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Empfohlenes Prioritätsproblem:
|
||||
|
||||
"Studierende bei ihrer ersten Praktikumsbewerbung sind sich nicht sicher, ob ihr Lebenslauf bereit zum Abschicken ist, überarbeiten ihn endlos und verschoben die Bewerbung."
|
||||
|
||||
Gründe:
|
||||
1. Dieses Problem ist konkreter
|
||||
2. Es erklärt das Verschleppungsverhalten
|
||||
3. Es ist einfacher, eine kleine Version zur Validierung zu entwerfen
|
||||
```
|
||||
|
||||
Diese Art von Ausgabe ist sehr nützlich, denn sie hilft, aus einer Vielzahl vager Probleme eine Definition herauszudestillieren, die als MVP-Startpunkt dienen kann.
|
||||
|
||||
### 11.3 In der Develop-Phase: AI nutzen, um mehrere Lösungen zu divergieren
|
||||
|
||||
Viele verharren nach der Problemdefinition auf dem ersten Lösungsansatz, der ihnen in den Sinn kommt. AI eignet sich hervorragend dafür, Sie zur Divergenz zu zwingen:
|
||||
|
||||
```text
|
||||
Ich habe ein Kernproblem definiert: [Ihre Problemdefinition]
|
||||
Bitte gib mir nicht sofort eine Endlösung, sondern schlage aus folgenden Perspektiven jeweils 2-3 Lösungsrichtungen vor:
|
||||
1. Das leichtgewichtigste MVP
|
||||
2. Der am besten zur Bedarfsvalidierung geeignete Ansatz
|
||||
3. Der erfahrungssteigernde Ansatz
|
||||
4. Ein Ansatz ohne AI
|
||||
5. Ein Ansatz mit AI
|
||||
Vergleiche schließlich die Vorteile, Risiken und Validierungskosten jedes Ansatzes.
|
||||
```
|
||||
|
||||
So werden Sie nicht zu früh auf einen einzigen Ansatz festgelegt.
|
||||
|
||||
Ein einfacher Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Meine aktuelle Problemdefinition lautet:
|
||||
"Studierende sind sich nicht sicher, ob ihr Lebenslauf abschickbereit ist, und verschoben ihn deshalb ständig."
|
||||
|
||||
Bitte schlage mir 4 verschiedene Lösungsansätze vor, nicht nur einen.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Ansatz 1: Checkliste für abschickbereite Lebensläufe
|
||||
Ansatz 2: Gezieltes Umschreiben basierend auf der Stellenbeschreibung
|
||||
Ansatz 3: Lebenslauf hochladen und Risikohinweise erhalten
|
||||
Ansatz 4: Hervorragende Beispiele zum Vergleich zeigen
|
||||
```
|
||||
|
||||
Jetzt können Sie leichter "Lösungen vergleichen", anstatt von Anfang an nur auf AI-Umschreibung zu starren.
|
||||
|
||||
### 11.4 In der Deliver-Phase: AI beim Generieren von Prototyp-Text und Testmaterial unterstützen
|
||||
|
||||
Wenn Sie in die Deliver-Phase eintreten, ist AI hervorragend dafür geeignet, folgende Aufgaben zu beschleunigen:
|
||||
|
||||
- Seitentexte für Low-Fidelity-Prototypen generieren
|
||||
- Nutzer-Testskripte erstellen
|
||||
- Mehrere vergleichbare Versionen von &Uberschriften, Buttons und Beschreibungen erstellen
|
||||
- Feedback und Problemlisten nach Tests zusammenfassen
|
||||
|
||||
Beispielsweise könnten Sie AI bitten, ein 20-minütiges Nutzer-Testskript zu erstellen oder 5 Nutzer-Feedbacks in "weitermachen / Richtung ändern / pausieren" zu kategorisieren.
|
||||
|
||||
Ein minimaler Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Ich habe einen einfachen Prototyp erstellt:
|
||||
Der Nutzer lädt einen Lebenslauf hoch und das System zeigt an, welche Stellen noch nicht bewerbungstauglich sind.
|
||||
|
||||
Bitte generiere ein 15-minütiges Nutzer-Testskript.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
15-minütiges Testskript:
|
||||
|
||||
1. Bitte den Nutzer zunächst, seine letzte Lebenslauferfahrung zu beschreiben
|
||||
2. Den Nutzer den Lebenslauf selbstständig hochladen lassen
|
||||
3. Beobachten, ob er die Feedback-Ergebnisse versteht
|
||||
4. Fragen: Welche Hinweise waren am hilfreichsten, welche verwirrend
|
||||
5. Fragen: Würden Sie das Tool vor der nächsten Bewerbung erneut nutzen
|
||||
```
|
||||
|
||||
Diese Art von Ausgabe ist sehr praktisch, denn sie hilft, von "Ich habe den Prototyp fertig" zu "Wie teste ich als Nächstes" zu gelangen.
|
||||
|
||||
### 11.5 AI als "Phasen-Wächter" einsetzen
|
||||
|
||||
Das häufigste Problem beim Double-Diamond-Modell ist, dass Menschen Phasen überspringen. Sie können AI direkt als Wächter fungieren lassen, der Sie erinnert, wo Sie sich gerade befinden:
|
||||
|
||||
```text
|
||||
Bitte spiele die Rolle eines Produktprozess-Coachs.
|
||||
Hier ist mein aktueller Projektstatus: [Ihre Beschreibung]
|
||||
Bitte beurteile, ob ich mich eher in Discover, Define, Develop oder Deliver befinde.
|
||||
Und sage mir:
|
||||
1. Ob ich zu früh in die nächste Phase gesprungen bin
|
||||
2. Welche Aktion in der aktuellen Phase am wichtigsten nachzuholen ist
|
||||
3. Welche Dinge ich jetzt noch nicht tun sollte
|
||||
```
|
||||
|
||||
Das ist besonders hilfreich für Einsteiger, da man leicht dazu neigt, "Prototypen zu zeichnen, bevor man das Problem durchdacht hat".
|
||||
|
||||
## Assignments
|
||||
|
||||
Bitte bearbeiten Sie die folgenden Aufgaben basierend auf dem obigen Inhalt:
|
||||
|
||||
1. Wählen Sie eine Produktidee, an der Sie kürzlich gedacht haben, und erstellen Sie einen Entwurf für die vier Schritte Discover, Define, Develop, Deliver
|
||||
2. In der Define-Phase: Zwingen Sie sich, das Problem auf einen konkreten Satz zu verdichten
|
||||
3. In der Develop-Phase: Listen Sie mindestens 3 verschiedene Lösungsansätze auf, anstatt nur den ersten Gedanken zu verfolgen
|
||||
4. In der Deliver-Phase: Beschreiben Sie eine minimale validierbare Version, die Sie innerhalb einer Woche liefern können
|
||||
|
||||
## Weiterführende Literatur
|
||||
|
||||
Dieser Artikel bezieht sich hauptsächlich auf die offiziellen Materialien des Design Council zum Double Diamond. Hier sind empfehlenswerte weiterführende Quellen:
|
||||
|
||||
- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
|
||||
- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
|
||||
- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'Woher Ideen finden: 3 beste Referenzquellen für Anfänger'
|
||||
description: 'Ein Ideen-Leitfaden für Einsteiger ohne Vorkenntnisse. Fokussiert auf Websites zum direkten Stöbern, Trends, echte Geschäftsquellen und VC-Listen, um schnell konkretere Richtungen zu finden.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>1,5 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# Woher Ideen finden: 3 beste Referenzquellen für Anfänger
|
||||
|
||||
<a id="top-idea-sources"></a>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Ideen finden', 'Produktrichtung', 'Bedarfsentdeckung', 'Branchenbeobachtung']"
|
||||
coreOutput="Eine konkretere, recherchewürdige Produktrichtung"
|
||||
expectedOutput="Wissen, wo man stöbbern sollte, worauf man achten muss und was man zuerst anschauen sollte -- nicht nur bei 'KI + irgendeine Branche' stehen bleiben"
|
||||
>
|
||||
|
||||
Viele Menschen bleiben beim ersten Schritt stecken, nicht weil sie überhaupt keine Inspiration haben, sondern weil sie nach dem Stöbern vieler Inhalte nur noch Schlagworte im Kopf behalten:
|
||||
|
||||
- AI for education
|
||||
- AI for healthcare
|
||||
- AI for finance
|
||||
- AI agent for business
|
||||
|
||||
Das sind noch keine Ideen. Sie sagen nur "die Richtung ist groß", aber nicht:
|
||||
|
||||
- Wer nutzt es
|
||||
- In welchem Szenario
|
||||
- Wie aktuell behelfsmäßig gearbeitet wird
|
||||
- Welcher Schritt als Erstes sinnvoll ist
|
||||
|
||||
Dieser Artikel verzichtet auf leere Methodik und stellt Ihnen direkt eine Reihe besser nutzbarer Quellen vor.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Minimales SOP
|
||||
**Ziel**: Nach dem Lesen wissen Sie, wo Sie zuerst stöbern, wenn Ihnen nichts einfällt, welche Links sich für "konkrete Bedarfe" eignen, welche für Trends und welche für echte Geschäftsszenarien.
|
||||
|
||||
**Aktion**: Zunächst eine Ideenliste stöbern, dann profitable Kleinprodukte ansehen, dann Trends und geschäftsnähere Quellen prüfen, am Ende 1 Richtung behalten, die Sie weiter recherchieren möchten.
|
||||
|
||||
**Ergebnis**: Sie erhalten 1 konkretere, validierungswürdige Richtung statt bei Schlagworten stehen zu bleiben.
|
||||
|
||||
**Stichwortsprünge**: [Referenz-App-Liste](#idea-apps) · [Trend-Quellen](#idea-trends) · [Geschäftsnähere Quellen](#idea-business) · [VC-/Accelerator-Quellen](#idea-vc) · [Kürzester Pfad](#idea-path) · [Wie KI hilft](#idea-ai)
|
||||
:::
|
||||
|
||||
## Was Sie lernen werden
|
||||
|
||||
1. Welche Websites sich zum direkten Ideen-Stöbern eignen
|
||||
2. Welche Websites sich eignen, um bereits profitable Kleinprodukte zu entdecken
|
||||
3. Welche Quellen sich für Trends und Branchenveränderungen eignen
|
||||
4. Welche Quellen näher an echten Geschäften und echten Zahlungen sind
|
||||
5. Ein kürzester Nutzungspfad für Anfänger ohne Vorkenntnisse
|
||||
|
||||
<a id="idea-apps"></a>
|
||||
## [1. Referenz-App-Liste: Zuerst sehen, was andere bereits tun](#top-idea-sources)
|
||||
|
||||
Das ist der beste Ausgangspunkt für Anfänger, weil es am konkretesten ist.
|
||||
|
||||
### Erste Liga: Direkt Ideenlisten öffnen, einfach auswählen
|
||||
|
||||
- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
Dieses Subreddit hat den Kernzweck: Echte Nutzer posten direkt "Ich wünsche mir, dass jemand ein XX baut". Jeder Post ist meist ein konkretes Produktbedürfnis, oft mit etwas Szenario-Beschreibung. Sortieren nach `Top -> Past Month` oder `Top -> Past Year`, schon haben Sie in 20 Minuten eine Reihe echter Bedarfe.
|
||||
- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
Ähnlich wie oben, aber eher Software/App-Fokus. Das Beitragsformat ist häufig "Ich brauche eine App, die XX kann" -- kleinteiliger, viele kleine, schöne Nischen.
|
||||
- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
Vollständiger als die vorherigen. Viele Posts bestehen nicht nur aus einem Satz, sondern enthalten etwas Marktanalyse, Geschäftsmodell und warum es sich jetzt lohnt.
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
Wöchentlich neue, nicht validierte Startup-Ideen, typische Felder sind Zielgruppe, Monetarisierung, erste Validierungsansätze. Einheitliches Format, schnelles Überfliegen.
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
KI-generierte Startup-Ideen, endlos scrollbar. Qualität schwankend, aber gut, um in der Phase "gar kein Gefühl" Inspiration zu erhalten und dann selbst in Nischenszenarien abzutauchen.
|
||||
|
||||
### Zweite Liga: Bereits profitable Kleinprodukte anderer ansehen, Ideen zurückableiten
|
||||
|
||||
Die Logik dieser Plattformen: Andere haben den Bedarf bereits validiert, verdienen sogar schon Geld. Sie schauen nicht, um zu kopieren, sondern um zu sehen, "welche kleinen Probleme bereits jemand bezahlt".
|
||||
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
Viele echte Kleinunternehmer-Case-Studies, oft mit Gründer-Interviews, Umsatzzahlen, Startprozess. Fokus auf Produkte mit 10k bis 100k USD Monatsumsatz -- meist näher an dem, was normale Menschen sich vorstellen können.
|
||||
- [Indie Hackers — Products](https://www.indiehackers.com/products)
|
||||
Indie-Entwickler zeigen ihre Produkte, viele veröffentlichen Umsatz und Wachstum. Nach Umsatz sortieren und sehen, welche konkreten Probleme die Produkte mit einigen Tausend bis Zehntausend USD lösen.
|
||||
- [MicroConf Blog](https://microconf.com/blog)
|
||||
Fokus auf Micro SaaS. Gut für "klein genug, aber jemand zahlt dafür".
|
||||
- [1000 Tools](https://1000.tools/)
|
||||
KI-Tool-Aggregator. Gut, um zu sehen, welche Kategorien bereits besetzt, aber mittelmäßig umgesetzt sind, oder welche Richtungen im Inland/in bestimmten Branchen noch unerschlossen sind.
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
Wiederkehrende Produkttypen beobachten, nicht nur Platz 1 im Fokus -- eher sehen, welche Kategorien immer wieder auftauchen, aber noch kein klarer Gewinner existiert.
|
||||
- [BetaList](https://betalist.com/)
|
||||
Gut für Frühphasen-Produkte und Teams, die noch an der Richtung arbeiten.
|
||||
|
||||
### Beim Produkt-Ansehen nicht nur das Produkt selbst betrachten, sondern auch negative Bewertungen und "Dienstleister"
|
||||
|
||||
- [G2](https://www.g2.com/)
|
||||
Nutzung: 1- und 2-Sterne-Bewertungen ansehen. In den schlechten Bewertungen versteckt sich oft "welcher Schritt der bestehenden Tools nicht gut gemacht ist".
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
Nutzung: Ähnlich wie G2, gut für echte Beschwerden bei SaaS-Produkten.
|
||||
- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / ZhuBaJie
|
||||
Nutzung: Nach "Dienstleister", "Vertretung", "Eingabe", "Transkription" suchen. Wenn eine bestimmte manuelle Dienstleistung gut läuft, verbirgt sich dahinter meist ein wiederholbarer, produktisierbarer Prozess.
|
||||
|
||||
Signalschwellen sind einfach:
|
||||
|
||||
- Nutzer beschweren sich bereits über bestehende Tools
|
||||
- Nutzer zahlen bereits dafür, dass andere es für sie erledigen
|
||||
- Nutzer investieren bereits viel Arbeitskraft und Zeit in diesen Prozess
|
||||
|
||||
### Vierte Liga: Videos ansehen, manche Menschen zerlegen Ideen direkt für dich
|
||||
|
||||
Wenn Sie lieber "jemand erklärt mir die Gedanken" mögen statt Foren und Rankings zu durchsuchen, eignen sich Videos und Podcasts ebenfalls.
|
||||
|
||||
- Suche nach `Greg Isenberg startup ideas`
|
||||
Gut, um jemanden zu sehen, der 2-3 konkrete Ideen analysiert, Marktgröße, Wettbewerb und Ansatzpunkte erklärt.
|
||||
- Suche nach `My First Million podcast`
|
||||
Zwei Moderatoren brainstormen oft eine ganze Folge lang Geschäftsideen, hohe Dichte, häufig sehr konkrete Nischen.
|
||||
- Suche nach `YC startup ideas` oder `Michael Seibel startup ideas`
|
||||
Gut für Anfänger, direkte Sprache, viele erklären direkt, wie man die Richtung wählt.
|
||||
|
||||
<a id="idea-trends"></a>
|
||||
## [2. Trend-Quellen: Sehen, welche Richtungen aufsteigen](#top-idea-sources)
|
||||
|
||||
Trend-Seiten geben Ihnen nicht direkt Ideen, sondern helfen einzuschätzen: Ob eine Richtung an Dynamik gewinnt und ob es sich lohnt, weiter zu recherchieren.
|
||||
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
Datengetriebenes Tracking von schnell wachsenden, aber noch nicht im Mainstream angekommenen Themen und Produktkategorien. Gut für "im Kommen, aber noch nicht überlaufen".
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
Keywords suchen, Trendlinie der letzten 12 Monate ansehen, dann in "Verwandte Suchanfragen" die "Steigenden" Begriffe prüfen.
|
||||
- [Glimpse](https://meetglimpse.com/)
|
||||
Ähnlich wie Google Trends
|
||||
- Branchenbericht-Zusammenfassungen
|
||||
Gut, wenn Sie bereits eine Richtung haben und schnell sehen wollen, wo die Branche steht.
|
||||
- McKinsey / BCG / Gartner Trend-Inhalte
|
||||
Eher Unternehmens- und Großbranchen-Perspektive, gut für B2B, Industrie, traditionelle Branchen.
|
||||
- [State of AI Report](https://www.stateof.ai/)
|
||||
Wenn Ihre Richtung mit KI-Technologie selbst zu tun hat, eignet sich dieser Jahresbericht gut, um den Überblick zu gewinnen.
|
||||
|
||||
Bei Trends nur auf drei Dinge achten:
|
||||
|
||||
- Steigt der Begriff kontinuierlich?
|
||||
- In welchem konkreten Szenario zeigt er sich?
|
||||
- Wer würde als Erster Zeit, Wechselkosten oder Budget dafür aufwenden?
|
||||
|
||||
<a id="idea-business"></a>
|
||||
## [3. Geschäftsnähere Quellen: Wer gibt Geld aus, wer beschwert sich, wer verkauft manuelle Dienstleistungen](#top-idea-sources)
|
||||
|
||||
Wenn Sie keine "coole" Richtung suchen, sondern eine "näher am echten Geschäft", müssen Sie Quellen näher an Workflows nutzen.
|
||||
|
||||
### Wer gibt wirklich Geld für was aus
|
||||
|
||||
- [Chinesische Regierungseinkaufsplattform](https://www.ccgp.gov.cn/)
|
||||
Nutzung: Begriffe wie "Smart Construction Site", "Labormanagementsystem", "Datenerfassung", "Praxismanagement", "Angebotsystem" suchen, Budget, technische Anforderungen, Nutzungsszenarien ansehen.
|
||||
- Öffentliche Ressourcentransaktionszentren der Provinzen und Städte
|
||||
Nutzung: Sehen, was lokale Regierungen und Staatsunternehmen tatsächlich einkaufen.
|
||||
- BiBiao / QianliMa / BiaoShiTong
|
||||
Nutzung: Unternehmensseitige Beschaffungsbedarfe und häufige Systemtypen sehen.
|
||||
|
||||
Das starke Signal dieser Quellen: Es wird nicht über die Zukunft diskutiert, sondern "heute zahlt bereits jemand dafür".
|
||||
|
||||
### Wer beschwert sich über was
|
||||
|
||||
- Fertigungsindustrie: Maschinenbau-Foren, SPS-Foren
|
||||
- Gesundheitswesen: Dingxiangyuan, Yimaitong
|
||||
- Bau / Ingenieurwesen: Tumu Online, Glodon-Community
|
||||
- Finanzen / Buchhaltung: Chinesisches Rechnungswesen-Forum
|
||||
- Außenhandel: Fubu-Außenhandelsforum, Mike-Community
|
||||
- Gastronomie / Einzelhandel: Zhiye Catering, Lianshang-Forum
|
||||
- [Reddit](https://www.reddit.com/) vertikale Subreddits: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
|
||||
- [V2EX](https://www.v2ex.com/)
|
||||
- Jike
|
||||
- Xiaohongshu
|
||||
|
||||
Bei der Suche nicht nur "KI" oder "Innovation" verwenden, effektiver ist:
|
||||
|
||||
- zu umständlich
|
||||
- gibt es einen besseren Weg
|
||||
- Empfehlung für Tools gesucht
|
||||
- Excel reicht nicht mehr aus
|
||||
- I wish there was
|
||||
- is there a tool for
|
||||
- I hate
|
||||
|
||||
### Wer verkauft wiederkehrende manuelle Dienstleistungen
|
||||
|
||||
- [Fiverr](https://www.fiverr.com/)
|
||||
- [Upwork](https://www.upwork.com/)
|
||||
- ZhuBaJie
|
||||
- Taobao
|
||||
- Xianyu
|
||||
|
||||
Wenn Sie sehen, dass diese Dienstleistungen gut laufen, lohnt sich weitere Recherche:
|
||||
|
||||
- PDF-Angebote in Excel übertragen
|
||||
- Kundendaten batchweise bereinigen
|
||||
- Lebenslauf / Texte überarbeiten / Transkription / Archivierung
|
||||
|
||||
Hinter solchen Dienstleistungen steckt meist kein einmaliger Bedarf, sondern ein wiederkehrender Workflow.
|
||||
|
||||
### Vollständige Workflows ansehen, nicht nur Ideenlisten
|
||||
|
||||
Manchmal ist der direkteste Weg, eine Branche auszuwählen, den Prozess einmal durchzugehen und nach Schritten zu suchen, die noch mit WeChat, Excel, Stift, Papier und Telefon erledigt werden.
|
||||
|
||||
- Außenhandel: Lieferanten finden, anfragen, vergleichen, Angebote erstellen, an Kunden senden, Antworten verfolgen, Inspektion arrangieren, Buchung, Verzollung.
|
||||
Interessanter Ansatzpunkt: Lieferantenangebot in Kundenangebot überführen.
|
||||
- Zahnarztpraxis: Empfang, Röntgen, Befundung, Behandlungsplan-Besprechung, Follow-up, Behandlung, Kontrolltermin.
|
||||
Interessanter Ansatzpunkt: Dem Patienten den Behandlungsplan erklären und kontinuierlich folgen.
|
||||
- Baustelle: Inspektion, fotografieren, in Gruppenchat posten, Bericht erstellen, an Auftraggeber übergeben.
|
||||
Interessanter Ansatzpunkt: Von Baustellenfotos zum compliance-Bericht.
|
||||
|
||||
<a id="idea-vc"></a>
|
||||
## [4. VC-/Accelerator-Quellen: "Wohin die Welle geht" sehen](#top-idea-sources)
|
||||
|
||||
Diese Quellen eignen sich gut, um große Richtungen zu finden, aber nicht als direkter Validierungsersatz.
|
||||
|
||||
- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
Nutzung: Gut für Ansatzpunkte, da oft direkt gesagt wird "Wir möchten sehen, dass jemand das baut".
|
||||
- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
Nutzung: Eher große Trends und Track-Einschätzungen, gut für Branchengefühl.
|
||||
- [NFX](https://www.nfx.com/)
|
||||
Nutzung: Gut für schnelles Überfliegen einer Reihe von Startup-Themen.
|
||||
- [Sequoia Capital](https://www.sequoiacap.com/article/)
|
||||
Nutzung: Nicht immer direkte Ideenlisten, aber oft Erklärungen zu Plattformwandel und Chancen.
|
||||
- [First Round Review](https://review.firstround.com/)
|
||||
Nutzung: Gut für tieferes Eintauchen, nicht unbedingt Ideenliste, aber hohe Artikelqualität.
|
||||
|
||||
Vorteile dieser Quellen:
|
||||
|
||||
- Zeigen, welche Richtungen zukunftsträchtig sind
|
||||
- Zeigen, welche Tracks voraussichtlich weiter gefördert werden
|
||||
- Ermöglichen schnellen Einstieg in die Sprache eines bestimmten Tracks
|
||||
|
||||
Einschränkungen dieser Quellen:
|
||||
|
||||
- Meist Investorenperspektive
|
||||
- Nicht immer klar, welche Rolle am meisten Schmerz hat
|
||||
- Nicht immer klar, welcher Prozessschritt am stärksten blockiert
|
||||
- Nicht immer klar, wer heute bereits dafür zahlt
|
||||
|
||||
Bessere Nutzung: Zunächst Richtung finden, dann zurück zu Referenzprodukten, Branchenforen, Beschaffungsinformationen und echten Workflows gehen, um konkretere Ansatzpunkte zu finden.
|
||||
|
||||
<a id="idea-path"></a>
|
||||
## [5. Kürzester Nutzungspfad für "Jemand ohne Idee, der nur einen Assistenten bauen will"](#top-idea-sources)
|
||||
|
||||
Wenn Sie nur einen kürzesten Weg gehen möchten:
|
||||
|
||||
1. Schritt, 30 Minuten.
|
||||
[r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/) öffnen, nach `Top -> Past Year` sortieren, schnell 50 Posts überfliegen, alle Richtungen speichern, bei denen Sie denken "Das könnte ich vielleicht bauen".
|
||||
2. Schritt, 30 Minuten.
|
||||
[Starter Story](https://www.starterstory.com/) oder [Indie Hackers Products](https://www.indiehackers.com/products) öffnen, nach Umsatz sortieren, mittelgroße Produkte ansehen, nicht nur die erfolgreichsten. Richtungen finden, die mit Schritt 1 zusammenhängen, sehen, an wen sie konkret verkauft werden und welchen Schritt sie lösen.
|
||||
3. Schritt, 20 Minuten.
|
||||
[Google Trends](https://trends.google.com/) aufrufen, verwandte Keywords suchen, prüfen, ob der Trend steigt, dann "Verwandte Suchanfragen"-Spitzenworte ansehen.
|
||||
4. Schritt, 20 Minuten.
|
||||
G2 / Capterra / Branchenforen / Beschaffungsplattformen / Fiverr aufrufen, prüfen, wo es heute am meisten nervt und wo noch manuell gearbeitet wird.
|
||||
|
||||
Nach dem Durchlesen reicht es, diesen Satz sagen zu können:
|
||||
|
||||
- Eine bestimmte Art von Mensch, in einem bestimmten Szenario, wird von einem bestimmten Prozessschritt blockiert, und behilft sich aktuell mit einer bestimmten umständlichen Methode.
|
||||
|
||||
<a id="idea-ai"></a>
|
||||
## [6. Wie KI Ihnen hilft](#top-idea-sources)
|
||||
|
||||
Dieses Kapitel behandelt nicht primär KI, aber KI eignet sich gut zum Strukturieren.
|
||||
|
||||
Die zwei nützlichsten Anwendungen:
|
||||
|
||||
- Links, Beitragstitel und Nutzer-Zitate, die Sie gefunden haben, an die KI senden und sie nach "Zielgruppe / Szenario / Schmerzpunkt / Alternative" sortieren lassen.
|
||||
- KI bitten, aus vielen verstreuten Informationen 3 Kandidatenrichtungen zusammenzufassen, statt weiter 50 Funktionen zu generieren.
|
||||
|
||||
Direkt so fragen:
|
||||
|
||||
```text
|
||||
Ich habe kürzlich diese Quellen gefunden:
|
||||
1. [Titel oder Zitat einfügen]
|
||||
2. [Titel oder Zitat einfügen]
|
||||
3. [Titel oder Zitat einfügen]
|
||||
|
||||
Bitte keine Funktionsliste geben.
|
||||
Bitte nur drei Dinge tun:
|
||||
1. Nach Zielgruppe und Szenario kategorisieren
|
||||
2. Wiederkehrende mühsame Schritte identifizieren
|
||||
3. Mir 3 konkretere Kandidatenrichtungen zusammenfassen
|
||||
```
|
||||
|
||||
## Weiterführende Literatur
|
||||
|
||||
- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
- [NFX](https://www.nfx.com/)
|
||||
- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
- [Indie Hackers - Products](https://www.indiehackers.com/products)
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
- [BetaList](https://betalist.com/)
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
- [G2](https://www.g2.com/)
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
@@ -0,0 +1,719 @@
|
||||
---
|
||||
title: 'B2B-Branchenszenarien - Inspirationsreferenz'
|
||||
description: 'Dieses Dokument sammelt praktische LLM-Anwendungen fuer B2B-Unternehmensszenarien, darunter Fertigung, intelligenter Kundenservice, Bildung, Programmierung, Gesundheitswesen, Cybersicherheit, Finanzdienstleistungen und Unternehmensservices. Es dient als Referenz fuer Entwickler von AI-Anwendungen im B2B-Bereich.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'ca. <strong>6 Stunden</strong>'
|
||||
|
||||
const interestPoint = ref('')
|
||||
const purpose = ref('')
|
||||
|
||||
const topicPool = {
|
||||
manufacturing: [
|
||||
{ title: 'AI-gestuetzte Designplattform', desc: 'Konzeptdesign fuer Produktoptik mit Bildgenerierungsmodellen' },
|
||||
{ title: 'Intelligenter Assistent fuer Zeichnungspruefung', desc: 'Designnormen mit RAG als Wissensbasis nutzbar machen' },
|
||||
{ title: 'Automatische technische Dokumentation', desc: 'Spezifikationen und Handbuecher mit LLM erzeugen' },
|
||||
{ title: 'Automatische Anlagen-Inspektionsberichte', desc: 'Sprachbeschreibung in strukturierte Berichte umwandeln' },
|
||||
{ title: 'Q&A fuer Industrieanlagen-Fehlerdiagnose', desc: 'Historische Fehlerfaelle als Vektor-Wissensbasis nutzen' }
|
||||
],
|
||||
'customer-service': [
|
||||
{ title: 'Multikanal-Kundenservice mit Auto-Antworten', desc: 'Nachrichten verstehen, Antworten erzeugen und Tickets anlegen' },
|
||||
{ title: 'Lead-Erkennung und Follow-up-Empfehlungen', desc: 'Dialoghistorien analysieren und Kaufabsicht bewerten' },
|
||||
{ title: 'Interner Wissens-Q&A-Assistent', desc: 'Interne Dokumente als RAG-Wissensbasis erschliessen' },
|
||||
{ title: 'Gespraechszusammenfassung und Ticket-Erstellung', desc: 'Kerninformationen extrahieren und Felder automatisch fuellen' },
|
||||
{ title: 'Best-Practice-Skript-Wissensbasis', desc: 'Erfolgreiche Servicefaelle in Skriptvorlagen verdichten' }
|
||||
],
|
||||
education: [
|
||||
{ title: 'Personalisierter Sprachlernpfad', desc: 'Lernniveau einschaetzen und taegliche Aufgaben planen' },
|
||||
{ title: 'Automatische Unterrichtsentwuerfe', desc: 'Aus Lehrplaenen Unterrichtsrahmen und Ressourcen erzeugen' },
|
||||
{ title: 'Automatische Korrektur und Lernanalyse', desc: 'Subjektive Aufgaben bewerten und Hinweise geben' },
|
||||
{ title: 'Kompetenzmodell und Lernlandkarte', desc: 'Stellenanforderungen in Lernpfade uebersetzen' },
|
||||
{ title: 'Fremdsprachen-Szenariotraining', desc: 'LLM spielt Rollen fuer muendliche Uebungen' }
|
||||
],
|
||||
programming: [
|
||||
{ title: 'Code-Vervollstaendigung und Bug-Fix', desc: 'IDE-Plugin liefert Vorschlaege und Reparaturen' },
|
||||
{ title: 'Low-Code-App-Bau und Automatisierung', desc: 'Natuerliche Sprache in Low-Code-Konfigurationen umwandeln' },
|
||||
{ title: 'Unit-Test-Generator', desc: 'Code per AST analysieren und Grenzfaelle erzeugen' },
|
||||
{ title: 'Code-Analyse und Sprachmigration', desc: 'Qualitaet pruefen und Migrationsvorschlaege geben' },
|
||||
{ title: 'Frontend-UI-Codegenerierung', desc: 'Designbilder erkennen und responsives CSS erzeugen' }
|
||||
],
|
||||
healthcare: [
|
||||
{ title: 'Intelligente Laborbefund-Interpretation', desc: 'Kennzahlen per OCR erkennen und Auffaelligkeiten erklaeren' },
|
||||
{ title: 'Gesundheitsberatung mit Wissens-Retrieval', desc: 'Medizinische Wissensgraphen und RAG fuer Antworten nutzen' },
|
||||
{ title: 'Datenanalyse fuer klinische Forschung', desc: 'EMR-Daten integrieren und Auswertungscode unterstuetzen' },
|
||||
{ title: 'Automatische Bildbefunde', desc: 'Bildmerkmale in strukturierte Berichte ueberfuehren' },
|
||||
{ title: 'Medikationsassistent fuer chronische Krankheiten', desc: 'Erinnerungen erzeugen und Kontraindikationen pruefen' }
|
||||
],
|
||||
security: [
|
||||
{ title: 'Code-Sicherheitsluecken erkennen und beheben', desc: 'SAST-Ergebnisse mit LLM erklaeren und Fixes vorschlagen' },
|
||||
{ title: 'AI-Phishing-Mail-Erkennung', desc: 'Mailinhalte, Absender und Links auf Risiken pruefen' },
|
||||
{ title: 'Automatische Security-Tagesberichte', desc: 'Logs zusammenfassen und Schluesselereignisse extrahieren' },
|
||||
{ title: 'Penetrationstest-Berichtsgenerator', desc: 'Schwachstellenbeschreibungen in Berichte umwandeln' },
|
||||
{ title: 'Threat-Intelligence-Analyse', desc: 'Mehrere Quellen anbinden und Auswirkungen bewerten' }
|
||||
],
|
||||
finance: [
|
||||
{ title: 'Kredit-Due-Diligence-Berichte', desc: 'Finanzdaten analysieren und Risikoberichte erzeugen' },
|
||||
{ title: 'Private-Banking-Vermoegensberater', desc: 'Risikoprofil analysieren und Allokation empfehlen' },
|
||||
{ title: 'IPO-Prospekt und Compliance-Pruefung', desc: 'Vorlagen fuellen und Konsistenz pruefen' },
|
||||
{ title: 'Finanzbericht und Anomaliewarnung', desc: 'Finanzanalyse automatisieren und Abweichungen markieren' },
|
||||
{ title: 'Training fuer Versicherungsagenten', desc: 'Kundendialoge simulieren und Skripte bewerten' }
|
||||
],
|
||||
enterprise: [
|
||||
{ title: 'Compliance-Pruefung im Vertragslebenszyklus', desc: 'Klauseln mit Regeln vergleichen und Aenderungen vorschlagen' },
|
||||
{ title: 'Verkaufsgespraech-Transkription', desc: 'ASR nutzen und passende Skripte empfehlen' },
|
||||
{ title: 'Marketing-Content und Design', desc: 'Verkaufstexte und Kernargumente erzeugen' },
|
||||
{ title: 'Analyse von Wettbewerber-Werbung', desc: 'Anzeigen sammeln und Platzierungsstrategien auswerten' },
|
||||
{ title: 'Netzweite Trendanalyse', desc: 'Hot Topics erkennen und Themenwinkel empfehlen' }
|
||||
],
|
||||
content: [
|
||||
{ title: 'Assistenz fuer Film- und Romaninhalte', desc: 'Outline, Figuren und Dialoge erzeugen' },
|
||||
{ title: 'Markengeschichte und PR-Artikel', desc: 'Markenkeywords in mehrere Textstile uebersetzen' },
|
||||
{ title: 'Virtueller Avatar fuer Livestreams', desc: 'Digitaler Mensch, TTS und LLM-Dialog kombinieren' },
|
||||
{ title: 'Short-Video-Skript und Schnitt', desc: 'Skripte, Storyboards und Schnittvorschlaege erzeugen' },
|
||||
{ title: 'Marketing-Content-System', desc: 'Copy und Selling Points strukturiert generieren' }
|
||||
],
|
||||
government: [
|
||||
{ title: 'Buergerhotline mit Sprachdialog und Dispatch', desc: 'Anliegen erkennen und automatisch weiterleiten' },
|
||||
{ title: 'Service-Wegweiser und Politik-Q&A', desc: 'Verwaltungswissen per RAG abrufbar machen' },
|
||||
{ title: 'Foerderpolitik-Matching', desc: 'Unternehmensprofile mit passenden Programmen abgleichen' },
|
||||
{ title: 'Vorpruefung von Verwaltungsunterlagen', desc: 'Dokumente per OCR erkennen und Vollstaendigkeit pruefen' },
|
||||
{ title: 'Stadt-Grid-Ereignismanagement', desc: 'Ereignistypen erkennen und Einsatzstellen zuteilen' }
|
||||
],
|
||||
legal: [
|
||||
{ title: 'Agent fuer Vertragsrisiken', desc: 'Klauseln mit Risikolisten vergleichen und markieren' },
|
||||
{ title: 'AI-Berater fuer Gewinnwahrscheinlichkeit', desc: 'Fallmerkmale extrahieren und aehnliche Faelle finden' },
|
||||
{ title: 'Monitoring von Gesetzesaenderungen', desc: 'Aenderungen auswerten und Auswirkungen analysieren' },
|
||||
{ title: 'AIGC-Entwurf fuer Anwaltsschreiben', desc: 'Sachverhalte in standardisierte Schreiben ueberfuehren' },
|
||||
{ title: 'Rechtsklauseln in Alltagssprache', desc: 'Komplexe Klauseln verstaendlich erklaeren' }
|
||||
],
|
||||
travel: [
|
||||
{ title: 'AIGC-Reisefuehrer-Generator', desc: 'Aus Praeferenzen Tagesplaene erzeugen' },
|
||||
{ title: 'Flug- und Hotelpreisprognose', desc: 'OTA-Daten sammeln und Preistrends vorhersagen' },
|
||||
{ title: 'Reiseplan-Reorganisation bei Flugausfall', desc: 'Alternativen analysieren und Notfallplaene empfehlen' },
|
||||
{ title: 'Visa-Unterlagen-Pruefung', desc: 'Fotos per OCR auswerten und Formulare fuellen' },
|
||||
{ title: 'Sprach- und Menueuebersetzung auf Reisen', desc: 'Offline-Sprache und Menuebilder uebersetzen' }
|
||||
],
|
||||
emotion: [
|
||||
{ title: 'Virtueller 24-Stunden-Begleiter', desc: 'Gespraechshistorie merken und empathisch antworten' },
|
||||
{ title: 'Multimodale Emotionserkennung', desc: 'Stimme und Text fuer Unterstuetzung auswerten' },
|
||||
{ title: 'Kognitives Training fuer Alzheimer', desc: 'Spiele und Erinnerungsimpulse kombinieren' },
|
||||
{ title: 'Sozialtraining bei sozialer Angst', desc: 'Szenarien simulieren und Tipps geben' },
|
||||
{ title: 'Stimmungsmonitoring und positive Impulse', desc: 'Trends erkennen und ermutigende Inhalte erzeugen' }
|
||||
],
|
||||
entertainment: [
|
||||
{ title: 'Open-World-NPC-Entscheidungsengine', desc: 'Verhaltensbaeume mit LLM-Entscheidungen kombinieren' },
|
||||
{ title: 'Murder-Mystery-DM-Assistent', desc: 'Spielerentscheidungen in Handlungszweige uebersetzen' },
|
||||
{ title: 'Interaktive Romanenden', desc: 'Leserentscheidungen generieren neue Enden' },
|
||||
{ title: 'E-Sport-Analyse und AI-Kommentar', desc: 'Spielbilder analysieren und Kommentare erzeugen' },
|
||||
{ title: 'Mehrrollen-TTS-Hoerbuch', desc: 'Textrollen verteilen und Stimmen erzeugen' }
|
||||
],
|
||||
ecommerce: [
|
||||
{ title: 'Produktdetailseiten in hoher Konversion', desc: 'Selling Points und Szenenbeschreibungen erzeugen' },
|
||||
{ title: 'Virtuelle Kleidermodelle und Try-on', desc: 'Anprobeeffekte und Praesentationsvideos generieren' },
|
||||
{ title: 'Mehrsprachige E-Commerce-Lokalisierung', desc: 'Produkttexte uebersetzen und kulturell polieren' },
|
||||
{ title: 'Digitaler Livestream-Verkauf', desc: 'Avatar, Echtzeit-Skript und Produktdaten verbinden' },
|
||||
{ title: 'Trend-Insight und Bestseller-Prognose', desc: 'Social- und Shopdaten fuer Produktauswahl auswerten' }
|
||||
],
|
||||
energy: [
|
||||
{ title: 'Stromverbrauchsanalyse im Haushalt', desc: 'Verbrauchsmuster erkennen und Sparstrategien ableiten' },
|
||||
{ title: 'PV-Defekterkennung per Drohne', desc: 'Thermische Bilder analysieren und Defekte markieren' },
|
||||
{ title: 'Strompreisprognose und Handelsstrategie', desc: 'Preise vorhersagen und Strategien erzeugen' },
|
||||
{ title: 'CO2-Footprint und ESG-Bericht', desc: 'Emissionsfaktoren berechnen und Berichte erstellen' },
|
||||
{ title: 'Lastprognose bei Extremwetter', desc: 'Wetterdaten anbinden und Notfalldispatch planen' }
|
||||
],
|
||||
'av-media': [
|
||||
{ title: 'Highlight-Erkennung und Short-Video-Schnitt', desc: 'Keyframes finden und Clips automatisch schneiden' },
|
||||
{ title: 'Rauschtrennung und Stimmverstaerkung', desc: 'Audio separieren und Sprache verbessern' },
|
||||
{ title: '4K-Restauration alter Aufnahmen', desc: 'Super-Resolution und Kolorierung einsetzen' },
|
||||
{ title: 'Realistische TTS-Synchronisation', desc: 'Mehrstimmige TTS mit Emotionssteuerung nutzen' },
|
||||
{ title: 'Meeting-Transkription und To-do-Extraktion', desc: 'Sprecher trennen und Aufgaben extrahieren' }
|
||||
],
|
||||
'ai-marketing': [
|
||||
{ title: 'Virale Social-Copy mit AIGC', desc: 'Themen, Emojis und Hashtags optimieren' },
|
||||
{ title: 'Marketing-Poster mit AI-Layout', desc: 'Poster automatisch an Formate anpassen' },
|
||||
{ title: 'Markenlogo und VI-System', desc: 'Logoideen und visuelle Regeln generieren' },
|
||||
{ title: 'Trend-Hunting fuer Marketingideen', desc: 'Hot Topics finden und kreative Winkel ableiten' },
|
||||
{ title: 'Short-Video-Skript und Storyboard', desc: 'Skripte, Shots und Drehhinweise erzeugen' }
|
||||
],
|
||||
'data-intelligence': [
|
||||
{ title: 'Natural-Language-to-SQL', desc: 'Natuerliche Sprache in SQL-Abfragen umwandeln' },
|
||||
{ title: 'Datenasset-Katalog und Klassifikation', desc: 'Metadaten sammeln und automatisch klassifizieren' },
|
||||
{ title: 'Datenqualitaets-Anomalien', desc: 'Regeln und ML fuer Erkennung und Reparaturhinweise nutzen' },
|
||||
{ title: 'Intelligente Berichte und Visualisierung', desc: 'Berichte dialogisch konfigurieren' },
|
||||
{ title: 'Q&A fuer Datenkennzahlen', desc: 'Kennzahlendefinitionen als Wissensbasis nutzen' }
|
||||
]
|
||||
}
|
||||
|
||||
const recommendationMap = {
|
||||
'creative-content': {
|
||||
'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
|
||||
'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
|
||||
'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
|
||||
'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
|
||||
},
|
||||
'tech-service': {
|
||||
'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
|
||||
'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
|
||||
'improve-experience': ['customer-service', 'enterprise', 'programming'],
|
||||
'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
|
||||
},
|
||||
'data-intel': {
|
||||
'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
|
||||
'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
|
||||
'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
|
||||
'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
|
||||
},
|
||||
'user-service': {
|
||||
'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
|
||||
'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
|
||||
'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
|
||||
'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
|
||||
},
|
||||
'industry-solution': {
|
||||
'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
|
||||
'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
|
||||
'improve-experience': ['healthcare', 'education', 'government', 'travel'],
|
||||
'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
|
||||
}
|
||||
}
|
||||
|
||||
const interestOptions = [
|
||||
{ label: 'Kreative Inhalte', value: 'creative-content', desc: 'Texte, Bilder, Videos und andere Inhalte' },
|
||||
{ label: 'Technische Services', value: 'tech-service', desc: 'Entwicklungstools, Automatisierung, Code-Assistenz' },
|
||||
{ label: 'Datenintelligenz', value: 'data-intel', desc: 'Analyse, Prognose und Entscheidungsunterstuetzung' },
|
||||
{ label: 'Nutzerservice', value: 'user-service', desc: 'Kundenservice, Marketing und Nutzererlebnis' },
|
||||
{ label: 'Branchenloesungen', value: 'industry-solution', desc: 'Tiefe Anwendungen fuer konkrete Branchen' }
|
||||
]
|
||||
|
||||
const purposeOptions = [
|
||||
{ label: 'Effizienz steigern', value: 'increase-efficiency', desc: 'Automatisieren und Prozesse beschleunigen' },
|
||||
{ label: 'Kosten senken', value: 'reduce-cost', desc: 'Personalaufwand und Ressourcenverbrauch reduzieren' },
|
||||
{ label: 'Erlebnis verbessern', value: 'improve-experience', desc: 'Servicequalitaet und Zufriedenheit erhoehen' },
|
||||
{ label: 'Geschaeft erneuern', value: 'innovate-business', desc: 'Neue Produkte und neue Modelle erkunden' }
|
||||
]
|
||||
|
||||
const industries = [
|
||||
{ key: 'manufacturing', name: 'Industriefertigung', anchor: '#_1-industriefertigung' },
|
||||
{ key: 'customer-service', name: 'Intelligenter Kundenservice', anchor: '#_2-intelligenter-kundenservice' },
|
||||
{ key: 'education', name: 'Bildungswesen', anchor: '#_3-bildungswesen' },
|
||||
{ key: 'programming', name: 'Intelligentes Programmieren', anchor: '#_4-intelligentes-programmieren' },
|
||||
{ key: 'healthcare', name: 'Gesundheitswesen', anchor: '#_5-gesundheitswesen' },
|
||||
{ key: 'security', name: 'Cybersicherheit', anchor: '#_6-cybersicherheit' },
|
||||
{ key: 'finance', name: 'Finanzen und Versicherung', anchor: '#_7-finanzen-und-versicherung' },
|
||||
{ key: 'enterprise', name: 'Unternehmensservices', anchor: '#_8-unternehmensservices' },
|
||||
{ key: 'content', name: 'Content-Produktion und Betrieb', anchor: '#_9-content-produktion-und-betrieb' },
|
||||
{ key: 'government', name: 'Smart Government', anchor: '#_10-smart-government' },
|
||||
{ key: 'legal', name: 'Recht und Vertragsmanagement', anchor: '#_11-recht-und-vertragsmanagement' },
|
||||
{ key: 'travel', name: 'Reise und Mobilitaet', anchor: '#_12-reise-und-mobilitaet' },
|
||||
{ key: 'emotion', name: 'Emotionale Begleitung', anchor: '#_13-emotionale-begleitung' },
|
||||
{ key: 'entertainment', name: 'Unterhaltung und Freizeit', anchor: '#_14-unterhaltung-und-freizeit' },
|
||||
{ key: 'ecommerce', name: 'E-Commerce Services', anchor: '#_15-e-commerce-services' },
|
||||
{ key: 'energy', name: 'Energie', anchor: '#_16-energie' },
|
||||
{ key: 'av-media', name: 'Audio und Video', anchor: '#_17-audio-und-video' },
|
||||
{ key: 'ai-marketing', name: 'AI-Marketing', anchor: '#_18-ai-marketing' },
|
||||
{ key: 'data-intelligence', name: 'Datenintelligenz', anchor: '#_19-datenintelligenz' }
|
||||
]
|
||||
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!interestPoint.value || !purpose.value) return []
|
||||
|
||||
const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
|
||||
const topics = []
|
||||
|
||||
keys.forEach(key => {
|
||||
const industry = industries.find(item => item.key === key)
|
||||
const industryTopics = topicPool[key] || []
|
||||
|
||||
if (industry && industryTopics.length > 0) {
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
industryKey: key,
|
||||
industryName: industry.name,
|
||||
industryAnchor: industry.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
const currentSelection = computed(() => {
|
||||
const interest = interestOptions.find(i => i.value === interestPoint.value)
|
||||
const pur = purposeOptions.find(p => p.value === purpose.value)
|
||||
return {
|
||||
interest: interest?.label || '',
|
||||
purpose: pur?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
setTimeout(() => {
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
if (!element) {
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
if (!element) {
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
element.style.backgroundColor = '#f0f9ff'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
interestPoint.value = ''
|
||||
purpose.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# B2B-Branchenszenarien - Inspirationsreferenz
|
||||
|
||||
## Kapiteluebersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['B2B-Anwendungen', 'Industrie', 'AI-Szenarien', 'Umsetzung', 'Branchenloesungen']" coreOutput="15+ B2B-Branchenszenarien verstehen" expectedOutput="Eine passende Richtung fuer Unternehmenskunden finden">
|
||||
|
||||
Dieses Dokument sammelt <strong>praktische LLM-Anwendungen in B2B-Unternehmensszenarien</strong>. Im Unterschied zu B2C-Produkten stehen hier reale Geschaeftsprobleme, Effizienzsteigerung, Kostensenkung und Prozesssicherheit im Vordergrund. Die Beispiele helfen dabei, von der Anforderungsanalyse bis zur technischen Umsetzung konkrete Projektideen zu finden.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Branchenschnellauswahl
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Passende Anwendungsszenarien finden</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Waehlen Sie Interessengebiet und Ziel. Das System empfiehlt passende Branchenrichtungen; ein Klick auf eine Zeile springt direkt zum Abschnitt.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="interestPoint" placeholder="Interessengebiet waehlen" style="width: 100%;">
|
||||
<el-option v-for="item in interestOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="purpose" placeholder="Ziel waehlen" style="width: 100%;">
|
||||
<el-option v-for="item in purposeOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
|
||||
Empfohlen: {{ recommendationTopics.length }} Anwendungsszenarien
|
||||
<span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
|
||||
({{ currentSelection.interest }} + {{ currentSelection.purpose }})
|
||||
</span>
|
||||
</div>
|
||||
<el-table :data="recommendationTopics" style="width: 100%; cursor: pointer;" @row-click="(row) => scrollToAnchor(row.industryAnchor)" highlight-current-row>
|
||||
<el-table-column prop="title" label="Anwendungsszenario" min-width="300">
|
||||
<template #default="scope">
|
||||
<div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="industryName" label="Branche" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px; font-size: 12px; color: #909399;">
|
||||
Klicken Sie auf eine Tabellenzeile, um zum passenden Branchenkapitel zu springen.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
|
||||
<span v-if="!interestPoint && !purpose">Bitte Interessengebiet und Ziel waehlen.</span>
|
||||
<span v-else-if="!interestPoint">Bitte Interessengebiet waehlen.</span>
|
||||
<span v-else>Bitte Ziel waehlen.</span>
|
||||
</div>
|
||||
|
||||
<div v-if="interestPoint || purpose" style="margin-top: 12px;">
|
||||
<el-button size="small" @click="resetSelection">Auswahl zuruecksetzen</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## Branchenschnellvorstellung
|
||||
|
||||
### Gängige Technologieauswahl
|
||||
|
||||
In AI-Anwendungsprojekten tauchen besonders haeufig drei technische Richtungen auf:
|
||||
|
||||
1. **LLM**: gut fuer Sprache, Dialoge, Zusammenfassungen, Textgenerierung, Uebersetzung und Wissens-Q&A.
|
||||
2. **VLM**: verbindet Bildverstehen und Sprache, etwa fuer Bildbeschreibung, visuelle Q&A, Medizinbilder, Qualitaetspruefung und Design.
|
||||
3. **GenAI**: erzeugt Texte, Bilder, Audio oder Video und eignet sich fuer Designassistenz, Marketingmaterial, Training und Content-Produktion.
|
||||
|
||||
### Auswahlstrategie
|
||||
|
||||
Wählen Sie eine Richtung nicht nur nach Trend, sondern nach drei praktischen Kriterien:
|
||||
|
||||
1. **Interesse**: Wer sich fuer Design interessiert, kann Content oder Industriedesign testen; wer technische Tiefe sucht, kann Security, Medizin oder Entwicklungswerkzeuge waehlen.
|
||||
2. **Branchennaehe**: Eigene Ressourcen senken die Einstiegskosten. Fertigung, Bildung, Medizin, Handel oder Verwaltung liefern jeweils andere Daten, Workflows und Fachwoerter.
|
||||
3. **Schwierigkeit**: Einsteiger starten mit Kundenservice, Content oder einfachen Q&A-Systemen; Fortgeschrittene koennen Qualitaetspruefung, medizinische Bildanalyse oder Code-Assistenz bearbeiten.
|
||||
|
||||
## 1. Industriefertigung
|
||||
|
||||
Fertigungsszenarien drehen sich um Design, Produktion, Qualitaetspruefung und Wartung. AI kann Informationen strukturieren, wiederkehrende Dokumente erzeugen und Expertenwissen leichter nutzbar machen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | AI-gestuetzte Designplattform | Bildmodelle erzeugen Konzepte; LLM prueft Designregeln; Three.js zeigt 3D-Ansichten. |
|
||||
| 2 | Zeichnungspruefungsassistent | CAD-Daten analysieren; RAG greift auf Konstruktionsnormen zu. |
|
||||
| 3 | Technische Dokumentation | Produktdatenbank plus LLM erzeugt Spezifikationen und Handbuecher. |
|
||||
| 4 | Anlagen-Inspektionsbericht | Spracheingabe wird transkribiert und als strukturierter Bericht gespeichert. |
|
||||
| 5 | Stapler-Dispatch und Routenplanung | Auftraege, Lagerorte und Karten-API erzeugen optimale Fahrwege. |
|
||||
| 6 | Datenabfrage per natuerlicher Sprache | Text-to-SQL fragt OLAP-Systeme wie Doris oder ClickHouse ab. |
|
||||
| 7 | Fehlerdiagnose-Q&A | Historische Stoerfaelle werden als Vektorwissen abgefragt. |
|
||||
| 8 | Qualitaetspruefbericht | OCR und CV erkennen Defekte; LLM erzeugt Bericht und Klassifikation. |
|
||||
| 9 | Inventurassistent | Bestandsdaten werden abgeglichen; Abweichungen und Warnungen entstehen automatisch. |
|
||||
| 10 | Prozessoptimierungs-Q&A | Produktionswissen wird per RAG erschlossen und in Verbesserungsvorschlaege ueberfuehrt. |
|
||||
|
||||
## 2. Intelligenter Kundenservice
|
||||
|
||||
Kundenservice profitiert stark von LLM, weil viel Kommunikation, Zusammenfassung, Klassifikation und Wissenssuche anfallen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Multikanal-Auto-Antworten | Website, App und Messenger anbinden; LLM erkennt Absicht und erstellt Tickets. |
|
||||
| 2 | Lead-Erkennung | Dialoge analysieren, Kaufabsicht bewerten und Follow-up empfehlen. |
|
||||
| 3 | Internes Wissens-Q&A | Confluence und Dokumente vektorisieren; RAG erzeugt Antworten. |
|
||||
| 4 | Zufriedenheitsanalyse | Gespraeche nach Sentiment, Problemtyp und Loesungsstatus auswerten. |
|
||||
| 5 | Gespraechszusammenfassung | Nach Chatende Zusammenfassung und Ticketfelder automatisch ausfuellen. |
|
||||
| 6 | Skript-Compliance | Antworten auf verbotene Aussagen und Compliance-Risiken pruefen. |
|
||||
| 7 | Ticket-Klassifikation | Lange Gespraeche zusammenfassen und mit Tags versehen. |
|
||||
| 8 | Emotionswarnung | Tonfall und Textsignal auswerten; bei Risiko per WebSocket warnen. |
|
||||
| 9 | Best-Practice-Skripte | Gute Faelle analysieren und passende Vorlagen im Kontext empfehlen. |
|
||||
| 10 | Outbound-Qualitaetspruefung | Telefonaufnahmen transkribieren, Kernaussagen extrahieren und QA-Berichte erzeugen. |
|
||||
|
||||
## 3. Bildungswesen
|
||||
|
||||
AI kann Unterricht individualisieren, Lernstaende erfassen und Lehrkraefte bei Material, Feedback und Verwaltung entlasten.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Personalisierter Lernpfad | Niveau und Ziel analysieren; taegliche Aufgaben und Ressourcen empfehlen. |
|
||||
| 2 | Unterrichtsentwurf | Lehrplan eingeben; LLM erzeugt Ziele, Ablauf und Materialien. |
|
||||
| 3 | Korrektur und Lernanalyse | Aufgaben bewerten; Wissensluecken ueber Graphen lokalisieren. |
|
||||
| 4 | Kompetenzmodell | Stellenanzeigen analysieren und Lernlandkarten ableiten. |
|
||||
| 5 | Schulcurriculum | Schulprofil und Lernbedarf in Kursrahmen und Folien ueberfuehren. |
|
||||
| 6 | Fremdsprachenpraxis | LLM spielt Rollen; ASR bewertet Aussprache; TTS liefert Vorbild. |
|
||||
| 7 | Studien- und Karriereberatung | Punktzahlen, Interessen und Zulassungsdaten kombinieren. |
|
||||
| 8 | Programmiercoach fuer Kinder | Code erklaeren und zwischen Blocksprache und Python vermitteln. |
|
||||
| 9 | Wissens-Mindmap | Kursthema in Mindmap und naechste Lernschritte umwandeln. |
|
||||
| 10 | Essay-Bewertung | Struktur, Sprache und Argumentation bewerten und kommentieren. |
|
||||
|
||||
## 4. Intelligentes Programmieren
|
||||
|
||||
Entwicklungswerkzeuge sind naheliegende B2B-Szenarien, weil Code, Logs, Tickets und Dokumentation bereits stark strukturiert sind.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Code-Vervollstaendigung und Bug-Fix | IDE-Plugin, Fehlerspur-Analyse und automatische Reparaturvorschlaege. |
|
||||
| 2 | Low-Code-App-Bau | Natuerliche Sprache in Komponenten, Datenmodelle und Workflows ueberfuehren. |
|
||||
| 3 | Unit-Test-Generator | AST analysieren und Grenzfaelle fuer Jest oder Pytest erzeugen. |
|
||||
| 4 | Code-Analyse und Migration | Tree-sitter, Regeln und LLM fuer Qualitaet und Sprachwechsel kombinieren. |
|
||||
| 5 | Natural-Language-to-SQL | Datenfragen in sichere SQL-Abfragen uebersetzen. |
|
||||
| 6 | API-Test und Dokumentation | Schnittstellenbeschreibungen in Testfaelle und API-Doku umwandeln. |
|
||||
| 7 | UI-Testwartung | Browseraktionen aufzeichnen und instabile Selektoren reparieren. |
|
||||
| 8 | Loganalyse | ELK-Daten auswerten, Ursachen verdichten und Fixes empfehlen. |
|
||||
| 9 | UI-Codegenerierung | Designbilder per OCR/VLM auswerten und Komponenten erzeugen. |
|
||||
| 10 | Datenbankschema-Design | Anforderungen in ER-Modelle und DDL-Skripte ueberfuehren. |
|
||||
|
||||
## 5. Gesundheitswesen
|
||||
|
||||
Gesundheitsszenarien verlangen Fachwissen, Datenschutz und menschliche Pruefung. AI eignet sich vor allem fuer Assistenz, Strukturierung und Erklaerung.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Laborbefund-Interpretation | Berichtsbilder erkennen, Werte extrahieren und Auffaelligkeiten erklaeren. |
|
||||
| 2 | Gesundheitsberatung mit RAG | Leitlinien, ICD-10 und Arzneimittelinformationen abrufbar machen. |
|
||||
| 3 | Klinische Forschungsanalyse | EMR-Daten integrieren und Analysecode erzeugen. |
|
||||
| 4 | Medizinische Uebungsfragen | Lehrbuchkapitel in Aufgaben, Loesungen und Fehleranalysen umwandeln. |
|
||||
| 5 | Pharma-Forschungs-Q&A | Wirkstoff-, Ziel- und Krankheitsgraph fuer Recherche nutzen. |
|
||||
| 6 | Arzneimittel-Q&A | Beipackzettel erkennen und Dosierung, Risiken und Hinweise beantworten. |
|
||||
| 7 | Patientenverstaendliche Artikel | Krankheitsname und Zielgruppe in einfache Texte ueberfuehren. |
|
||||
| 8 | Bildbefund-Generator | Radiologische Merkmale in strukturierte Berichtsvorlagen schreiben. |
|
||||
| 9 | OP-Bericht | Sprachaufzeichnungen in codierte, strukturierte OP-Dokumentation ueberfuehren. |
|
||||
| 10 | Medikations-Erinnerung | Medikamentenliste analysieren und Erinnerungen samt Warnungen erzeugen. |
|
||||
|
||||
## 6. Cybersicherheit
|
||||
|
||||
Security-Szenarien verbinden Logdaten, Code, Bedrohungswissen und klare Handlungsablaeufe. LLM hilft beim Erklaeren und Priorisieren.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Code-Schwachstellen-Fix | SAST-Ergebnisse erklaeren und Pull-Request-Vorschlaege erzeugen. |
|
||||
| 2 | Phishing-Erkennung | Mailtext, Sender und Links analysieren und Gateway-Regeln anstossen. |
|
||||
| 3 | Security-Tagesbericht | Logs zusammenfassen und wichtige Ereignisse hervorheben. |
|
||||
| 4 | Security-Wissens-Q&A | CVE- und interne Dokumente als RAG-Wissen nutzen. |
|
||||
| 5 | Penetrationstest-Bericht | Schwachstellen in Berichte und Reparaturhinweise ueberfuehren. |
|
||||
| 6 | Malware- und Datenschutzmonitoring | Sandboxsignale auswerten und sensible Daten erkennen. |
|
||||
| 7 | Compliance-Checkliste | Systemtyp in Sicherheitschecklisten nach CIS oder anderen Standards umsetzen. |
|
||||
| 8 | Threat-Intelligence-Q&A | Externe und interne Quellen verbinden und auf eigene Assets beziehen. |
|
||||
| 9 | Incident-Postmortem | Zeitlinie, Ursache und Verbesserungen aus Ereignisdaten erzeugen. |
|
||||
| 10 | Globales Threat-Monitoring | Sicherheitsnews und Disclosure-Daten sammeln, bewerten und melden. |
|
||||
|
||||
## 7. Finanzen und Versicherung
|
||||
|
||||
Finanzszenarien drehen sich um Risiko, Compliance, Dokumente, Beratung und Berichte. AI sollte hier immer mit Audit- und Review-Prozessen gekoppelt werden.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Kredit-Due-Diligence | Unternehmens- und Finanzdaten in Risikoberichte ueberfuehren. |
|
||||
| 2 | Vermoegensberatung | Risikopraeferenz und Zielportfolio analysieren. |
|
||||
| 3 | IPO-Prospekt | Vorlagen fuellen und Datenkonsistenz pruefen. |
|
||||
| 4 | Finanzbericht | Managementanalyse und Warnungen vor Kennzahlenabweichungen erzeugen. |
|
||||
| 5 | Beleg-Q&A | Rechnungen per OCR erkennen und Rueckfragen beantworten. |
|
||||
| 6 | Compliance-Fallrecherche | Straf- und Regulierungsfaelle abrufbar machen. |
|
||||
| 7 | Versicherungscoach | Kundenszenarien simulieren und Skripte bewerten. |
|
||||
| 8 | Versicherungsproduktvergleich | Klauseln strukturieren und Unterschiede hervorheben. |
|
||||
| 9 | Emotionserkennung im Vertrieb | Stimme und Formulierungen fuer Coachinghinweise auswerten. |
|
||||
| 10 | Schadenstatus-Dialog | Police oder Fallnummer abfragen und Status erklaeren. |
|
||||
|
||||
## 8. Unternehmensservices
|
||||
|
||||
Unternehmensservices betreffen CRM, HR, Marketing, Meeting-Workflows und interne Verwaltung. Gute Projekte starten meist bei einem konkreten, wiederkehrenden Prozess.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Kundenabwanderungswarnung | Verhalten erfassen, Churn-Risiko modellieren und Rueckgewinnung empfehlen. |
|
||||
| 2 | B2B-Outreach | Firmendaten filtern und personalisierte E-Mails erzeugen. |
|
||||
| 3 | Sales-Pipeline-Prognose | CRM-Daten analysieren und Zielerreichung vorhersagen. |
|
||||
| 4 | Markenmonitoring | Nachrichten und Social Media auswerten und Krisen frueh erkennen. |
|
||||
| 5 | E-Mail-Assistent | Kontext verstehen und professionelle Antwortentwuerfe erzeugen. |
|
||||
| 6 | CV-Parsing und Matching | Lebenslaeufe extrahieren und passende Stellen empfehlen. |
|
||||
| 7 | Onboarding-Q&A | Handbuecher und Prozesse fuer neue Mitarbeiter abrufbar machen. |
|
||||
| 8 | OKR-Feedback | Zielerreichung analysieren und Feedbackvorschlaege erzeugen. |
|
||||
| 9 | Meeting-Notizen | Transkription, Entscheidungen und Aufgaben automatisch erfassen. |
|
||||
| 10 | Rechnungs- und Spesenprozess | OCR, Plausibilitaetspruefung und Finanzsystemanbindung kombinieren. |
|
||||
|
||||
## 9. Content-Produktion und Betrieb
|
||||
|
||||
Content-Prozesse sind gut geeignet, weil Entwurf, Varianten, Bewertung und Distribution stark wiederholbar sind.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Film- und Romanassistenz | Outline, Figuren, Dialoge und Storystruktur erzeugen. |
|
||||
| 2 | Markenstory und PR-Text | Markenkeywords in mehrere Versionen fuer A/B-Tests umwandeln. |
|
||||
| 3 | Virtueller Livestream-Avatar | Avatar, TTS, LLM-Dialog und OBS-Streaming verbinden. |
|
||||
| 4 | Short-Video-Skript und Schnitt | Skript, Storyboard und Highlight-Clips generieren. |
|
||||
| 5 | Verkaufsgespraech-Skripte | Telefonaufnahmen analysieren und erfolgreiche Formulierungen empfehlen. |
|
||||
| 6 | Marketing-Content-System | Produktdaten in Copy, Bilder und Kampagnenvarianten ueberfuehren. |
|
||||
| 7 | ROI-Monitoring fuer Ads | Plattform-APIs auswerten und Optimierungen vorschlagen. |
|
||||
| 8 | Keyword- und Traffic-Analyse | Suchdaten analysieren und Content-Themen empfehlen. |
|
||||
| 9 | Wettbewerber-Werbung | Anzeigen sammeln und Strategien sowie Creatives vergleichen. |
|
||||
| 10 | Trendanalyse und Redaktionsplan | Hot Topics auswerten und Kalenderplaene erzeugen. |
|
||||
|
||||
## 10. Smart Government
|
||||
|
||||
Verwaltungsprojekte muessen Verstaendlichkeit, Nachvollziehbarkeit und Sicherheit verbinden. AI kann Buergeranliegen strukturieren und interne Arbeit beschleunigen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Buergerhotline-Dispatch | Anruf erkennen, Anliegen klassifizieren und an Abteilungen leiten. |
|
||||
| 2 | Service-Wegweiser | Verwaltungswissen per RAG fuer Verfahren und Politikfragen nutzen. |
|
||||
| 3 | Foerderpolitik-Matching | Unternehmensprofile mit passenden Programmen abgleichen. |
|
||||
| 4 | Unterlagen-Vorpruefung | OCR und Regeln pruefen Vollstaendigkeit und Compliance. |
|
||||
| 5 | Videoanomalie im oeffentlichen Raum | CV erkennt Schlaegerei, Sturz oder andere Risiken. |
|
||||
| 6 | Stadt-Grid-Dispatch | IoT- und Kameradaten in Ereignistypen und Arbeitsauftraege ueberfuehren. |
|
||||
| 7 | Oeffentliche Meinung und Risiko | Hotline, Netzbeobachtung und Umfragen zusammen analysieren. |
|
||||
| 8 | Digitale Archivierung | OCR extrahiert Text; LLM klassifiziert Akten. |
|
||||
| 9 | Notfallressourcen-Dispatch | Ereignisdaten in Reaktionsplaene und Ressourcenverteilung ueberfuehren. |
|
||||
| 10 | Umweltmonitoring | Luftsensoren und CV-Quellen auswerten und Trends erklaeren. |
|
||||
|
||||
## 11. Recht und Vertragsmanagement
|
||||
|
||||
Rechtliche Szenarien profitieren von Dokumentenstrukturierung, Aehnlichkeitssuche und klarer Risikoerklaerung. Fachliche Pruefung bleibt zwingend.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Vertragsrisiko-Agent | Vertragsklauseln gegen Risikolisten pruefen. |
|
||||
| 2 | Vertragslebenszyklus-Review | Regelwerke vergleichen und Aenderungsvorschlaege verfolgen. |
|
||||
| 3 | Gewinnwahrscheinlichkeitsanalyse | Fallmerkmale und aehnliche Urteile auswerten. |
|
||||
| 4 | Gesetzesaenderungsradar | Aenderungen erkennen, zusammenfassen und Auswirkungen melden. |
|
||||
| 5 | Anwaltsschreiben-Entwurf | Sachverhalte in formale Schreiben und Checklisten ueberfuehren. |
|
||||
| 6 | Gerichtstranskription | Audio transkribieren und Streitpunkte mit Zeitstempeln extrahieren. |
|
||||
| 7 | IP-Verletzungsmonitoring | Plattformen beobachten und Beweise sichern. |
|
||||
| 8 | IPO-Datenkonsistenz | Prospektkapitel vergleichen und Abweichungen markieren. |
|
||||
| 9 | Klauseln in Alltagssprache | Markierte Rechtsklauseln einfach erklaeren. |
|
||||
| 10 | Beweisketten-Visualisierung | Materialien hochladen, Beziehungen und Zeitlinien analysieren. |
|
||||
|
||||
## 12. Reise und Mobilitaet
|
||||
|
||||
Reiseszenarien verbinden Planung, Preise, Uebersetzung, Bewertungen und Echtzeitdaten. AI macht aus vielen kleinen Informationen nutzbare Empfehlungen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | AIGC-Reisefuehrer | Tage, Budget und Interessen in Reiseplaene umwandeln. |
|
||||
| 2 | Preisprognose fuer Flug und Hotel | OTA-Daten sammeln, Trends modellieren und Warnungen senden. |
|
||||
| 3 | Reorganisation bei Flugausfall | Statusdaten pruefen und Alternativrouten empfehlen. |
|
||||
| 4 | Visa-Unterlagen-Assistent | Dokumente erkennen, Vollstaendigkeit pruefen und Formulare fuellen. |
|
||||
| 5 | Reiseuebersetzung | Sprache offline uebersetzen und Menuebilder per OCR erklaeren. |
|
||||
| 6 | Hotelbewertungsanalyse | Bewertungen auswerten und Risiken sowie Vorteile verdichten. |
|
||||
| 7 | VR-Zielvorschau | 360-Grad-Bilder und virtuelle Zimmerbesichtigung kombinieren. |
|
||||
| 8 | Reisebericht aus Fotos | Zeit und Ort extrahieren und Social Copy erzeugen. |
|
||||
| 9 | Geschaeftsreise-Abrechnung | Plattform-APIs und Rechnungen fuer Compliance pruefen. |
|
||||
| 10 | Besucherflussprognose | Auslastungsdaten modellieren und Routen mit weniger Andrang empfehlen. |
|
||||
|
||||
## 13. Emotionale Begleitung
|
||||
|
||||
Emotionale AI-Anwendungen verlangen besondere Vorsicht, Datenschutz und klare Eskalationsmechanismen. Sie eignen sich eher als begleitende Assistenz als als Ersatz fuer Fachhilfe.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Virtueller Begleiter | Dialogverlauf speichern und personalisierte Antworten erzeugen. |
|
||||
| 2 | Emotionserkennung und Beratung | Stimme und Text analysieren; Krisenhinweise erkennen. |
|
||||
| 3 | Alzheimer-Training | Kognitive Spiele und Erinnerungsmedien kombinieren. |
|
||||
| 4 | Sozialangst-Coach | Virtuelle soziale Situationen simulieren. |
|
||||
| 5 | Gute-Nacht-Geschichten fuer Kinder | Thema und Vorlieben in personalisierte Geschichten verwandeln. |
|
||||
| 6 | Digitale Erinnerungsperson | Vorhandene Texte und Stimmen fuer Erinnerungsdialoge nutzen. |
|
||||
| 7 | Persoenlichkeitsspiegel | Testdaten in Analyse und empathische Antworten ueberfuehren. |
|
||||
| 8 | Stimmungsmonitor | Tagebuchdaten auswerten und positive Impulse senden. |
|
||||
| 9 | Anonyme Jugendberatung | Niedrigschwellige Gespraeche mit Sicherheitswarnungen kombinieren. |
|
||||
| 10 | Virtuelles Haustier | Persoenlichkeitsmodell und Interaktion wachsen lassen. |
|
||||
|
||||
## 14. Unterhaltung und Freizeit
|
||||
|
||||
Unterhaltungsszenarien nutzen AI fuer Story, Personalisierung, Audio, Video und Gameplay. Der Kern ist meist ein besseres Erlebnis, nicht nur Automatisierung.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Open-World-NPC-Engine | Verhaltensbaum und LLM-Dialoge verbinden. |
|
||||
| 2 | Murder-Mystery-DM-Assistent | Entscheidungen in Hinweise, Logik und Zweige ueberfuehren. |
|
||||
| 3 | Interaktive Romanenden | Leserwahl in alternative Enden umwandeln. |
|
||||
| 4 | 3D-Charaktergenerierung | Textbeschreibung in Skizze, Modell und Material ueberfuehren. |
|
||||
| 5 | E-Sport-Kommentator | Spielbild analysieren und Kommentare erzeugen. |
|
||||
| 6 | Humor-Empfehlung | Nutzerprofil mit passenden Inhalten abgleichen. |
|
||||
| 7 | AI-Stimmkorrektur | Rauschen reduzieren und Gesangsstimme verbessern. |
|
||||
| 8 | Serienclip-Extraktion | Figurenbezogene Szenen erkennen und schneiden. |
|
||||
| 9 | Mehrrollen-Hoerbuch | Rollen verteilen, Stimmen erzeugen und Effekte mischen. |
|
||||
| 10 | Spielanalyse-Coach | Partien auswerten und Trainingshinweise geben. |
|
||||
|
||||
## 15. E-Commerce Services
|
||||
|
||||
E-Commerce-Projekte zielen auf schnellere Content-Produktion, bessere Conversion, Kundenservice und Preis- oder Trendanalyse.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Produktdetailseiten-Batchproduktion | Produktdaten in Selling Points, Szenen und Bilder ueberfuehren. |
|
||||
| 2 | Virtuelles Kleidermodel | Produktbilder in Try-on und Demo-Videos umwandeln. |
|
||||
| 3 | Mehrsprachige Lokalisierung | Produkttexte uebersetzen und kulturell anpassen. |
|
||||
| 4 | Sentimentbasierter Kundenbot | Beratungsgespräche analysieren und passende Antworten erzeugen. |
|
||||
| 5 | Digitaler Livestream-Verkauf | Avatar, Produktdaten und Echtzeitskript verbinden. |
|
||||
| 6 | Preisvergleichs-Plugin | Preise crawlen, Trends zeigen und Warnungen ausloesen. |
|
||||
| 7 | Kaeuferbild-Auswahl und Short-Video | UGC bewerten und in Video-Vorlagen einsetzen. |
|
||||
| 8 | Verkaufsdialog-Analyse | ASR und Compliance-Check mit Skriptempfehlung kombinieren. |
|
||||
| 9 | Trend- und Bestseller-Prognose | Social- und Shopdaten fuer Produktauswahl analysieren. |
|
||||
| 10 | Private-Traffic-Cluster | Nutzerverhalten clustern und Marketingautomatisierung ausloesen. |
|
||||
|
||||
## 16. Energie
|
||||
|
||||
Energieszenarien verbinden Messdaten, Prognosen, Inspektion und Nachhaltigkeitsberichte. AI hilft vor allem bei Analyse und operativer Empfehlung.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Stromverbrauchsanalyse | Smart-Meter-Daten auswerten und Sparhinweise geben. |
|
||||
| 2 | PV-Defekterkennung | Drohnenbilder und Thermodaten fuer Defektmarkierung nutzen. |
|
||||
| 3 | Strompreisstrategie | Marktpreise prognostizieren und Handelsstrategie erzeugen. |
|
||||
| 4 | Batteriegesundheit | Betriebsdaten analysieren und Thermal-Runaway-Risiken warnen. |
|
||||
| 5 | CO2-Footprint und ESG | Energieverbrauch in Emissionen und Berichte umrechnen. |
|
||||
| 6 | Netzlast bei Extremwetter | Wetter- und Lastdaten fuer Dispatch-Strategien nutzen. |
|
||||
| 7 | Tankstellen-Sicherheitsvideo | Riskante Handlungen erkennen und Alarm senden. |
|
||||
| 8 | Pipeline-Lecksuche | Akustiksensoren analysieren und Leckposition berechnen. |
|
||||
| 9 | Virtuelles Kraftwerk | Dezentrale Ressourcen buendeln und Handelsentscheidungen unterstuetzen. |
|
||||
| 10 | Minensicherheit | Standortdaten verfolgen und Sperrzonenalarm ausloesen. |
|
||||
|
||||
## 17. Audio und Video
|
||||
|
||||
Audio- und Videoszenarien verbessern Produktion, Restauration, Transkription und Wiederverwertung von Medieninhalten.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Highlight-Erkennung | Langvideos analysieren und kurze Clips schneiden. |
|
||||
| 2 | Rauschtrennung | Audiomodelle entfernen Hintergrund und verstaerken Stimme. |
|
||||
| 3 | 4K-Restauration | Super-Resolution und Kolorierung fuer alte Aufnahmen nutzen. |
|
||||
| 4 | TTS-Synchronisation | Mehrere Stimmen und Emotionen generieren. |
|
||||
| 5 | Bilinguale Untertitel | ASR, Uebersetzung und Untertitel-Overlay kombinieren. |
|
||||
| 6 | Objektentfernung im Video | Tracking und Inpainting fuer konsistente Frames nutzen. |
|
||||
| 7 | Lizenzfreie Musik | Musikmodelle erzeugen Stilvarianten und pruefen Rechte. |
|
||||
| 8 | Stimmklon und Voice Conversion | Wenige Samples fuer personalisierte Stimmen nutzen. |
|
||||
| 9 | Drehbuch zu Storyboard | Skripte parsen und Vorschauvideos generieren. |
|
||||
| 10 | Meeting-Transkription | Sprechertrennung, Aufgabenextraktion und Zeitstempel erzeugen. |
|
||||
|
||||
## 18. AI-Marketing
|
||||
|
||||
AI-Marketing kombiniert Content-Erstellung, Layout, Trendanalyse, Budgetsteuerung und Markenmonitoring.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Virale Social-Copy | Themen in kurze, teilbare Copy mit Hashtags umsetzen. |
|
||||
| 2 | Posterlayout | Copy und Vorlage in mehrere Formate exportieren. |
|
||||
| 3 | Markenlogo und VI | Markenkeywords in Logoideen und visuelle Regeln verwandeln. |
|
||||
| 4 | Trend-Hunting | Hot Topics sammeln und Marketingwinkel ableiten. |
|
||||
| 5 | ROI- und Budgetsteuerung | Ad-Plattformdaten analysieren und Gebote optimieren. |
|
||||
| 6 | Wettbewerber-Wochenbericht | Konkurrenzinhalte sammeln, Strategien erkennen und berichten. |
|
||||
| 7 | SEO-Artikel-Batch | Keywords analysieren und Artikel mit Optimierungshinweisen erzeugen. |
|
||||
| 8 | Personalisierte Marketingmail | Nutzerprofile in individuelle E-Mails und A/B-Tests uebersetzen. |
|
||||
| 9 | Markenreputation | Netzweite Stimmung auswerten und Krisenwarnungen senden. |
|
||||
| 10 | Short-Video-Storyboard | Thema in Skript, Shots und Drehhinweise ueberfuehren. |
|
||||
|
||||
## 19. Datenintelligenz
|
||||
|
||||
Datenintelligenz macht Daten fuer Fachbereiche nutzbar: Fragen, Visualisierungen, Qualitaet, Governance und Kennzahlendefinitionen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Text-to-SQL-Datenabfrage | Natuerliche Sprache in SQL und Visualisierung umwandeln. |
|
||||
| 2 | Dialogisches BI | Eine Frage erzeugt Diagramme und alternative Darstellungen. |
|
||||
| 3 | Screenshot zu Excel | Tabellenstrukturen per VLM erkennen und exportieren. |
|
||||
| 4 | Bild zu Tabelle | OCR erkennt Zellstruktur und Daten. |
|
||||
| 5 | Wissensgraph aus heterogenen Daten | Entitaeten und Beziehungen extrahieren und speichern. |
|
||||
| 6 | Berichtserklaerung | Diagramme oder Daten hochladen und Trends erklaeren lassen. |
|
||||
| 7 | Schema-Q&A | Tabellen und Felder erklaeren und Beispiel-SQL erzeugen. |
|
||||
| 8 | Master-Data-Deduplizierung | Mehrere Quellen abgleichen und Dubletten zusammenfuehren. |
|
||||
| 9 | Datenanforderung zu Testfaellen | Anforderungen in Pruefszenarien und Validierungen uebersetzen. |
|
||||
| 10 | Kennzahlen-Q&A | Definitionen, Berechnungslogik und Abhaengigkeiten abrufbar machen. |
|
||||
@@ -0,0 +1,496 @@
|
||||
---
|
||||
title: 'Mit Jobs to Be Done herausfinden, was Nutzer wirklich erreichen wollen'
|
||||
description: 'Ein Einführungsartikel zu Jobs to Be Done für Einsteiger. Verstehen Sie, dass Nutzer keine Funktionen kaufen, sondern in bestimmten Szenarien Ihr Produkt "einstellen", um einen Fortschritt zu erzielen. Lernen Sie, mit JTBD Produktrichtungen, Interviewfragen und AI-Prompts zu strukturieren.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>1,5 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# Mit Jobs to Be Done herausfinden, was Nutzer wirklich erreichen wollen
|
||||
|
||||
<a id="top-jtbd"></a>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['JTBD', 'Nutzerbedürfnisse', 'Produktdenken', 'Bedarfserkenntnis']"
|
||||
coreOutput="1 JTBD-Satz, der einem echten Bedarf näher kommt"
|
||||
expectedOutput="Eine vage Idee zu einem konkreteren Nutzerszenario und einer MVP-Richtung verdichten können"
|
||||
>
|
||||
|
||||
Viele Anfänger machen bei der Produktentwicklung am häufigsten den Fehler, ihre gesamte Aufmerksamkeit auf "Welche Funktionen will ich bauen" zu richten. Man sieht, dass andere intelligente Kategorisierung haben, man will auch welche; man sieht, dass andere automatische Zusammenfassung haben, man will auch welche; man sieht, dass andere Agenten, Multimodalität und Workflows gebaut haben, man fühlt sich auch nicht zurückbleiben.
|
||||
|
||||
In der Realität entscheiden sich Nutzer aber selten deshalb für ein Produkt, weil "der Funktionsname cool klingt". Vielmehr möchten sie in einem bestimmten Moment etwas voranbringen und "stellen" ad hoc ein Werkzeug, einen Service oder sogar eine Person ein, die ihnen bei diesem Schritt hilft.
|
||||
|
||||
Genau das ist es, was die **Jobs to Be Done (JTBD)** -Methode uns verdeutlichen will: **Nutzer kaufen nicht die Funktion an sich, sondern stellen eine Lösung ein, die ihnen hilft, einen Fortschritt zu erzielen.**
|
||||
|
||||
Dieser Artikel führt Sie in verständlicher Sprache durch JTBD und macht es zu einem Analysewerkzeug, das Sie direkt bei der Entwicklung von AI-Anwendungen einsetzen können.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Minimales SOP
|
||||
**Ziel**: Nach dem Lesen wissen Sie besser, wie Sie eine vage Idee in einen Satz mit echtem Nutzerszenario verdichten, anstatt nur eine Sammlung von Funktionsnamen im Kopf zu haben.
|
||||
|
||||
**Aktionspunkte**: 1 vage Idee aufschreiben, 3 potenzielle Nutzer nach "Wie haben Sie das letzte Mal damit umgebracht" fragen und dann zu 1 JTBD-Satz zusammenfassen.
|
||||
|
||||
**Ergebnis**: Sie erhalten eine klarere Bedarfshypothese und wissen, was in der ersten Version prioritär gelöst werden sollte.
|
||||
|
||||
**Stichwortsprünge**: [Was ist JTBD](#jtbd-what) · [Ein-Satz-Formel](#jtbd-formula) · [Wie AI Ihnen hilft](#jtbd-ai)
|
||||
:::
|
||||
|
||||
## Was Sie lernen werden
|
||||
|
||||
1. Was Jobs to Be Done ist und warum es näher an echten Bedürfnissen liegt als "Funktions-Brainstorming"
|
||||
2. Wie man unterscheidet zwischen "Funktionen, die Nutzer sagen zu wollen" und "was Nutzer wirklich erreichen wollen"
|
||||
3. Wie man mit einer einfachen Vorlage eine vage Idee in Szenario, Auslöser, Hindernis und Erfolgskriterium zerlegt
|
||||
4. Wie man JTBD bei AI-Produkten, Interview-Fragen und Prompt-Strukturierung anwendet
|
||||
|
||||
<a id="jtbd-what"></a>
|
||||
## [1. Was ist Jobs to Be Done?](#top-jtbd)
|
||||
|
||||
Jobs to Be Done wird oft als **JTBD** abgekürzt. Die Kernidee dahinter hängt mit dem klassischen Ausdruck zusammen, den Clayton Christensens Team verbreitet hat: **Nutzer "stellen" ein Produkt ein, um etwas zu erledigen.**
|
||||
|
||||
Dieses "Etwas" ist keine oberflächliche Aktion auf einer To-do-Liste, sondern ein **Fortschritt**, den der Nutzer für seinen Zustand anstrebt. Zum Beispiel:
|
||||
|
||||
- Nicht "Ich brauche ein AI-Protokoll-Tool", sondern "Ich möchte innerhalb von 10 Minuten nach einem Meeting die wichtigsten Punkte, Aufgaben und Verantwortlichen zusammenfassen, anstatt mich auf Erinnerung zu verlassen"
|
||||
- Nicht "Ich brauche eine Haushaltsbuch-App", sondern "Ich möchte wissen, wohin mein Geld geht, damit ich am Monatsende nicht mehr ängstlich bin"
|
||||
- Nicht "Ich brauche einen Lebenslauf-Optimierer", sondern "Ich möchte zuversichtlicher einen ansehnlichen Lebenslauf verschicken, ohne bei jeder Bewerbung zu zweifeln, dass er schlecht geschrieben ist"
|
||||
|
||||
Deshalb konzentriert sich **JTBD nicht darauf, wie das Produkt aussieht, sondern darauf, warum der Nutzer es in diesem Moment braucht.**
|
||||
|
||||
Das erklärt auch, warum viele scheinbar unterschiedliche Produkte tatsächlich um denselben Job konkurrieren. Wenn ein Nutzer "auf dem Arbeitsweg weniger gelangweilt sein" möchte, könnte er Kurzvideos, Podcasts, Spiele, Chats oder sogar Nickerchen einsetzen. Wenn ein Nutzer "ein langes PDF schnell verstehen" möchte, könnte er AI-Zusammenfassungs-Tools, Praktikanten, Kollegen, sich selbst durchbeißen oder es erst einmal liegen lassen.
|
||||
|
||||
Mit dieser Perspektive werden Sie feststellen, dass Ihre wahren Konkurrenten oft nicht nur "eine andere App, die wie Ihre aussieht" sind, sondern **alle akzeptablen Alternativlösungen, die dem Nutzer aktuell zur Verfügung stehen.**
|
||||
|
||||
## 2. Worin unterscheidet sich JTBD von Personas und Funktionslisten?
|
||||
|
||||
Viele Einsteiger beginnen die Bedarfsanalyse mit Personas: 25 Jahre alt, weiblich, Großstadt, Büroangestellte, mag Effizienz-Tools, offen für neue Produkte. Diese Informationen sind nicht ganz nutzlos, aber sie **erklären oft nicht, warum eine Person in diesem Moment handelt.**
|
||||
|
||||
JTBD interessiert sich eher für folgende Fragen:
|
||||
|
||||
- In welchem Szenario hat er beschlossen, nach einer Lösung zu suchen?
|
||||
- Was genau hat ihn blockiert?
|
||||
- Was möchte er zum nächsten Schritt voranbringen?
|
||||
- Mit welchem behelfsmäßigen Ansatz hält er sich aktuell über Wasser?
|
||||
- Welches Ergebnis würde ihn das Gefühl haben lassen: "Es hat sich gelohnt"
|
||||
|
||||
Mit anderen Worten: **Personas beschreiben eher, wer dieser Mensch ungefähr ist; JTBD beschreibt eher, was dieser Mensch jetzt wirklich erreichen will.**
|
||||
|
||||
Gleichzeitig führen Funktionslisten oft in die Irre. Nutzer sagen: "Ich will Word-Export", "Ich will AI-Umschreibung", "Ich will Spracheingabe". Das sind alles oberflächliche Äußerungen. JTBD fragt weiter:
|
||||
|
||||
- Warum benötigen Sie jetzt Word-Export und nicht PDF?
|
||||
- Möchten Sie umschreiben, weil der Stil schlecht ist, oder weil Sie verschiedene Zielgruppen ansprechen müssen?
|
||||
- Möchten Sie Spracheingabe, weil Sie nicht tippen möchten, oder weil Sie häufig unterwegs, beim Autofahren oder direkt nach Meetings aufzeichnen?
|
||||
|
||||
Oft ist **eine Funktion nur eine vorläufige Übersetzung eines Jobs.** Wenn Sie nur Funktionen sammeln, machen Sie leicht ein Produkt, das "alles aufstapelt, was Nutzer sagen". Wenn Sie den dahinterliegenden Job erkennen, haben Sie eher die Chance, eine wirklich handliche und wettbewerbsfähige Lösung zu entwickeln.
|
||||
|
||||
## 3. Ein Beispiel, das auch Einsteiger verstehen
|
||||
|
||||
Lassen Sie uns zunächst nicht an komplexe AI-Produkte denken, sondern mit einem Alltagsbeispiel beginnen.
|
||||
|
||||
Angenommen, jemand hat morgens vor dem Verlassen des Hauses keine Zeit zum Frühstück und kauft oft ein Sandwich und Kaffee am U-Bahn-Eingang. Oberflächlich betrachtet "kauft" er ein Frühstück. Mit der JTBD-Perspektive könnte das, was er wirklich erreichen will, jedoch sein:
|
||||
|
||||
- An einem morgendlichen Tag in Eile mit minimalem geistigen Aufwand eine Mahlzeit organisieren
|
||||
- Sicherstellen, dass er vor der Ankunft im Büro nicht hungrig wird
|
||||
- Sein Arbeitsweg-Tempo nicht durch Frühstück beeinträchtigen
|
||||
|
||||
In diesem Fall stellt der Nutzer nicht "eine bestimmte Sandwich-Marke" ein, sondern eine Lösung, die ihm hilft, seinen Morgen reibungslos zu gestalten. Wenn der nahe gelegene Supermarkt schneller, näher und zuverlässiger ist, könnte er sofort wechseln.
|
||||
|
||||
Diesen Logik auf AI-Produkte übertragen, wird es noch offensichtlicher.
|
||||
|
||||
Wenn Sie beispielsweise ein "AI-Meeting-Protokoll-Tool" entwickeln möchten, würden Sie auf Funktionsebene leicht darüber nachdenken:
|
||||
|
||||
- Audio-Upload unterstützen
|
||||
- Sprecher-Trennung integrieren
|
||||
- Markdown-Export anbieten
|
||||
- Automatische Aufgaben generieren
|
||||
|
||||
Das alles ist nicht falsch, aber noch nicht ausreichend. Mit JTBD eine Ebene tiefer gefragt, könnte der Nutzer Folgendes wirklich erreichen wollen:
|
||||
|
||||
- Innerhalb von 10 Minuten nach dem Meeting die Diskussionsergebnisse an nicht anwesende Personen weiterleiten
|
||||
- Aufgaben, Verantwortliche und Fristen sauber extrahieren, damit das Team nicht aus dem Gedächtnis zusammenarbeiten muss
|
||||
- Die Zeit für wiederholtes Zusammenfassen von Meeting-Inhalten reduzieren und Energie für Entscheidungen und Fortschritt aufwenden
|
||||
|
||||
Sobald der Job klar formuliert ist, ergeben sich viele Funktionsprioritäten automatisch. Vielleicht ist das Wichtigste in der ersten Version nicht "12 Exportformate unterstützen", sondern:
|
||||
|
||||
- Protokollstruktur muss klar genug sein
|
||||
- Aufgabenerkennung muss zuverlässig sein
|
||||
- Freigabelink muss bequem sein
|
||||
- Ergebnisse müssen direkt an das Team weitergeleitet werden können
|
||||
|
||||
Das ist der Wert von JTBD: **Es hilft Ihnen, von "Welche Fähigkeiten will ich aufstapeln" zurückzukehren zu "Welchen Fortschritt will ich dem Nutzer ermöglichen".**
|
||||
|
||||
## 4. Eine nützliche JTBD-Vorlage
|
||||
|
||||
Wenn Sie Einsteiger sind, müssen Sie JTBD zunächst nicht zu akademisch betrachten. Konzentrieren Sie sich auf die 5 wichtigsten Elemente.
|
||||
|
||||
### 4.1 Szenario
|
||||
|
||||
In welchem Moment und in welcher Umgebung denkt der Nutzer an dieses Produkt?
|
||||
|
||||
- Nach einem Meeting
|
||||
- Wenn der Chef spontan Material anfordert
|
||||
- Abends bei der Vorbereitung einer Bewerbung
|
||||
- Am Monatsende, wenn das Geld wieder nicht reicht
|
||||
|
||||
**Ein Bedarf ohne Szenario ist meist noch nicht echt genug.**
|
||||
|
||||
### 4.2 Auslöser
|
||||
|
||||
Was bringt ihn dazu, sofort nach einer Lüsung zu suchen?
|
||||
|
||||
- Von langen Dokumenten überwältigt und weiß nicht, wo man anfangen soll
|
||||
- Morgen muss Material abgegeben werden, heute erst gemerkt, dass das Format chaotisch ist
|
||||
- Gerade vom Chef nach dem Fortschritt gefragt und bemerkt, dass man nicht klar zusammengefasst hat
|
||||
- Möchte kontinuierlich aufzeichnen, aber handschriftlich, kopieren und zusammenstellen ist zu aufwendig
|
||||
|
||||
Auslöser sind oft emotional aufgeladen. Diese Emotion ist wichtig, denn sie bestimmt, warum der Nutzer in diesem Moment handelt.
|
||||
|
||||
### 4.3 Gewünschter Fortschritt
|
||||
|
||||
Er will nicht nur "eine Aktion ausführen", sondern sich in einen neuen Zustand bringen:
|
||||
|
||||
- Von Chaos zu Klarheit
|
||||
- Von Angst zu Sicherheit
|
||||
- Von Aufschieben zu Aufbrechen
|
||||
- Von Ineffizienz zu Leichtigkeit
|
||||
- Von Unklarheit zu direkter Lieferung
|
||||
|
||||
In diesem Schritt ist das Wort "Fortschritt" entscheidend. Denn viele kaufen nicht das Werkzeug, sondern die **Zustandsveränderung.**
|
||||
|
||||
### 4.4 Aktuelle Alternativlösung
|
||||
|
||||
Wie macht er es ohne Ihr Produkt?
|
||||
|
||||
- Manuell kopieren und einfügen
|
||||
- Mit Excel oder Notizen kämpfen
|
||||
- Kollegen um Hilfe bitten
|
||||
- Aufschieben
|
||||
- Zwischen mehreren Tools hin- und herwechseln
|
||||
|
||||
Wer die Alternative ist, das ist Ihre echte Wettbewerbsumgebung.
|
||||
|
||||
### 4.5 Erfolgskriterium
|
||||
|
||||
Wann gilt das Problem als wirklich gelöst?
|
||||
|
||||
- Innerhalb von 10 Minuten ein teilbares Ergebnis erhalten
|
||||
- Ohne größere Nachbearbeitung an andere versenden können
|
||||
- Keine wichtigen Punkte übersehen, keine Fehler machen, nichts vergessen
|
||||
- Beim ersten Mal wissen, wie es weitergeht
|
||||
|
||||
Wenn Sie nicht einmal sagen können, "wie der Nutzer beurteilt, ob es sich gelohnt hat", ist die Richtung wahrscheinlich noch nicht ausreichend konvergiert.
|
||||
|
||||
<a id="jtbd-formula"></a>
|
||||
## [5. Eine direkt anwendbare Ein-Satz-Formel](#top-jtbd)
|
||||
|
||||
Wenn Sie eine Produktrichtung strukturieren möchten, können Sie zunächst diese sehr praktische Formel verwenden:
|
||||
|
||||
> Wenn __________, möchte ich __________, um __________.
|
||||
> Aktuell kann ich __________ nur mühsam nutzen, um dieses Ziel zu erreichen.
|
||||
|
||||
Beispiel:
|
||||
|
||||
> Wenn ich nach einem informationsreichen Projektmeeting fertig bin, möchte ich schnell ein Protokoll mit Aufgaben, Verantwortlichen und Fristen erhalten, um sofort mein Team zu informieren und die Umsetzung voranzutreiben.
|
||||
> Aktuell kann ich nur durch eigene Erinnerung, Durchsuchen von Chat-Verläufen und manuelle Zusammenstellung mühsam dieses Ziel erreichen.
|
||||
|
||||
Ein weiteres Beispiel:
|
||||
|
||||
> Wenn ich mich auf eine neue Stelle bewerbe, möchte ich schnell meine bisherigen Erfahrungen in eine Version umschreiben, die besser zur Stelle passt, um zuversichtlicher einen ansehnlichen Lebenslauf verschicken zu können.
|
||||
> Aktuell kann ich nur durch wiederholtes Kopieren des alten Lebenslaufs und manuelles Ändern der Formulierungen mühsam dieses Ziel erreichen, und am Ende bin ich immer unsicherer.
|
||||
|
||||
Wenn Sie einen Satz auf diese Klarheitsstufe bringen können, wird das darauf folgende Seitendesign, die Prompt-Gestaltung und die Priorisierung von Funktionen deutlich einfacher.
|
||||
|
||||
## 6. Bei AI-Produkten: Drei Job-Ebenen besonders beachten
|
||||
|
||||
Viele AI-Produkte wirken in Funktionsdemonstrationen beeindruckend, können Nutzer nach dem echten Launch jedoch nicht halten. Der häufige Grund: Nur die oberflächliche Aktion wurde gelöst, nicht der tiefere Job.
|
||||
|
||||
Sie können einen Job grob in drei Ebenen unterteilen:
|
||||
|
||||
### 6.1 Funktionsebene
|
||||
|
||||
Was ist die oberflächlichste Aufgabe?
|
||||
|
||||
- Dokumente zusammenfassen
|
||||
- Texte umschreiben
|
||||
- Aufgaben extrahieren
|
||||
- Bilder generieren
|
||||
|
||||
Das ist die Ebene, die Nutzer am leichtesten aussprechen.
|
||||
|
||||
### 6.2 Emotionale Ebene
|
||||
|
||||
Welche Unannehmlichkeit möchte der Nutzer reduzieren oder welches Gefühl gewinnen?
|
||||
|
||||
- Nicht so in Panik sein wollen
|
||||
- Nicht unprofessionell wirken wollen
|
||||
- Nicht jedes Mal bei null anfangen wollen
|
||||
- Mehr Kontrolle haben wollen
|
||||
|
||||
Viel Zahlungsbereitschaft hängt tatsächlich stark mit der emotionalen Ebene zusammen.
|
||||
|
||||
### 6.3 Soziale Ebene
|
||||
|
||||
Wie möchte der Nutzer in den Augen anderer erscheinen?
|
||||
|
||||
- Zuverlässiger wirken
|
||||
- Im Team besser organisiert erscheinen
|
||||
- Vor Kunden professioneller auftreten
|
||||
- Auf Social-Media-Plattformen besser ausdrücken können
|
||||
|
||||
Wenn Sie nur die Funktionsebene bedienen, ist das Produkt leicht ersetzbar; wenn Sie gleichzeitig die emotionale und soziale Ebene verstehen, finden Sie eher einen wirklich klebrigen Wert.
|
||||
|
||||
## 7. JTBD umgekehrt zur Produktrichtungsfilterung nutzen
|
||||
|
||||
Manchmal haben Sie noch kein Produkt, sondern 3 bis 5 Ideen und wissen nicht, welche Sie umsetzen sollen. JTBD eignet sich hervorragend als Filter.
|
||||
|
||||
Nehmen Sie jede Idee und stellen Sie sich 5 Fragen:
|
||||
|
||||
1. Ist das Szenario, das dieser Idee entspricht, konkret genug?
|
||||
2. Nutzt der Nutzer bereits eine behelfsmäßige Lösung?
|
||||
3. Ist der Schmerz dieses Jobs stark genug oder häufig genug?
|
||||
4. Wenn ich es gut mache, wird der Nutzer merklich "eine Zustandsverbesserung" spüren?
|
||||
5. Kann die erste Version nur um den wichtigsten Schritt dieses Jobs herum eine sehr kleine, aber nützliche Version sein?
|
||||
|
||||
Wenn eine Richtung am Ende nur "klingt interessant" ist, aber keine klaren Auslöser, Alternativlösungen und Erfolgskriterien formuliert werden kann, ist sie wahrscheinlich eher eine vage Inspiration als eine ausgereifte Richtung.
|
||||
|
||||
## 8. Interview-Fragen, die Sie direkt verwenden können
|
||||
|
||||
Viele beginnen eine Umfrage mit: "Welche Funktionen möchten Sie?" Diese Frage liefert leicht oberflächliche Antworten.
|
||||
|
||||
JTBD eignet sich besser für folgende Fragen:
|
||||
|
||||
- Wann hatten Sie das letzte Mal dieses Problem?
|
||||
- Was haben Sie damals getan und warum sind Sie hängengeblieben?
|
||||
- Wie haben Sie es schließlich gelöst?
|
||||
- Was war in diesem Prozess das Nervigste, Langsamste oder Beunruhigendste?
|
||||
- Wenn es ein Tool gäbe, das Ihnen hilft: Welches Ergebnis würde Sie wirklich überzeugen?
|
||||
- Welche Alternativmethoden haben Sie ausprobiert und warum waren sie nicht gut genug?
|
||||
|
||||
Diese Frageweise hat einen Vorteil: Sie bringt das Gespräch zurück zu echten Erlebnissen, anstatt bei imaginären Präferenzen zu bleiben.
|
||||
|
||||
## 9. AI nutzen, um JTBD-Analyse durchzuführen
|
||||
|
||||
JTBD wurde nicht von AI erfunden, aber AI eignet sich hervorragend, um JTBD zu ordnen und zu destillieren.
|
||||
|
||||
Wenn Sie beispielsweise 5 bis 10 Nutzer-Feedbacks gesammelt haben, können Sie diese dem Modell geben und es bitten, nach folgender Struktur zusammenzufassen:
|
||||
|
||||
```text
|
||||
Bitte spiele die Rolle eines Produktforschungsassistenten.
|
||||
Ich werde dir einige Nutzer-Originalzitate geben. Bitte gib zunächst keine Funktionsvorschläge,
|
||||
sondern ordne sie nach dem Jobs-to-Be-Done-Framework:
|
||||
|
||||
1. In welchem Szenario befindet sich der Nutzer
|
||||
2. Was ist das auslösende Ereignis für seine Handlung
|
||||
3. Welchen Fortschritt möchte er wirklich erreichen
|
||||
4. Was ist die aktuelle Alternativlösung
|
||||
5. Welches Erfolgskriterium ist ihm am wichtigsten
|
||||
6. Welche Emotionswörter tauchen in diesen Feedbacks wiederholt auf
|
||||
|
||||
Fasse abschließend diese Inhalte in 3 priorisierte JTBD-Hypothesen zusammen.
|
||||
```
|
||||
|
||||
Wenn Sie bereits eine Idee haben, können Sie AI auch beim ersten Konvergierungsschritt unterstützen:
|
||||
|
||||
```text
|
||||
Ich möchte [Ihre Produktidee] entwickeln.
|
||||
Bitte gib mir nicht direkt eine Funktionsliste, sondern analysiere sie mit der Jobs-to-Be-Done-Methode:
|
||||
|
||||
1. Welche konkreten Szenarien könnte dieses Produkt bedienen
|
||||
2. Was ist der Kern-Job, den der Nutzer in jedem Szenario erreichen will
|
||||
3. Welche bestehenden Alternativlösungen gibt es
|
||||
4. Welcher Job eignet sich am besten als MVP-Startpunkt und warum
|
||||
5. Formuliere den empfohlenen Job als klaren JTBD-Satz
|
||||
```
|
||||
|
||||
Der Vorteil: Sie werden nicht sofort von AI zu "50 Funktionen brainstormen" gedrängt, sondern klären zunächst die Richtung.
|
||||
|
||||
## 10. Die 4 häufigsten Fehler von Einsteigern
|
||||
|
||||
### 10.1 Den Job als Funktionsnamen formulieren
|
||||
|
||||
"AI-Zusammenfassung", "Intelligente Kategorisierung", "Automatische Generierung" sind keine Jobs, sondern nur mögliche Implementierungsweisen.
|
||||
|
||||
### 10.2 Die Zielgruppe zu weit formulieren
|
||||
|
||||
"Alle Büroangestellten", "Alle Studierenden", "Alle Gründer" sind meist zu allgemein. Je allgemeiner, desto schwerer erkennen Sie echte Szenarien.
|
||||
|
||||
### 10.3 Nur hören, was Nutzer sagen, nicht beobachten, was Nutzer tun
|
||||
|
||||
Nutzer beschreiben, was sie wollen, aber ihre wahren Prioritäten verstecken sich oft darin, wie sie aktuell improvisieren.
|
||||
|
||||
### 10.4 Von Anfang an eine komplette Plattform bauen wollen
|
||||
|
||||
Die richtige Herangehensweise an JTBD ist meist nicht "Ich baue eine All-in-One-Plattform", sondern zunächst den wichtigsten Schritt in einem Szenario ins Visier zu nehmen und ihn sehr handlich zu machen.
|
||||
|
||||
## 11. Zusammenfassung
|
||||
|
||||
Der wertvollste Beitrag von Jobs to Be Done besteht nicht darin, Ihnen ein neues Schlagwort zu geben, sondern Ihnen zu helfen, die Perspektive zu wechseln: **Nicht auf Produktfunktionen starren, sondern darauf, was Nutzer voranbringen möchten.**
|
||||
|
||||
Wenn Sie anfangen, sich wiederholt zu fragen:
|
||||
|
||||
- In welchem Szenario stellen Nutzer dieses Produkt ein
|
||||
- Wo genau hängen sie fest
|
||||
- Mit welcher Methode kämpfen sie sich aktuell durch
|
||||
- Wie ändert sich ihr Zustand, wenn das Problem gelöst ist
|
||||
|
||||
werden Sie feststellen, dass viele ursprünglich vage Ideen plötzlich klar werden und viele ursprünglich beeindruckende Funktionen plötzlich weniger wichtig sind.
|
||||
|
||||
Bei der Produktentwicklung, besonders bei AI-Produkten, ist das Schlimmste, sich von Anfang an in der Präsentation von Fähigkeiten zu verlieren. JTBD hilft Ihnen, die Aufmerksamkeit auf das wirklich Wichtige zurückzulenken: **Warum Nutzer Sie brauchen und welchen Fortschritt Sie ihnen ermöglichen.**
|
||||
|
||||
<a id="jtbd-ai"></a>
|
||||
## [12. Wie Sie AI nutzen können, um JTBD zu praktizieren](#top-jtbd)
|
||||
|
||||
JTBD wurde nicht von AI erfunden, aber AI eignet sich hervorragend als Forschungsassistent, Ordnungsassistent und Gegenüber in dieser Methode. Der Schlüssel: **AI beim Ordnen und Erweitern helfen lassen, nicht Nutzer für Sie erfinden lassen.**
|
||||
|
||||
Sie können es so einsetzen:
|
||||
|
||||
### 12.1 AI helfen lassen, vage Ideen in JTBD-Hypothesen umzuschreiben
|
||||
|
||||
Wenn Sie nur eine vage Beschreibung im Kopf haben, wie "Ich möchte ein Tool entwickeln, das Studierenden bei der Praktikumssuche hilft", können Sie zunächst AI bitten, es in mögliche Jobs aufzuteilen:
|
||||
|
||||
```text
|
||||
Ich habe eine vage Produktidee: [Ihre Idee]
|
||||
Bitte gib mir nicht direkt eine Funktionsliste, sondern analysiere sie mit der Jobs-to-Be-Done-Methode:
|
||||
1. Welche konkreten Szenarien könnten entsprechen
|
||||
2. Welchen Fortschritt wollen Nutzer in jedem Szenario wirklich erreichen
|
||||
3. Welche Alternativlösungen könnten es geben
|
||||
4. Welcher Job eignet sich am besten für ein MVP
|
||||
Formuliere abschließend jeden Job als klaren JTBD-Satz.
|
||||
```
|
||||
|
||||
Sie können die Eingabe auch sehr anfängerhaft formulieren:
|
||||
|
||||
```text
|
||||
Ich möchte etwas entwickeln, das Studierenden bei der Praktikumssuche hilft.
|
||||
Ich kann noch nicht genau sagen, was es sein soll. Hilf mir herauszufinden, was Nutzer wirklich erreichen wollen.
|
||||
```
|
||||
|
||||
AI könnte folgende nützliche Ausgabe liefern:
|
||||
|
||||
```text
|
||||
Mögliche JTBD-Richtungen:
|
||||
|
||||
1. Wenn ich mich zum ersten Mal auf ein Praktikum bewerbe, möchte ich schnell wissen, welche Unterlagen ich zuerst vorbereiten sollte,
|
||||
damit ich nicht wegen Informationschaos meine Bewerbung aufschiebe.
|
||||
|
||||
2. Wenn ich eine Praktikumsstelle sehe, möchte ich schnell beurteilen können, ob es sich lohnt, mich zu bewerben,
|
||||
damit ich nicht zu viel Zeit auf ungeeignete Stellen verschwende.
|
||||
|
||||
3. Wenn ich mit der Bewerbung beginne, möchte ich meinen bestehenden Lebenslauf in eine Version umschreiben, die besser zur Stelle passt,
|
||||
damit ich schneller abschicken und die Erfolgsquote erhöhen kann.
|
||||
```
|
||||
|
||||
Der Wert dieser Ausgabe liegt darin, Ihre ursprünglich sehr allgemeine Idee in mehrere richtungenähere Szenarien aufzuteilen.
|
||||
|
||||
### 12.2 AI beim Ordnen von Interview-Originalzitaten helfen lassen
|
||||
|
||||
Wenn Sie bereits mehrere Nutzer-Interviews durchgeführt haben, können Sie die Interviewaufzeichnungen an AI übergeben und sie bitten, wiederkehrende Szenarien, Auslöser, Alternativlösungen und Erfolgskriterien zu destillieren.
|
||||
|
||||
```text
|
||||
Hier sind die Originalzitate von 5 Nutzern.
|
||||
Bitte gib zunächst keine Lösungsvorschläge, sondern ordne sie nach dem JTBD-Framework:
|
||||
1. In welchem Szenario befindet sich der Nutzer
|
||||
2. Was ist das auslösende Ereignis für seine Handlung
|
||||
3. Welchen Fortschritt möchte er wirklich erreichen
|
||||
4. Was ist die aktuelle Alternativlösung
|
||||
5. Welches Erfolgskriterium ist ihm am wichtigsten
|
||||
6. Welche Informationen tauchen bei mehreren Nutzern wiederholt auf
|
||||
Fasse abschließend in 3 priorisierte JTBD-Hypothesen zusammen.
|
||||
```
|
||||
|
||||
Eine sehr einfache Eingabe könnte so aussehen:
|
||||
|
||||
```text
|
||||
Ich habe 3 Personen gefragt, sie sagten ungefähr Folgendes:
|
||||
|
||||
1. Jedes Mal, wenn ich mich auf ein Praktikum bewerbe, muss ich meinen Lebenslauf neu anpassen. Das ist extrem nervig.
|
||||
2. Was ich eigentlich am meisten fürchte, ist, nicht zu wissen, ob ich es richtig mache.
|
||||
3. Ich lasse derzeit ältere Kommilitonen gegenlesen, aber es ist mir peinlich, ständig um Gefälligkeiten zu bitten.
|
||||
|
||||
Hilf mir herauszufinden, was sie wirklich erreichen wollen.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Zusammenfassung:
|
||||
|
||||
- Gemeinsames Szenario: Vor der Praktikumsbewerbung muss der Lebenslauf bearbeitet werden
|
||||
- Gemeinsame Schwierigkeit: Nicht wissen, wie man es "gut genug" macht
|
||||
- Aktuelle Alternativlösung: Ältere Kommilitonen bitten, selbstständig wiederholt überarbeiten
|
||||
- Möglicher JTBD:
|
||||
Wenn ich mich auf ein Praktikum bewerbe, möchte ich schneller beurteilen können, ob mein Lebenslauf abschickbereit ist,
|
||||
damit ich nicht ständig im "Noch ein bisschen überarbeiten" festhänge und ihn nie verschicke.
|
||||
```
|
||||
|
||||
Diese Ausgabe ist sehr nützlich, denn sie hilft, aus verstreuten Originalzitaten etwas herauszudestillieren, das eher einem "Bedarf" entspricht.
|
||||
|
||||
### 12.3 AI eine leichte Webrecherche durchführen lassen
|
||||
|
||||
Bevor Sie mit umfangreichen Interviews beginnen, können Sie AI zunächst einen leichten Scan externer Informationen durchführen lassen:
|
||||
|
||||
- Wie wird in öffentlichen Foren oder Communitys über dieses Problem geklagt
|
||||
- Welche Probleme lösen bestehende Produkte hauptsächlich
|
||||
- Was ist die häufigste Alternativlösung der Nutzer
|
||||
- Was wird in Bewertungen am meisten gelobt und kritisiert
|
||||
|
||||
Diese Recherche kann echte Nutzer-Interviews nicht ersetzen, eignet sich aber gut als Aufwärmübung in der Discover-Phase, um zunächst eine Problemlandkarte zu erstellen.
|
||||
|
||||
Ein einfacher Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Bitte recherchiere für mich:
|
||||
"Was sind die häufigsten Schmerzpunkte beim Umschreiben von Lebensläufen und Bewerben für Praktika bei Studierenden?"
|
||||
Konzentriere dich auf das, was Leute in öffentlichen Foren, Erfahrungsberichten und Bewerbungs-Communitys selbst sagen.
|
||||
Fasse es in 5 häufigsten Problemen zusammen.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Häufigste Schmerzpunkte:
|
||||
|
||||
1. Nicht wissen, welche Erfahrungen im Lebenslauf stehen sollten
|
||||
2. Nicht wissen, wie man für verschiedene Stellen anpasst
|
||||
3. Nach vielen Überarbeitungen immer noch unsicher, ob es gut genug ist
|
||||
4. Keine zuverlässige Person zum Gegenlesen finden
|
||||
5. Komplexer Bewerbungsprozess, der zum Aufschieben verleitet
|
||||
```
|
||||
|
||||
Diese Art von Ausgabe kann nicht als endgültige Schlussfolgerung dienen, hilft aber zu entscheiden, welche Art von Problem priorisiert interviewt werden sollte.
|
||||
|
||||
### 12.4 AI als "Gegenspieler" fungieren lassen
|
||||
|
||||
Oft sind wir zu sehr mit unseren eigenen Ideen verbunden. Sie können AI gezielt als kritischen Gegenüber einsetzen, der Sie zwingt, das Problem klarer zu formulieren:
|
||||
|
||||
```text
|
||||
Bitte spiele die Rolle eines sehr strengen Produktforschungsberaters.
|
||||
Hier ist meine JTBD-Hypothese: [Ihre Hypothese]
|
||||
Kritisiere sie aus folgenden Perspektiven:
|
||||
1. Ist dieses Szenario zu weit gefasst
|
||||
2. Wurde dieser Job als Funktion statt als echter Fortschritt formuliert
|
||||
3. Ist die Alternativlösung zu schwach
|
||||
4. Ist das Erfolgskriterium unklar
|
||||
5. Was ist das größte Risiko, das bei dieser Hypothese validiert werden muss
|
||||
```
|
||||
|
||||
Der Vorteil: Sie erkennen schneller, ob Sie sich auf den Bedarf oder nur auf Ihre bevorzugte Lösung konzentrieren.
|
||||
|
||||
## Assignments
|
||||
|
||||
Bitte bearbeiten Sie die folgenden Aufgaben basierend auf dem obigen Inhalt:
|
||||
|
||||
1. Wählen Sie eine Produktidee, an die Sie kürzlich gedacht haben, und formulieren Sie sie mit einer JTBD-Formel klar
|
||||
2. Ergänzen Sie diese Idee mit den 5 Elementen: Szenario, Auslöser, Fortschritt, Alternativlösung, Erfolgskriterium
|
||||
3. Finden Sie 3 potenzielle Nutzer und fragen Sie mindestens einmal: "Wann hatten Sie das letzte Mal dieses Problem?"
|
||||
4. Übergeben Sie die Interview-Originalzitate an AI und fassen Sie sie in 3 priorisierte JTBD-Hypothesen zusammen
|
||||
|
||||
## Weiterführende Literatur
|
||||
|
||||
- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
|
||||
- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
|
||||
- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
|
||||
- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
|
||||
@@ -0,0 +1,589 @@
|
||||
---
|
||||
title: 'The Mom Test: Wie man Bedürfnisse durch Nutzerinterviews validiert'
|
||||
description: 'Ein Einführungsartikel zu The Mom Test für Einsteiger. Lernen Sie, höfliches Feedback zu vermeiden und Nutzerinterviews auf der Basis echten Verhaltens, konkreter Fakten und bestehender Probleme durchzuführen.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>1,5 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# The Mom Test: Wie man Bedürfnisse durch Nutzerinterviews validiert
|
||||
|
||||
<a id="top-mom"></a>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Nutzerinterviews', 'Bedarfsvalidierung', 'Nutzerforschung', 'Produktrecherche']"
|
||||
coreOutput="1 Satz Interview-Fragen, die echte Informationen zutage fördern"
|
||||
expectedOutput="Nutzerhöflichkeit nicht mehr als Validierung betrachten und stattdessen echtes Verhalten zur Richtungsbewertung nutzen"
|
||||
>
|
||||
|
||||
Viele denken beim ersten Mal, wenn sie eine Produktrecherche durchführen, das Wichtigste sei "mit jemandem zu sprechen". Also fragen sie Freunde, Kollegen oder sogar Familienmitglieder:
|
||||
|
||||
- Was hältst du von meiner Idee?
|
||||
- Würdest du ein solches Produkt nutzen, wenn es gäbe?
|
||||
- Klingt diese Funktion nicht ganz gut?
|
||||
|
||||
Die anderen geben dann oft sehr ermutigendes Feedback:
|
||||
|
||||
- Das ist toll
|
||||
- Klingt sehr nützlich
|
||||
- Ich denke, du könntest es ausprobieren
|
||||
|
||||
Das Problem ist, dass diese Antworten Ihnen in der Regel nicht bei der Entscheidungsfindung helfen. Sie sind eher Höflichkeit, Unterstützung oder eine natürliche Reaktion, um Ihnen nicht den Wind aus den Segeln zu nehmen. Sie denken, Sie hätten "Marktvalidierung" erhalten, aber tatsächlich haben Sie nur eine Reihe von schwer verwertbaren Trostpflastern gesammelt.
|
||||
|
||||
The Mom Test wurde genau entwickelt, um dieses Problem zu lösen. Es erinnert uns: **Nutzer wollen Sie nicht absichtlich täuschen, sondern Ihre Frageweise führt sie natürlich zu schönen, aber nutzlosen Antworten.**
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Minimales SOP
|
||||
**Ziel**: Nach dem Lesen wissen Sie besser, wie Sie mit Nutzern sprechen, ohne nur "klingt gut" zu hören, sondern wirklich Informationen zu erhalten, die Ihnen bei der Richtungsbewertung helfen.
|
||||
|
||||
**Aktionspunkte**: Ändern Sie Ihre ursprünglich geplanten 5 Fragen und priorisieren Sie "Wann war das letzte Mal" und "Wie haben Sie das damals gelöst".
|
||||
|
||||
**Ergebnis**: Sie können leichter unterscheiden, was Meinungen sind und was wirklich evidenzbasierte Erkenntnisse.
|
||||
|
||||
**Stichwortsprünge**: [Was ist The Mom Test](#mom-what) · [Drei Kernprinzipien](#mom-principles) · [Wie AI Ihnen hilft](#mom-ai)
|
||||
:::
|
||||
|
||||
## Was Sie lernen werden
|
||||
|
||||
1. Welches Problem The Mom Test eigentlich löst und warum viele "Nutzerbefragungen" keine echten Informationen liefern
|
||||
2. Die wichtigsten Prinzipien dieser Methode: Weniger nach Meinungen fragen, mehr nach Verhalten; weniger nach Hypothesen, mehr nach Fakten
|
||||
3. Wie man eine Frage, die leicht zu falsch-positivem Feedback führt, in eine wertvollere Interview-Frage umschreibt
|
||||
4. Wie man The Mom Test mit JTBD, Bedarfsvalidierung und MVP-Bewertung verknüpft
|
||||
|
||||
<a id="mom-what"></a>
|
||||
## [1. Was ist The Mom Test überhaupt?](#top-mom)
|
||||
|
||||
The Mom Test stammt aus dem gleichnamigen Buch von Rob Fitzpatrick. Der Name klingt wie ein Witz, trifft aber den Nagel auf den Kopf:
|
||||
|
||||
**Selbst Ihre Mutter wird Ihnen nur schwer direkt sagen: "Das ist eine schlechte Idee."**
|
||||
|
||||
Der Grund ist nicht, dass sie nicht ehrlich ist, sondern:
|
||||
|
||||
- Sie will Sie nicht verletzen
|
||||
- Sie wird Sie unbewusst ermutigen
|
||||
- Sie neigt dazu, in Ihrem Ausdruck zu antworten
|
||||
|
||||
Nicht nur Mütter, sondern auch Freunde, Kollegen, ehemalige Mitschüler und sogar viele Fremde geben oft ähnliches "positives Feedback", wenn sie mit Ihrer Produktidee konfrontiert werden. Das bedeutet nicht, dass der Bedarf wirklich existiert, sondern nur, dass Sie die Frage so formuliert haben, dass sie leicht eine schöne Antwort provozieren.
|
||||
|
||||
Also geht es bei The Mom Test nie um "Frag deine Mama nicht", sondern:
|
||||
|
||||
**Stellen Sie Ihre Fragen nicht so, dass jeder Ihnen zustimmt.**
|
||||
|
||||
Die Methode will Ihnen beibringen, wie Sie durch Gespräche Informationen erhalten, die näher an echten Bedürfnissen sind, anstatt eine Sammlung von sich gut anfühlenden Kommentaren zu sammeln.
|
||||
|
||||
## 2. Welches Kernproblem es löst
|
||||
|
||||
The Mom Test löst hauptsächlich eine sehr häufige kognitive Täuschung:
|
||||
|
||||
**Höfliches positives Feedback als echten Bedarf zu betrachten.**
|
||||
|
||||
Wenn Sie fragen:
|
||||
|
||||
- Was hältst du von dieser App-Idee?
|
||||
- Würdest du ein AI-Tool nutzen, das dir beim Schreiben von Lebensläufen hilft?
|
||||
- Ist diese Funktion nicht sehr wertvoll?
|
||||
|
||||
Diese Fragen haben gemeinsame Merkmale:
|
||||
|
||||
- Sie fragen nach "Meinungen"
|
||||
- Sie enthalten eine leichte Andeutung
|
||||
- Sie reden über eine Zukunft, die noch nicht eingetreten ist
|
||||
|
||||
Und die Antworten auf "Meinungen" und "zukünftige Hypothesen" sind meist instabil. Viele Menschen überschätzen ihr Interesse, ihre Ausführungsbereitschaft und ihre zukünftige Zahlungsbereitschaft.
|
||||
|
||||
The Mom Test erinnert Sie daran:
|
||||
|
||||
- Vertrauen Sie nicht zu sehr auf die Bewertungen anderer zu Ihrer Idee
|
||||
- Vertrauen Sie nicht zu sehr auf die Vorhersagen anderer zu ihrem zukünftigen Verhalten
|
||||
- Kehren Sie möglichst zu dem zurück, was Nutzer bereits getan haben
|
||||
|
||||
Denn im Vergleich zu "Würden Sie es nutzen" ist "Wie haben Sie das letzte Mal damit umgegangen" oft näher an der Wahrheit.
|
||||
|
||||
<a id="mom-principles"></a>
|
||||
## [3. Die drei wichtigsten Prinzipien](#top-mom)
|
||||
|
||||
Wenn Sie sich nur das Wichtigste merken möchten, starten Sie mit diesen drei Prinzipien.
|
||||
|
||||
### 3.1 Weniger über Ihre Idee reden, mehr über die echten Erfahrungen des Nutzers
|
||||
|
||||
In vielen ineffektiven Interviews wird zu Beginn die eigene Lösung vorgestellt, man erzählt, wie aufregend sie ist und welches Produkt man entwickeln will. Das Problem: Sobald Sie zu viel erzählen, schaltet der andere leicht in den "Unterstützen"- und "Ermutigen"-Modus.
|
||||
|
||||
Besser ist es, den Schwerpunkt auf die Erfahrungen des Gesprächspartners zu legen:
|
||||
|
||||
- Wann hatten Sie das letzte Mal dieses Problem?
|
||||
- Was haben Sie damals getan?
|
||||
- Wie haben Sie es schließlich gelöst?
|
||||
- Welcher Schritt war am mühsamsten?
|
||||
|
||||
Diese Fragen führen das Gespräch natürlicher zurück zur Realität, anstatt bei imaginären Präferenzen zu bleiben.
|
||||
|
||||
### 3.2 Weniger nach abstrakten Meinungen fragen, mehr nach konkreten Fakten
|
||||
|
||||
"Ich finde diese Funktion gut", "Klingt gut", "Scheint nützlich zu sein" – diese Äußerungen sind zu abstrakt, um Produktentscheidungen zu leiten.
|
||||
|
||||
Wertvollere Informationen sehen eher so aus:
|
||||
|
||||
- Letzte Woche habe ich dafür 2 Stunden verschwendet
|
||||
- Aktuell kämpfe ich mit Excel und WeChat
|
||||
- Letzten Monat habe ich bereits für ein ähnliches Tool bezahlt
|
||||
- Meine größte Angst ist es, falsch zu machen, nicht langsam zu sein
|
||||
|
||||
Das sind die Informationen, die Ihnen wirklich helfen, Problemstärke, Häufigkeit und Zahlungsbereitschaft zu beurteilen.
|
||||
|
||||
### 3.3 Weniger fragen, welche Lösung der Nutzer will, mehr beobachten, wie er aktuell löst
|
||||
|
||||
Nutzer sind gut darin, ihre Schwierigkeiten zu beschreiben, aber nicht unbedingt darin, Lösungen zu entwerfen.
|
||||
|
||||
Wenn Sie fragen:
|
||||
|
||||
- Möchten Sie ein AI-Tool, das das automatisch für Sie erledigt?
|
||||
- Denken Sie, eine intelligente Funktion wäre hilfreich?
|
||||
|
||||
Erhalten Sie meist nur eine vage Haltung zu einer Lösung, nicht den Bedarf selbst.
|
||||
|
||||
Bessere Fragen:
|
||||
|
||||
- Welche Methode nutzen Sie aktuell, um dieses Problem zu lösen?
|
||||
- Warum haben Sie sich für diese Vorgehensweise entschieden?
|
||||
- Was ist daran nicht gut genug?
|
||||
|
||||
Die bestehenden Alternativlösungen zu verstehen, ist oft wichtiger als direkt zu fragen, "was wollen Sie".
|
||||
|
||||
## 4. Warum Menschen Ihnen immer schöne, aber nutzlose Antworten geben
|
||||
|
||||
Wenn Sie dies verstehen, werden Sie bei Interviews weniger Fehleinschätzungen machen.
|
||||
|
||||
### 4.1 Menschen sind unbewusst höflich
|
||||
|
||||
Besonders wenn Ihr Gesprächspartner eine Beziehung zu Ihnen hat, wird er nur schwer direkt sagen:
|
||||
|
||||
- Diese Richtung klingt nicht vielversprechend
|
||||
- Ich würde es überhaupt nicht nutzen
|
||||
- Dieses Problem ist für mich nicht so wichtig
|
||||
|
||||
Er wird eher sagen: "Ganz gut", "Man könnte es mal probieren".
|
||||
|
||||
### 4.2 Menschen überschätzen ihr zukünftiges Ich
|
||||
|
||||
Viele glauben ernsthaft, sie würden in Zukunft:
|
||||
|
||||
- Disziplinierter sein
|
||||
- Lernbereiter sein
|
||||
- Zahlungsbereiter sein
|
||||
- Offener für neue Tools sein
|
||||
|
||||
Also bedeutet "Ich würde es nutzen, wenn es gäbe" oft nicht, dass sie es wirklich tun werden.
|
||||
|
||||
### 4.3 Ihre Frageweise selbst führt die Antwort
|
||||
|
||||
Wenn Sie fragen:
|
||||
|
||||
- Ist meine Idee nicht ganz gut?
|
||||
- Ist diese Funktion für Sie nicht sehr hilfreich?
|
||||
|
||||
Haben Sie heimlich die "richtige Antwort" in die Frage eingebaut.
|
||||
|
||||
Deshalb betont The Mom Test besonders: **Machen Sie das Interview nicht zu einer Suche nach Bestätigung.**
|
||||
|
||||
## 5. Direktvergleich: Welche Fragen leicht ins Leere führen, welche wertvoller sind
|
||||
|
||||
Diese Gegenüberstellung wird fast jeder Einsteiger nutzen.
|
||||
|
||||
| Leider nutzlose Fragen | Wertvollere Fragen |
|
||||
| --- | --- |
|
||||
| Was hältst du von meiner Idee? | Wann hattest du das letzte Mal dieses Problem? |
|
||||
| Würdest du dieses Produkt nutzen? | Wie löst du das aktuell? |
|
||||
| Würdest du für diese Funktion bezahlen? | Hast du letztes Mal für dieses Problem Geld ausgegeben? Wofür? |
|
||||
| Findest du diese Funktion wichtig? | Welcher Schritt in diesem Prozess ist am nervigsten, langsamsten oder beunruhigendsten? |
|
||||
| Möchtest du ein AI-Tool, das das automatisch macht? | Warum hast du bisher noch keine bessere Lösung gefunden? |
|
||||
|
||||
Das Wichtigste an dieser Tabelle ist nicht der konkrete Satz, sondern die Richtung dahinter:
|
||||
|
||||
- Von Meinungen zu Fakten
|
||||
- Von der Zukunft zur Vergangenheit
|
||||
- Von Ihrer Lösung zum Problem des Nutzers
|
||||
|
||||
## 6. Eine Interview-Struktur, die Einsteiger sofort nutzen können
|
||||
|
||||
Wenn Sie jetzt sofort jemanden finden und sprechen möchten, können Sie in dieser Reihenfolge vorgehen.
|
||||
|
||||
### 6.1 Eröffnung: Erklären Sie, dass Sie lernen, nicht verkaufen
|
||||
|
||||
Zum Beispiel:
|
||||
|
||||
> Ich erforsche gerade, wie Leute mit solchen Problemen umgehen. Ich möchte die reale Situation verstehen, nicht etwas verkaufen.
|
||||
|
||||
Diese Formulierung macht es dem Gesprächspartner leichter, die psychologische Last "Ich muss positives Feedback geben" abzulegen.
|
||||
|
||||
### 6.2 Mit dem letzten echten Erlebnis beginnen
|
||||
|
||||
Beginnen Sie mit Fragen wie:
|
||||
|
||||
- Wann hatten Sie das letzte Mal dieses Problem?
|
||||
- Was ist damals passiert?
|
||||
- Was war Ihre erste Reaktion?
|
||||
|
||||
Sobald das Gespräch in konkrete Ereignisse eintritt, steigt die Informationsqualität meist deutlich.
|
||||
|
||||
### 6.3 Weiter nach Verhalten, Kosten und Alternativlösungen fragen
|
||||
|
||||
Weiterfragen:
|
||||
|
||||
- Welche Methode nutzen Sie aktuell zur Lösung?
|
||||
- Was ist das Unangenehmste an dieser Methode?
|
||||
- Wie viel Zeit, Geld oder Energie haben Sie dafür aufgewendet?
|
||||
- Haben Sie andere Methoden ausprobiert? Warum nicht weiter verwendet?
|
||||
|
||||
### 6.4 Erst am Ende Schmerzintensität und Priorität bewerten
|
||||
|
||||
Sie müssen nicht direkt nach "Tut es weh?" fragen. Sie können aus Details beurteilen:
|
||||
|
||||
- Tritt es häufig auf
|
||||
* Handelt er bereits aktiv, um Abhilfe zu schaffen
|
||||
* Ist er bereits bereit, dafür Kosten auf sich zu nehmen
|
||||
* Zeigt er beim Erzählen spürbare Emotionen
|
||||
|
||||
All das ist nützlicher als die Frage "Ist das Ihr Schmerzpunkt?".
|
||||
|
||||
## 7. Ein vollständigeres Beispiel
|
||||
|
||||
Angenommen, Sie möchten ein Produkt entwickeln: "AI hilft Studierenden beim Umschreiben von Lebensläufen".
|
||||
|
||||
### Falsche Frageweise
|
||||
|
||||
Sie fragen einen Kommilitonen:
|
||||
|
||||
> Ich möchte ein AI-Lebenslauf-Optimierungstool entwickeln. Was hältst du davon?
|
||||
> Wenn es Lebensläufe automatisch an Stellen anpassen könnte, würdest du es nutzen?
|
||||
|
||||
In diesem Fall wird der andere wahrscheinlich sagen:
|
||||
|
||||
- Klingt gut
|
||||
- Ich denke, das wäre nützlich
|
||||
* Wenn es kostenlos ist, würde ich es ausprobieren
|
||||
|
||||
Diese Antworten helfen Ihnen kaum zu beurteilen, wie stark der Bedarf wirklich ist.
|
||||
|
||||
### Bessere Frageweise
|
||||
|
||||
Sie könnten es so formulieren:
|
||||
|
||||
> Wann hast du zuletzt deinen Lebenslauf geändert?
|
||||
> Warum musstest du ihn ändern?
|
||||
> Wie hast du ihn geändert?
|
||||
> Welcher Schritt war am schwierigsten?
|
||||
> Hast du jemals jemanden gebeten, deinen Lebenslauf gegenzulesen?
|
||||
> Hast du jemals Zeit oder viel Geld für deinen Lebenslauf aufgewendet?
|
||||
|
||||
Durch diese Fragen könnten Sie folgende Informationen erhalten:
|
||||
|
||||
- Viele können nicht schreiben, sondern wissen nicht, wie sie ihn auf verschiedene Stellen anpassen sollen
|
||||
* Ihr größter Schmerz ist nicht das Layout, sondern "nicht zu wissen, welche Erfahrungen erwähnenswert sind"
|
||||
* Sie schieben auf, nicht aus Faulheit, sondern weil jeder Lebenslauf-Änderungsprozess extrem erschöpfend ist
|
||||
* Sie behelfen sich bereits mit Ratschlägen von älteren Kommilitonen, Vorlagen-Websites, AI-Tools und Freunden als Gegenleser
|
||||
|
||||
Jetzt sind Sie dem echten Problem viel näher.
|
||||
|
||||
## 8. Wie The Mom Test und JTBD zusammenarbeiten
|
||||
|
||||
Wenn JTBD Ihnen hilft zu erkennen, "welchen Fortschritt Nutzer erzielen wollen", lehrt The Mom Test Sie eher:
|
||||
|
||||
**Wie Sie durch Interviews bestätigen, ob dieser Job wirklich existiert.**
|
||||
|
||||
Sie können beide Methoden nahtlos verknüpfen:
|
||||
|
||||
1. Zunächst mit JTBD einen Job hypothetisieren
|
||||
2. Dann mit The Mom Test bei Nutzern nach ihren letzten echten Erlebnissen fragen
|
||||
3. Prüfen, ob dieser Job wirklich häufig, echt und priorisierbar ist
|
||||
|
||||
Wenn Ihre JTBD-Hypothese beispielsweise lautet:
|
||||
|
||||
> Wenn ich mich auf ein Praktikum bewerbe, möchte ich meinen alten Lebenslauf schnell in eine Version umschreiben, die zur Stelle passt, um die Bewerbung so bald wie möglich abzuschicken.
|
||||
|
||||
Können Sie mit The Mom Test-Fragen validieren:
|
||||
|
||||
- Wann hast du dich zuletzt beworben?
|
||||
- Wie hast du damals deinen Lebenslauf geändert?
|
||||
- Welcher Abschnitt war am schwersten zu schreiben?
|
||||
- Wie beurteilst du nach der Änderung, ob er gut genug ist?
|
||||
|
||||
So verbinden sich die Methoden:
|
||||
|
||||
- JTBD hilft Ihnen, die Bedarfshypothese zu definieren
|
||||
- The Mom Test hilft Ihnen, die Hypothese durch Interviews zu validieren
|
||||
|
||||
## 9. Die häufigsten Fehler bei Nutzerinterviews
|
||||
|
||||
### 9.1 Das Interview zur Produktvorstellung machen
|
||||
|
||||
Wenn Sie zu viel über Ihre eigene Idee erzählen, fängt der andere leicht an, Ihnen zuzustimmen, anstatt Ihnen die reale Situation zu schildern.
|
||||
|
||||
### 9.2 Nur Bekannte interviewen
|
||||
|
||||
Bekannte können zwar sprechen, neigen aber eher zur Ermutigung. Sie müssen mindestens einige Personen einbeziehen, die näher an echten Nutzern sind.
|
||||
|
||||
### 9.3 Zu früh nach Funktionen fragen
|
||||
|
||||
Wenn Sie das Problem noch nicht verstanden haben und bereits nach Buttons, Oberflächen und Funktionsdetails fragen, betreten Sie zu früh die Lösungsphase.
|
||||
|
||||
### 9.4 Ein "Ich würde es nutzen" als Validierungsergebnis betrachten
|
||||
|
||||
Interviews helfen Ihnen höchstens bei der Richtungsbewertung, sie sind keine abgeschlossene Validierung. Echte Validierung erfordert letztlich, dass Nutzer bereit sind, echte Kosten auf sich zu nehmen: Zeit, Wechselaufwand, Testverhalten oder sogar Bezahlung.
|
||||
|
||||
### 9.5 Nach dem Interview nicht zusammenfassen
|
||||
|
||||
Wenn Sie nach dem Gespräch die Informationen einfach liegen lassen, werden sie schnell zu vagen Eindrücken. Am besten sofort zusammenfassen:
|
||||
|
||||
- Häufig erwähnte Probleme
|
||||
- Emotionswörter aus Nutzerzitaten
|
||||
- Aktuelle Alternativlösungen
|
||||
- Bereits aufgewendete Kosten
|
||||
- Ihre eigenen neuen Einschätzungen
|
||||
|
||||
## 10. Eine Fragenliste, die Sie direkt kopieren können
|
||||
|
||||
Wenn Sie schnell starten möchten, hier eine ausreichend universelle Frageliste.
|
||||
|
||||
### Eröffnungsfragen
|
||||
|
||||
- Wann hatten Sie das letzte Mal dieses Problem?
|
||||
- Was genau ist damals passiert?
|
||||
|
||||
### Verhaltensfragen
|
||||
|
||||
- Wie haben Sie es damals gelöst?
|
||||
- Warum haben Sie sich für diese Vorgehensweise entschieden?
|
||||
|
||||
### Kostenfragen
|
||||
|
||||
- Wie viel Zeit oder Energie kostet Sie diese Angelegenheit normalerweise?
|
||||
- Haben Sie jemals Geld ausgegeben, um es zu lösen?
|
||||
|
||||
### Alternativlösungsfragen
|
||||
|
||||
- Haben Sie andere Tools oder Methoden ausprobiert?
|
||||
- Warum haben Sie sie nicht weiter verwendet?
|
||||
|
||||
### Abschlussfragen
|
||||
|
||||
- Wenn Sie dieses Problem in Zukunft wieder haben: Wie sollte die ideale Lösung Ihrer Meinung nach aussehen?
|
||||
|
||||
Beachten Sie: Diese Abschlussfrage könnte gestellt werden, aber am besten später im Interview. Denn vorher benötigen Sie eher Fakten als Wünsche.
|
||||
|
||||
## 11. Zusammenfassung
|
||||
|
||||
Der wichtigste Beitrag von The Mom Test ist nicht, Ihnen eine "bessere Gesprächsführung" beizubringen, sondern Ihnen eine klarere Urteilsmethode zu geben:
|
||||
|
||||
- Nicht zu schnell das Lob anderer für Ihre Idee glauben
|
||||
- "Ich würde es nutzen, wenn es gäbe" nicht als echten Bedarf betrachten
|
||||
- Das Interview nicht zu einer Suche nach Bestätigung machen
|
||||
|
||||
Echt wertvolle Interviews sollten sich auf Folgendes konzentrieren:
|
||||
|
||||
- Das letzte echte Erlebnis des Nutzers
|
||||
- Wie er aktuell damit umgeht
|
||||
- Welche Kosten er bereits auf sich genommen hat
|
||||
- Wo er offensichtlich Unbehagen verspürt
|
||||
|
||||
Wenn Sie anfangen, so zu fragen, sind die Informationen zwar manchmal weniger schmeichelhaft, aber meist nützlicher.
|
||||
Bei der Produktentwicklung gilt: **Nützliche Wahrheiten sind immer wichtiger als schöne Ermutigungen.**
|
||||
|
||||
<a id="mom-ai"></a>
|
||||
## [12. Wie Sie AI bei Nutzerinterviews unterstützen lassen](#top-mom)
|
||||
|
||||
The Mom Test ist im Kern eine Methode zum "Sprechen mit echten Menschen", daher kann AI reale Interviews nicht ersetzen. Aber AI eignet sich hervorragend als Unterstützung vor, während und nach Interviews, besonders um die Einstiegshürde für Einsteiger zu senken.
|
||||
|
||||
### 12.1 AI helfen lassen, "leicht nutzlose" Fragen umzuschreiben
|
||||
|
||||
Viele wissen, dass sie nicht fragen sollten: "Was hältst du von meiner Idee?" Aber wenn sie anfangen zu sprechen, kehren sie automatisch zu solchen Sätzen zurück. Sie können zunächst Ihre geplanten Interview-Fragen an AI übergeben und sie umschreiben lassen:
|
||||
|
||||
```text
|
||||
Hier sind die Fragen, die ich bei Nutzerinterviews stellen möchte:
|
||||
[Ihre Fragen einfügen]
|
||||
|
||||
Bitte schreibe sie nach den Prinzipien von The Mom Test um:
|
||||
1. Meinungsfragen entfernen
|
||||
2. Zukunfts-Hypothese-Fragen entfernen
|
||||
3. Stattdessen auf vergangenes echtes Verhalten, bestehende Alternativlösungen und bereits aufgewendete Kosten konzentrieren
|
||||
4. Am Ende in eine Liste von 8-10 direkt verwendbaren Interview-Fragen zusammenfassen
|
||||
```
|
||||
|
||||
Eine sehr anfängerhafte Eingabe ist ebenfalls möglich:
|
||||
|
||||
```text
|
||||
Ich möchte Nutzer fragen:
|
||||
1. Was hältst du davon, wenn ich ein AI-Lebenslauf-Tool entwickle?
|
||||
2. Würdest du es nutzen?
|
||||
3. Wärst du bereit, dafür zu bezahlen?
|
||||
|
||||
Bitte schreibe die Fragen besser.
|
||||
```
|
||||
|
||||
AI könnte folgende nützliche Ausgabe liefern:
|
||||
|
||||
```text
|
||||
Umgeschriebene Fragen:
|
||||
|
||||
1. Wann hast du zuletzt deinen Lebenslauf geändert?
|
||||
2. Warum musstest du ihn ändern?
|
||||
3. Wie hast du ihn geändert?
|
||||
4. Welcher Schritt hat am meisten Zeit gekostet?
|
||||
5. Hast du jemanden gebeten, dir beim Gegenlesen zu helfen?
|
||||
6. Hast du jemals Geld oder viel Zeit für die Lebenslaufänderung aufgewendet?
|
||||
```
|
||||
|
||||
Diese Ausgabe ist sehr hilfreich, denn sie ändert Ihre ursprünglichen "nach Meinungen fragenden" Fragen direkt in "nach echtem Verhalten fragende" Fragen.
|
||||
|
||||
### 12.2 AI helfen lassen, verschiedene Interview-Leitfäden für verschiedene Zielgruppen zu erstellen
|
||||
|
||||
Bei derselben Richtung sind die Interview-Schwerpunkte für verschiedene Zielgruppen unterschiedlich. Studierende, HR-Profis, Freiberufler haben völlig unterschiedliche Anliegen. Sie können AI bitten, für jede Zielgruppe einen eigenen Leitfaden zu erstellen:
|
||||
|
||||
- Für neue Nutzer: Schwerpunkt auf dem letzten echten Erlebnis
|
||||
- Für Power-User: Schwerpunkt auf Alternativlösungen und Schmerzintensität
|
||||
- Für zahlende Nutzer: Schwerpunkt auf bereits aufgewendeten Kosten
|
||||
|
||||
So haben Sie beim echten Gespräch mehr Rhythmus und stellen nicht jedem dieselben Fragen.
|
||||
|
||||
Sie könnten direkt so eingeben:
|
||||
|
||||
```text
|
||||
Ich werde mit zwei Arten von Menschen sprechen:
|
||||
1. Studierende, die zum ersten Mal ein Praktikum suchen
|
||||
2. Ältere Kommilitonen, die bereits vielen beim Lebenslauf geholfen haben
|
||||
|
||||
Bitte gib mir jeweils einen Interview-Leitfaden mit 6 Fragen pro Zielgruppe.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Für Studierende:
|
||||
1. Wann hast du dich zuletzt auf ein Praktikum beworben?
|
||||
2. Welcher Schritt war am schwierigsten?
|
||||
3. Woher weißt du, ob dein Lebenslauf bewerbungsbereit ist?
|
||||
...
|
||||
|
||||
Für ältere Kommilitonen:
|
||||
1. Wann hast du zuletzt jemandem beim Lebenslauf geholfen?
|
||||
2. Welche offensichtlichen Probleme siehst du am häufigsten?
|
||||
3. Woran scheitern jüngere Kommilitonen am meisten?
|
||||
...
|
||||
```
|
||||
|
||||
So müssen Sie nicht von null anfangen und die Interview-Vorbereitung wird deutlich entspannter.
|
||||
|
||||
### 12.3 AI beim Ordnen von Interview-Aufzeichnungen helfen lassen
|
||||
|
||||
Nach dem Interview ist das häufigste Problem nicht "keine Informationen", sondern "Informationen sind zu verstreut". AI eignet sich hervorragend, um fragmentierte Gespräche in strukturierte Notizen zu ordnen:
|
||||
|
||||
```text
|
||||
Hier sind meine Interview-Aufzeichnungen mit 3 Nutzern.
|
||||
Bitte ordne sie aus der Perspektive von The Mom Test:
|
||||
1. Was sind Fakten, was sind nur Meinungen
|
||||
2. Was war das letzte echte Verhalten des Nutzers
|
||||
3. Was ist die aktuelle Alternativlösung
|
||||
4. Welche Zeit-, Geld- oder Energiekosten hat der Nutzer bereits aufgewendet
|
||||
5. Welche Probleme wurden wiederholt erwähnt
|
||||
6. Welche Äußerungen klingen positiv, sind aber nicht ausreichend belegt
|
||||
```
|
||||
|
||||
Dieser Schritt ist besonders wertvoll, denn er hilft, "gut klingende" von "wirklich urteilsfähigen" Inhalten zu trennen.
|
||||
|
||||
Eine einfache Eingabe könnte so aussehen:
|
||||
|
||||
```text
|
||||
Hier ist meine Aufzeichnung nach einem Gespräch mit einem Nutzer:
|
||||
|
||||
- Sie sagte, sie würde ein Tool ausprobieren, wenn es eines gäbe
|
||||
- Letzte Woche hat sie einen Abend damit verbracht, ihren Lebenslauf zu ändern
|
||||
- Aktuell lässt sie hauptsächlich Freunde gegenlesen
|
||||
- Sie sagte, das Schwerste sei, nicht zu wissen, wann der Lebenslauf "abschickbereit" ist
|
||||
|
||||
Bitte teile mir mit, was Meinungen und was Fakten sind.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Meinungen:
|
||||
- Sie würde ein Tool ausprobieren, wenn es eines gäbe
|
||||
|
||||
Fakten:
|
||||
- Letzte Woche einen Abend für die Lebenslaufänderung aufgewendet
|
||||
- Aktuelle Alternativlösung: Freunde bitten, gegenzulesen
|
||||
- Hauptschmerz: Nicht wissen, wann man "abschicken kann"
|
||||
|
||||
Für die Bedarfserkenntnis relevante Punkte:
|
||||
- Das Problem ist kürzlich aufgetreten
|
||||
- Der Nutzer hat bereits erhebliche Zeitkosten investiert
|
||||
- Die aktuelle Lösung ist von anderen abhängig und instabil
|
||||
```
|
||||
|
||||
Diese Ausgabe zeigt Einsteigern sehr deutlich: Welche Aussagen für Urteile verwendet werden können und welche nur zur Kenntnis genommen werden sollten.
|
||||
|
||||
### 12.4 AI zunächst eine leichte Webrecherche durchführen lassen
|
||||
|
||||
Wenn Sie noch nicht mit Interviews begonnen haben, können Sie AI zunächst eine sehr leichte externe Recherche durchführen lassen:
|
||||
|
||||
- Wie wird in öffentlichen Communitys über dieses Problem geklagt
|
||||
- Was wird an bestehenden Tools am meisten kritisiert
|
||||
- Ob Nutzer bereits für ähnliche Probleme bezahlen
|
||||
- Welche Alternativlösungen auf dem Markt bereits existieren
|
||||
|
||||
Diese Informationen können echte Interviews nicht ersetzen, helfen aber, schneller in den Zustand zu kommen, in dem Sie wissen, wo Sie ansetzen sollten.
|
||||
|
||||
Ein einfacher Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Bitte recherchiere für mich:
|
||||
"Was beklagen Studierende am häufigsten beim Umschreiben von Lebensläufen"
|
||||
Fasse es in 5 häufigste Beschwerden zusammen, in sehr einfachen Worten.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Häufige Beschwerden:
|
||||
|
||||
1. Nicht wissen, was im Lebenslauf stehen sollte
|
||||
2. Für jede Stelle muss man ihn neu anpassen, das ist zu anstrengend
|
||||
3. Nach vielen Überarbeitungen immer noch unsicher, ob es gut ist
|
||||
4. Niemand gibt verlässliches Feedback
|
||||
5. Man hat ständig das Gefühl, nicht bereit zu sein, also schiebt man es auf
|
||||
```
|
||||
|
||||
Der Wert solcher Ergebnisse liegt darin, dass sie Ihnen den Einstiegspunkt für Interviews erleichtern.
|
||||
|
||||
### 12.5 AI als "Interview-Nachbereitungs-Coach" nutzen
|
||||
|
||||
Sie können auch eine gerade abgeschlossene Interview-Aufzeichnung an AI übergeben und sie bitten, Sie zu kritisieren:
|
||||
|
||||
```text
|
||||
Hier ist eine meiner Nutzer-Interview-Aufzeichnungen.
|
||||
Bitte hilf mir aus der Perspektive von The Mom Test bei der Nachbereitung:
|
||||
1. Bei welchen Fragen suchte ich zu sehr nach Bestätigung
|
||||
2. Welche Fragen hatten offensichtliche Lenkungen
|
||||
3. Wo hätte ich weiter nach Fakten fragen können
|
||||
4. Wenn ich noch einmal könnte, wie könnte dieses Gespräch besser geführt werden
|
||||
```
|
||||
|
||||
Das ist besonders hilfreich für Einsteiger, denn Sie entwickeln schneller ein Gespür dafür, ob Sie "Beweise sammeln" oder "Ermutigung sammeln".
|
||||
|
||||
## Assignments
|
||||
|
||||
Bitte bearbeiten Sie die folgenden Aufgaben basierend auf dem obigen Inhalt:
|
||||
|
||||
1. Wählen Sie eine Produktrichtung, an der Sie kürzlich denken, und schreiben Sie zunächst 5 "leicht nutzlose" Fragen, die Sie ursprünglich gestellt hätten
|
||||
2. Schreiben Sie diese 5 Fragen im Stil von The Mom Test um
|
||||
3. Finden Sie 3 potenzielle Nutzer und fragen Sie mindestens einmal: "Wann hatten Sie das letzte Mal dieses Problem?"
|
||||
4. Nach dem Interview ordnen Sie 4 Arten von Informationen: Echtes Verhalten, Alternativlösungen, bereits aufgewendete Kosten, wiederkehrende Schwierigkeiten
|
||||
|
||||
## Weiterführende Literatur
|
||||
|
||||
- [The Mom Test Offizielle Website](https://momtestbook.com/)
|
||||
- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
|
||||
@@ -0,0 +1,650 @@
|
||||
---
|
||||
title: 'Prototyp erstellen - Von der Geschäftsanalyse zur Multi-Page-Produktprototyp-Implementierung'
|
||||
description: 'Den vollständigen Kreislauf von der Geschäftsanalyse zur Multi-Page-Produktprototyp-Implementierung erleben. Lernen Sie, wie man das Geschäft befragt, Anforderungen zerlegt, AI IDE für Single-Page- und Multi-Page-Anwendungen nutzt und den Prototyp optimiert und testet.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Etwa <strong>8 Stunden</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['de-de/stage-1/building-prototype'] ?? []
|
||||
</script>
|
||||
|
||||
# Anfänger III: Prototyp erstellen
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Geschäftsanalyse', 'Prototyp-Design', 'AI-unterstützte Programmierung', 'Multi-Page-Anwendung']" coreOutput="1 E-Commerce-Material-Workspace-Prototyp" expectedOutput="Interaktiver Web-Prototyp">
|
||||
|
||||
Im letzten Kapitel haben wir gelernt, wie man <strong>gute Ideen findet</strong> — von Nutzerbedürfnissen ausgehend und Richtungen findet, für die jemand zu zahlen bereit ist. Aber eine Richtung zu finden ist nur der erste Schritt. <strong>Die wahre Herausforderung für Produktmanager ist: Wie verwandelt man vage Anforderungen in ein nutzbares Produkt?</strong>
|
||||
|
||||
Dieses Kapitel löst ein <strong>reales Problem</strong>: Der Chef gibt Ihnen den Satz "Nutze AI, um die Effizienz beim Veröffentlichen von Produkten auf E-Commerce-Plattformen zu steigern" — wie machen Sie daraus einen <strong>nutzbaren Produktprototyp</strong>?
|
||||
|
||||
Im Gegensatz zum Snake-Spiel oder Taschenrechner zuvor <strong>kann man bei echten Geschäften nicht einfach Funktionen erfinden</strong>:
|
||||
|
||||
1. <strong>Schmerzpunkte klären</strong>: Mit dem Operations-Team sprechen, aus dem vagen "Effizienz steigern" die <strong>echten Schmerzpunkte</strong> herausholen
|
||||
2. <strong>Prioritäten setzen</strong>: Aus vielen Problemen zunächst das <strong>schmerzhafteste</strong> lösen, nicht alles auf einmal
|
||||
3. <strong>Schnell validieren</strong>: Mit AI IDE zunächst einen <strong>Single-Page-Prototyp</strong> erstellen, wenn er funktioniert, zu Multi-Page erweitern
|
||||
4. <strong>Etwas Nutzbares erstellen</strong>: Am Ende einen <strong>demo-fähigen, bedienbaren E-Commerce-Material-Workspace</strong> liefern
|
||||
|
||||
Wir lernen den <strong>Übergang vom Spielzeug zur Anwendung</strong> und entwickeln <strong>Einfühlungsvermögen und das Nachdenken über echte Kundenbedürfnisse</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Hinweis
|
||||
In diesem Artikel könnten einige Geschäftsbegriffe vorkommen. Wenn Sie diese nicht verstehen, können Sie AI um eine Erklärung bitten.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
|
||||
{ title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
|
||||
{ title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
|
||||
{ title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Anforderungen klären, bevor man Code schreibt
|
||||
|
||||
In den bisherigen Tutorials haben wir mit AI IDE mühelos Snake und verschiedene kleine Spiele generiert, aber das sind lediglich Spielzeugprojekte, die nicht im Berufs- oder Alltag eingesetzt werden können. Wenn wir AI-Fähigkeiten wirklich für alle nutzbar machen wollen, sollten wir Vibe Coding mit Lebens- und Arbeitsszenarien verbinden.
|
||||
|
||||
Im letzten Kapitel haben wir gelernt, wie man <strong>gute Ideen findet, für die jemand zu zahlen bereit ist</strong>. Aber eine Richtung zu finden ist nur der Anfang. Bei der echten Produktentwicklung werden Sie feststellen: <strong>Zwischen "wissen, was zu tun ist" und "wissen, wie man es umsetzt" liegt eine gewaltige Kluft.</strong>
|
||||
|
||||
Diese Kluft ist die <strong>Konkretisierung von Anforderungen</strong>.
|
||||
|
||||
Ein Beispiel: In Kurs- oder persönlichen Projekten beginnen wir oft mit der einfachsten ausführbaren Funktion:
|
||||
|
||||
- "Mach ein Kanban-Board, liste die Aufgaben auf."
|
||||
- "Hilf mir, ein Zeichen-Tool zu erstellen."
|
||||
- "Hilf mir, eine Umfrage-Software zu bauen."
|
||||
|
||||
Das sind oft nur ein Tool oder ein Funktionsmodul – nicht einmal ein klares Geschäftsproblem. Noch wichtiger: <strong>Diese Ideen sind oft nur "nützlich in Ihrer Meinung", nicht "was Nutzer wirklich brauchen."</strong>
|
||||
|
||||
In Unternehmens- oder Gründungsprojekten gehen Produktmanager und Ingenieure oft von einer größeren geschäftlichen Aufgabenstellung aus. Nehmen wir folgendes Szenario an:
|
||||
|
||||
<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
|
||||
<div style="font-weight: bold; color: #303133; margin-bottom: 10px;">Geschäftsszenario:</div>
|
||||
<div style="color: #606266; line-height: 1.6;">
|
||||
<p>Sie sind der E-Commerce-Operations-Produktmanager eines Shops. Der Chef gibt Ihnen eine vage, aber druckvolle Aufgabenstellung:</p>
|
||||
<p style="font-style: italic; margin-top: 10px;">"Alle nutzen AI für Bilder und Copywriting in WeChat-Öffentlichkeitskanälen, ganz einfach. Mach mal, dass wir beim Einstellen neuer Produkte auf Douyin E-Commerce effizienter werden."</p>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
Jetzt denken Sie vielleicht: "Chef, Sie träumen schon wieder!" In der Praxis ist solch vages Diktat jedoch sehr häufig – sogar häufiger als Ihre wöchentliche Bubble-Tea-Bestellung. Um ein fähiger Angestellter (oder besser: CEO eines Startups) zu sein, müssen wir lernen, von Selbstnutzungs-Tools zu echten Produktprototypen zu wechseln.
|
||||
|
||||
Da wir AI IDE gelernt haben, fällt uns diese Anforderung eigentlich leicht – man muss AI nur einen Prompt geben, alles erledigt der Agent:
|
||||
|
||||
```
|
||||
Bitte beziehe dich auf meine Anforderung xxxx,
|
||||
hilf mir, einen E-Commerce-Material-Workspace zu entwerfen,
|
||||
der Generierung und Verwaltung von Produktbeschreibungen, Bildern, Videos etc. umfasst.
|
||||
```
|
||||
|
||||
Wenn Sie begeistert diese Anforderung direkt in einen Prototyp umsetzen und dem Chef schicken – herzlichen Glückwunsch, Ihre Quartalsprämie ist gestrichen!
|
||||
|
||||
**Warum ist das so? Das ist genau der Kernschmerzpunkt, den wir lösen müssen:**
|
||||
|
||||
Bisher haben wir mit AI IDE nur Spielzeugprojekte wie Snake oder Taschenrechner gemacht – einfache Funktionen, man weiß, was man will, und man nutzt sie selbst. Aber **echte Geschäftsszenarien sind völlig anders**:
|
||||
|
||||
- **Sie sind nicht der Nutzer**: Der Chef will "Effizienz steigern", aber Sie wissen nicht, wie das Operations-Team täglich arbeitet und wo es hängt
|
||||
- **AI kennt das Geschäft nicht**: Sie geben AI eine vage Anforderung, und es kann nur auf generischem Wissen raten – das Ergebnis sieht aus wie das Richtige, funktioniert aber in der Praxis nicht
|
||||
- **Gute Idee ist nicht gleich gutes Produkt**: Sie denken, "AI-Generierung hinzufügen" sei cool, aber Nutzer brauchen es vielleicht gar nicht, oder es ist umständlicher als zuvor
|
||||
|
||||
**Deshalb müssen wir lernen: "Von der Idee zum Nutzer-Verständnis."** Nur wenn Ihre Kreativität wirklich fremde Probleme löst – durch Fragen und tiefes Geschäftsverständnis – können Sie wirklich Wertvolles schaffen. (Gute Ideen sind sogar wichtiger als gute Technik.)
|
||||
|
||||
### 1.1 Von der Vorstellung zur Realität: Lernen, das Geschäft zu befragen
|
||||
|
||||
::: info Zunächst klären: Was ist eine Anforderung? Was ist ein Geschäft?
|
||||
|
||||
**Anforderung** ist das, was Nutzer wirklich wollen – ihre Probleme, die sie lösen möchten. Zum Beispiel "Der Chef will, dass ich Produkte schneller einstelle" – das ist eine Anforderung.
|
||||
|
||||
**Geschäft** ist das, was Nutzer täglich tun – ihre Arbeitsweise. Zum Beispiel E-Commerce-Operations: Produkte einstellen, Preise ändern, Bilder erstellen, Daten analysieren... Das alles ist Geschäft.
|
||||
|
||||
**Warum sich fürs Geschäft interessieren?**
|
||||
Weil Ihr Tool sonst "gut aussieht, aber niemand nutzt". Nur wenn Sie wirklich verstehen, wie Nutzer täglich arbeiten und wo sie feststecken, können Sie etwas bauen, das ihnen wirklich hilft.
|
||||
|
||||
:::
|
||||
|
||||
Aus der einfachsten Perspektive können Sie sich zunächst folgende Fragen stellen:
|
||||
|
||||
- Der Chef sagt "**etwas effizienter**" – was genau heißt das? **Schneller** machen? **Geld sparen**? **Mehr verkaufen**?
|
||||
- Wie werden Produkte aktuell eingestellt? **Wo läuft es nicht rund**?
|
||||
- Wie viele **neue Produkte** gibt es täglich? Wie viele **Bilder** und **Texte** pro Produkt?
|
||||
- Was ist **am nervigsten**, was **möchte man am wenigsten tun**?
|
||||
|
||||
Das sind jedoch nur Vermutungen. Wir müssen direkt mit dem Douyin E-Commerce-Operations-Team sprechen: "Wo liegen eure Schwierigkeiten und worauf achtet ihr?" Durch Kommunikation erhalten wir präzisere Antworten:
|
||||
|
||||
::: info Echte Geschäftsbefragungsergebnisse
|
||||
|
||||
Wir haben E-Commerce-Operations-Mitarbeiter gefragt. Sie berichteten folgende Probleme:
|
||||
|
||||
**1. Zu viele Aufgaben, zu unübersichtlich**
|
||||
- Eine Person muss mehrere Shops betreuen, jeder Shop hat viele Produkte
|
||||
- Täglich hin- und herhetzen: **Neue Produkte einstellen**, **Preise ändern**, **Bilder erstellen**, **Daten analysieren** – eine Sache ist noch nicht fertig, die nächste ruft
|
||||
|
||||
**2. Inhalte werden nicht auf einmal erstellt, sondern iterativ**
|
||||
- Zunächst **Herstellerbilder**, **frühere Materialien** oder **Referenzbilder aus dem Web** verwenden, um das Produkt **schnell einzustellen** und zu testen
|
||||
- Etwas Geld für Werbung ausgeben, **schauen, ob jemand kauft**
|
||||
- Nur bei **gut verkäuflichen Produkten** werden Bilder, Detailbeschreibungen und Videos sorgfältig erstellt
|
||||
|
||||
:::
|
||||
|
||||
Nach der Geschäftsbefragung sind wir voller Enthusiasmus – jetzt können wir wirklich den perfekten, geschäftsgerechten Produktprototyp erstellen! — Schon wieder falsch gedacht. Wenn wir versuchen, "alle Anforderungen auf einmal zu erfüllen", wird das Produkt riesig und lässt sich im Kurs-Zeitrahmen kaum realisieren. Deshalb müssen wir weiter strukturieren und verdichten, um den wahren Kernschmerzpunkt zu identifizieren.
|
||||
|
||||
### 1.2 Von Divergenz zu Konvergenz: Den Kernschmerzpunkt des Geschäfts identifizieren
|
||||
|
||||
::: info Warum "konvergieren"? Was ist ein "Schmerzpunkt"?
|
||||
|
||||
**Viele Probleme, aber welches zuerst?**
|
||||
|
||||
Nutzer erzählen Ihnen vielleicht eine Reihe von Problemen: A ist nervig, B ist nervig, C ist auch nervig... Aber wenn Sie versuchen, alle auf einmal zu lösen, wird wahrscheinlich nichts richtig. Deshalb **konvergieren** — aus vielen Problemen das **schmerzhafteste, dringendste, am besten lösbare** herausgreifen und zuerst angehen.
|
||||
|
||||
**Was ist ein Schmerzpunkt?**
|
||||
Das ist das konkrete Problem, das Nutzer **am meisten nervt, am meisten Zeit kostet und am dringendsten lösen** wollen. Nicht "ich finde es nützlich", sondern etwas, über das Nutzer **täglich klagen und bei dem jeder Durchlauf quälend ist**.
|
||||
|
||||
:::
|
||||
|
||||
Durch das obige Interview haben wir viele Operations-Probleme entdeckt: Unterbrechung durch Aktionen, Verwaltung mehrerer Shops, ständiges Wechseln zwischen Einstellen/Ändern/Bilderstellen/Daten...
|
||||
|
||||
Wenn wir versuchen, "all diese Probleme zu lösen", erhalten wir ein **riesiges, aber unbrauchbares** Tool.
|
||||
|
||||
Lassen Sie uns diese Probleme kategorisieren (AI kann helfen). Es gibt grob drei Typen:
|
||||
|
||||
1. **Rhythmus-Probleme**: Wann Produkte einstellen, wann Preise anpassen
|
||||
2. **Effizienz-Probleme**: Wie man mehrere Shops und Produkte gleichzeitig verwaltet
|
||||
3. **Content-Probleme**: Wie man schnell Produktbilder und Copywriting erstellt
|
||||
|
||||
Für unseren Kurs ist **Typ 3: Content-Erstellung** am besten geeignet. Aber "schnell Content erstellen" ist immer noch abstrakt. Fragen wir das Geschäftsteam genauer:
|
||||
|
||||
::: info Das Geschäftsteam sagt: Content-Erstellung hat zwei schmerzhafteste Stellen
|
||||
|
||||
**Schmerz 1: Batch-Bilderstellung und Copywriting sind extrem mühsam**
|
||||
- Materialien überall verteilt: Cloud-Speicher, WeChat-Verlauf, Plattform-Backend... **Schwer zu finden**
|
||||
- Viele Produkte gleichzeitig einstellen, **keine Zeit für sorgfältige Erstellung**, nur schnell zusammenstellen
|
||||
- Anspruch nicht hoch: **Sichtbar und einstellbar** reicht, muss nicht schick sein
|
||||
|
||||
**Schmerz 2: Gute Lösungen können nicht gespeichert und wiederverwendet werden**
|
||||
- Früher gute Titel und Layouts: **Beim nächsten Mal nicht mehr auffindbar**
|
||||
- Lösungen verstreut in Chat-Verläufen und alten Produkt-Links
|
||||
- Wenn man sie braucht: **Halben Tag suchen, kopieren, ändern**
|
||||
- Es fehlt ein Tool zum **Sammeln, Verwalten und direkten Wiederverwenden**
|
||||
|
||||
:::
|
||||
|
||||
Basierend auf diesen beiden Schmerzpunkten erstellen wir ein einfaches kleines Tool: **Operations-Team bei Batch-Bilderstellung und Copywriting helfen, plus gute Lösungen für spätere Wiederverwendung speichern**.
|
||||
|
||||
Es macht nur zwei Dinge (lassen Sie AI bei der Detaillierung helfen, und denken Sie daran, Funktionen basierend auf Geschäfts-Feedback kontinuierlich zu reduzieren):
|
||||
|
||||
::: info Funktion 1: Batch-generierte E-Commerce-Produktbilder und Copywriting
|
||||
|
||||
**Was macht das?**
|
||||
Dem System Produktinformationen geben, und es generiert automatisch Produktbilder und Texte, die auf E-Commerce-Plattformen (wie Douyin, Taobao) eingestellt werden können.
|
||||
|
||||
**Eingabe**
|
||||
| Typ | Inhalt |
|
||||
|------|------|
|
||||
| Produktinformationen | Name, Kategorie, Marke, Material, Größe, Farbe etc. |
|
||||
| Produktbilder | Weißgrund oder einfaches Szenario-Foto |
|
||||
| Referenzbilder | Screenshots früherer Bestseller oder Referenz-Links |
|
||||
| Import-Methode | Excel Batch-Import oder direkt auf der Seite ausfüllen |
|
||||
|
||||
**Ausgabe (generierte E-Commerce-Materialien)**
|
||||
- **Produkt-Hauptbild**: Produktansicht mit Text-Selling-Points (das Bild, das Nutzer beim Scrollen zuerst sehen)
|
||||
- **Produkttitel**: Keyword-Kombination, die bei der Suche gefunden wird
|
||||
- **Selling-Point-Copywriting**: 1-2 Sätze, die Käufer anziehen
|
||||
- Alles **nach kleiner Korrektur einstellbar**
|
||||
|
||||
**Ergebnis**
|
||||
- Früher: Jedes Produkt von Grund auf neu erstellen
|
||||
- Jetzt: Eine Charge Produkte ins System geben, Entwürfe generieren, auswählen und nachbessern
|
||||
|
||||
:::
|
||||
|
||||
::: info Funktion 2: Gute Lösungen als Vorlagen speichern
|
||||
|
||||
**Eingabe**
|
||||
| Typ | Inhalt |
|
||||
|------|------|
|
||||
| Ein kompletter Satz | Hauptbild + Titel + Copywriting |
|
||||
|
||||
**Ausgabe**
|
||||
| Funktion | Beschreibung |
|
||||
|------|------|
|
||||
| Anwenden | Beim nächsten neuen Produkt die Vorlage automatisch anwenden |
|
||||
| Bearbeiten | Titel und Copywriting direkt ändern |
|
||||
| Verwalten | Benennen, taggen (z.B. "Herrentaschen-Vorlage", "Großverkaufs-Titel"), leicht auffindbar |
|
||||
|
||||
**Ergebnis**
|
||||
1. Neues Produkt importieren
|
||||
2. Auswählen: Systemstandard-Generierung oder **meine gespeicherte Vorlage verwenden**
|
||||
3. System wendet automatisch Vorlagen-Stil an und generiert neue Bilder und Copywriting
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
**Rückblick auf das, was wir gerade getan haben:**
|
||||
|
||||
1. **Zuerst Fragen stellen**: Nicht direkt mit dem Programmieren beginnen, sondern zuerst das Operations-Team fragen "Was nervt euch am meisten"
|
||||
2. **Schmerzpunkte finden**: Entdeckt, dass sie am meisten unter "Bilder und Copywriting erstellen ist zu mühsam" und "gute Lösungen können nicht gespeichert werden" leiden
|
||||
3. **Umfang eingrenzen**: Keine allesumfassende Plattform bauen, sondern nur "Batch-Generierung von Bildern und Copywriting + Vorlagen speichern" – diese beiden Funktionen
|
||||
|
||||
**Warum ist das so wichtig?**
|
||||
|
||||
Ein häufiger Fehler von Anfängern bei der Produktentwicklung ist: Mehr Funktionen ist besser. Aber was Nutzer wirklich brauchen, ist **die Lösung des schmerzhaftesten Problems**. Eine Reihe von Funktionen, die alle nicht richtig funktionieren, ist schlechter als ein bis zwei Funktionen, die Nutzer wirklich unterstützen.
|
||||
|
||||
**Kern des Produkt- und Geschäftsdenkens:**
|
||||
- Nicht selbst denken "Ich glaube, Nutzer brauchen das"
|
||||
- Nutzer fragen "Was machst du jeden Tag? Wo tut es am meisten weh?"
|
||||
- Aus einer Menge von Problemen **konvergieren** auf das schmerzhafteste, am besten lösbare
|
||||
- Zuerst die **minimal nutzbare** Version erstellen, dann schrittweise iterieren
|
||||
|
||||
Das ist es, was wir klären müssen, bevor wir Code schreiben. Code ist nur ein Werkzeug – **Nutzer verstehen, das richtige Problem finden** ist der erste Schritt.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
|
||||
{ title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
|
||||
{ title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
|
||||
{ title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. In 10 Minuten einen Prototyp erstellen: AI IDE lässt die "Kernfunktion" Wirklichkeit werden
|
||||
|
||||
::: info Programmier-Plan-Empfehlung
|
||||
Wenn Sie das Gefühl haben, dass Ihre aktuelle IDE nicht intelligent genug ist oder Ihr Kontingent schnell aufgebraucht ist, können Sie einen **Programmier-Plan** erwerben. Zur Vorbereitung lesen Sie [diesen Artikel](../../stage-2/backend/modern-cli/) über die Verwendung von Claude zum Programmieren.
|
||||
:::
|
||||
|
||||
Nachdenken ist gut, aber man sollte nicht übermäßig reflektieren. Wir steuern die übermäßige Reflexion und versuchen, mit einer einzelnen Seite einen Prototyp zu erstellen.
|
||||
|
||||
### 2.1 Erster Schritt: AI in einfachen Worten sagen, was Sie wollen
|
||||
|
||||
Am Anfang müssen Sie keine perfekten Prompts anstreben. Beginnen Sie mit Ihrem natürlichsten Ausdruck. Beschreiben Sie AI wie einem Kollegen Ihre Anforderungen in einfachen Worten, und lassen Sie AI Ihnen helfen, sie in einen professionelleren Ausdruck zu optimieren.
|
||||
|
||||
#### 2.1.1 Mit einer mündlichen Beschreibung beginnen (empfohlen für Anfänger)
|
||||
|
||||
Beschreiben Sie Ihre Idee zuerst in Ihren eigenen Worten – auch wenn es noch so rau ist:
|
||||
|
||||
```
|
||||
Ich möchte ein Tool erstellen, das E-Commerce-Operations-Mitarbeitern hilft,
|
||||
automatisch Produkt-Hauptbilder und Copywriting zu generieren.
|
||||
Operations-Mitarbeiter müssen aktuell manuell Bild für Bild und Text für Text
|
||||
erstellen, was sehr mühsam ist.
|
||||
Meine Idee: Sie laden Produktinformationen hoch, das System generiert automatisch
|
||||
einen Satz Entwürfe, die Operations-Mitarbeiter wählen die brauchbaren aus,
|
||||
ändern sie leicht und können sie verwenden.
|
||||
|
||||
Zuerst die einfachste Version: eine Seite, links Produktinformationen eingeben,
|
||||
rechts die generierten Ergebnisse anzeigen. Bilder hochladen, Text eingeben,
|
||||
nach der Generierung Hauptbild-Vorschau und Copywriting anzeigen.
|
||||
```
|
||||
|
||||
Senden Sie diesen Text dann an eine AI (wie ChatGPT, Claude etc.), damit sie ihn für Sie erweitert. AI hilft Ihnen normalerweise dabei, Details zu ergänzen, an die Sie noch nicht gedacht haben, Ihre Ideen klarer zu strukturieren und schließlich einen Prompt zu generieren, der sich für AI IDE eignet.
|
||||
|
||||
Sie können AI so ansprechen:
|
||||
```
|
||||
Hilf mir, die obige Idee zu erweitern und in ein klares
|
||||
Geschäftslogik-Dokument zu strukturieren. Generiere dann einen Prompt,
|
||||
der sich für AI IDE (wie Cursor, Trae) eignet, um Single-Page-Prototyp-Code
|
||||
zu generieren.
|
||||
```
|
||||
|
||||
AI wird eine strukturierte Anforderung und den entsprechenden Prompt zurückgeben. Überprüfen Sie diese selbst, entfernen Sie unnötige Funktionen und bestätigen Sie sie, bevor Sie den Code generieren.
|
||||
|
||||
Der Vorteil dieses Ansatzes: Die mündliche Beschreibung enthält die authentischsten Ideen, kann aber wichtige Details übersehen. Wenn AI für Sie erweitert, könnte sie Fragen stellen wie "Soll Batch-Upload unterstützt werden?", an die Sie noch nicht gedacht haben. So können Sie Ihre Anforderungen weiter validieren. Sie können basierend auf dem Feedback entscheiden, ob Sie unpraktische Funktionen beibehalten oder entfernen möchten, und durch wiederholte Überarbeitung den ersten Prompt für AI festlegen.
|
||||
|
||||
#### 2.1.2 Den Erweiterungsschritt überspringen: Geschäftsdokument direkt an AI übergeben
|
||||
|
||||
Wenn Sie in den vorherigen Kapiteln bereits ein Geschäftslogik-Dokument erstellt haben (z.B. eine in einfachen Worten verfasste Anforderungsbeschreibung), können Sie das folgende Format direkt verwenden und an AI IDE senden – ohne den Zwischenschritt der AI-Erweiterung. Dies eignet sich, wenn die Anforderungen bereits klar sind und Sie direkt mit dem Programmieren beginnen möchten:
|
||||
|
||||
```
|
||||
Hilf mir, basierend auf der Geschäftslogik eine Single-Page-Anwendung
|
||||
zu implementieren, um die Kernfunktion zu validieren.
|
||||
|
||||
Geschäftslogik-Referenz:
|
||||
1. Operations-Mitarbeitern helfen, die erste Version von Bild- und Textentwürfen
|
||||
stapelweise zu generieren:
|
||||
- **Eingabe (direkter Upload und Batch-Import unterstützt):**
|
||||
- Produktbasisinformationen: Name, Kategorie, Marke, Material, Größe, Farbe,
|
||||
Zielgruppe etc.;
|
||||
- Produktbilder: Weißgrund / einfaches Szenario-Foto;
|
||||
- Bei jeder Generierung: zusätzlicher Upload von Screenshots früherer
|
||||
Bestseller oder Referenz-Links möglich;
|
||||
- Excel Batch-Import oder Online-Eingabe/Upload auf der Seite unterstützt.
|
||||
- Auf der Seite kann angegeben werden, ob Produktmaterialien in der
|
||||
Materialbibliothek gespeichert werden sollen, für spätere Verwendung.
|
||||
- **Ausgabe (Inhalte, die direkt oder mit leichten Änderungen eingestellt
|
||||
werden können):**
|
||||
- Für jedes Produkt ein Hauptbild-Entwurf, der "ansehbar" ist und
|
||||
grundlegende Selling-Points enthält;
|
||||
- Ein "strukturgerechter" Titel mit Kern-Keywords + 1-2 Sätze
|
||||
Selling-Point-Copywriting.
|
||||
- **Erwartete Änderung der Arbeitsweise:**
|
||||
Vom Neuentwurf für jede Produktcharge zum Einwerfen einer Charge in das
|
||||
System, mit System-Entwürfen zur Auswahl und Feinjustierung.
|
||||
|
||||
Zuerst die erste Funktion implementieren, die zweite Funktion (Vorlagenbibliothek)
|
||||
wird später hinzugefügt.
|
||||
```
|
||||
|
||||
#### 2.1.3 Der Programmierer-Ansatz (fortgeschritten): AI helfen lassen, einen "Prompt für Prompts" zu schreiben
|
||||
|
||||
Wenn Sie den Code-Generierungsprozess feiner steuern möchten, können Sie zuerst AI (wie ChatGPT) bitten, basierend auf Ihren Anforderungen einen speziell für AI IDE bestimmten Prompt zu generieren:
|
||||
|
||||
```
|
||||
Basierend auf der folgenden Idee, hilf mir, einen Prompt für einen Coding Agent
|
||||
zu schreiben, um Code zu generieren. Ich muss diesen Prompt verwenden, um Code
|
||||
zu erstellen.
|
||||
|
||||
[Deine Geschäftslogik-Beschreibung hier einfügen]
|
||||
|
||||
Anforderungen:
|
||||
1. Der Prompt soll eine klare Seitenlayout-Beschreibung enthalten
|
||||
2. Datenstrukturen und Interaktionslogik klar definieren
|
||||
3. Technology Stack angeben (z.B. React + Tailwind)
|
||||
4. Die zu implementierenden Kernfunktionen auflisten
|
||||
```
|
||||
|
||||
Normalerweise generiert AI einen strukturierten Prompt wie den folgenden:
|
||||
|
||||
|
||||
Sie können diesen Prompt nach kleinen Anpassungen an AI IDE senden, um Code zu generieren.
|
||||
|
||||
### 2.2 Zweiter Schritt: AI IDE direkt Code generieren lassen
|
||||
|
||||
#### 2.2.1 Vorbereitung: Grundlegende Bedienung von AI IDE verstehen
|
||||
|
||||
Wenn Sie mit AI IDE (wie Cursor, Trae, Windsurf etc.) noch nicht vertraut sind, empfehlen wir, zunächst das [IDE-Grundlagen-Tutorial](/de-de/appendix/2-development-tools/ide-basics/) im Anhang zu lesen, um zu erfahren:
|
||||
- Wie man ein neues Projekt erstellt
|
||||
- Wie man mit dem AI Agent kommuniziert
|
||||
- Wie man den Code-Generierungsprozess der AI versteht
|
||||
|
||||
#### 2.2.2 Mit der Code-Generierung beginnen
|
||||
|
||||
Jetzt haben Sie den initialen Prompt erhalten. Wir nehmen den ersten Prompt-Stil als Beispiel und lassen AI uns beim Generieren von Code helfen. Erstellen Sie zuerst ein Fenster und den entsprechenden Ordner, öffnen Sie den Ordner (initialisieren Sie ein neues Projekt in Ihrem bevorzugten Ordner):
|
||||
|
||||
|
||||
|
||||
Wählen Sie in der Seitenleiste ein Modell Ihrer Wahl (empfohlen: gemini, gpt, glm, kimi, minimax etc.) und geben Sie den Prompt aus dem ersten Schritt ein:
|
||||
|
||||
|
||||
Nach dem Klick auf Generieren sehen wir den vertrauten Vorgang: AI plant basierend auf dem Prompt die Verzeichnisstruktur des Projekts, die notwendigen Dateien und gibt den ursprünglichen Inhalt jeder Datei an.
|
||||
|
||||
::: warning Wichtiger Hinweis: AI kann anhalten und auf Ihre Bestätigung warten
|
||||
Während des Generierungsprozesses hält der **AI Agent oft an und wartet auf Ihre Eingabe oder Bestätigung**, zum Beispiel:
|
||||
- Fragt Sie, ob Sie mit dem nächsten Schritt fortfahren möchten
|
||||
- Bittet Sie, die Eingabetaste zu drücken, um eine Aktion zu bestätigen
|
||||
- Fragt Sie nach der Wahl eines technischen Details
|
||||
|
||||
**Wenn AI nicht mehr reagiert, prüfen Sie zuerst die Dialogoberfläche, ob sie auf Ihre Antwort wartet.** Viele Anfänger denken, AI würde noch nachdenken, aber sie hat bereits angehalten und wartet auf Sie. Aktiv antworten oder Eingabetaste drücken, dann arbeitet AI weiter.
|
||||
:::
|
||||
|
||||
Vergessen Sie auch hier nicht, die Eingabetaste zu drücken, um die Informationen zu bestätigen (andernfalls geraten Sie in eine Warteschleife; einige AI IDEs haben dieses Problem nicht):
|
||||
|
||||
|
||||
Wenn Sie die folgende Szene sehen, bedeutet das, dass bereits ein lokaler Dienst gestartet wurde. Sie müssen auf Überspringen klicken, sonst bleiben Sie auf dieser Oberfläche (wenn nach der Code-Generierung nichts erscheint, müssen Sie aktiv sagen: "Hilf mir, dieses Projekt zu starten"):
|
||||
|
||||
|
||||
::: info Szenario-Erklärung
|
||||
**Szenario-Beschreibung**: Sie haben mit `npm create vite@latest` ein React + TypeScript-Projekt (easy-vibe-web) erstellt. Nach Abschluss der Erstellung startet Ihr Computer automatisch die Webseite, damit Sie das Ergebnis sofort sehen können.
|
||||
|
||||
**Lokaler Dienst**: Kann als temporäres Webseiten-Anzeigefenster auf Ihrem Computer verstanden werden, das nur auf Ihrem eigenen Rechner läuft und für andere nicht zugänglich ist.
|
||||
|
||||
**localhost (lokale Adresse)**: `localhost` bedeutet "dieser Computer selbst". Wenn Sie im Browser darauf zugreifen, greifen Sie tatsächlich auf die Webseite zu, die auf Ihrem Computer läuft.
|
||||
|
||||
**Port**: Ein Port kann als Nummer verstanden werden, die verschiedene Webdienste auf demselben Computer unterscheidet. Dieses Projekt verwendet 5174.
|
||||
|
||||
**Zugriffslink `http://localhost:5174/`**: Diese Adresse bedeutet "Zugriff auf die Webseite mit der Nummer 5174 auf diesem Computer". Im Browser öffnen, um das Ergebnis zu sehen.
|
||||
|
||||
**Aktuelle Szenario-Erklärung**: Das System wollte ursprünglich 5173 verwenden, aber diese Nummer war bereits belegt, daher wurde automatisch auf 5174 gewechselt. Das ist normal.
|
||||
|
||||
**Bedienungsanleitung**: Öffnen Sie den Browser, geben Sie `http://localhost:5174/` in die Adressleiste ein und drücken Sie Enter, um die aktuelle Projektseite zu sehen.
|
||||
:::
|
||||
|
||||
Nachdem alles bestätigt ist, warten Sie einen Moment, bis der Agent seine Arbeit beendet hat. Wir erhalten folgendes Ergebnis:
|
||||
|
||||
|
||||
Man sieht bereits eine erste funktionale Ansicht, aber das Frontend sieht noch sehr unschön aus. Jetzt können wir versuchen, direkt mit AI zu dialogieren und die Oberfläche zu optimieren:
|
||||
|
||||
|
||||
Nach der Optimierung erhalten wir eine deutlich ansprechendere Oberfläche:
|
||||
|
||||
|
||||
Sie können die Webseiten-Funktionen nach Ihren eigenen Bedürfnissen anpassen, Screenshots anhängen und frei Fragen stellen, wie zum Beispiel: "Ich brauche die Batch-Import-Funktion derzeit nicht, bitte entfernen", "Links muss zu viel eingegeben werden, behalte nur xxxxx". Sie können sogar andere ausgereifte Websites als Referenz heranziehen – hier können wir direkt ein Design-Produkt von Google als "Referenz" verwenden (Sie können einen Screenshot einer ausgereiften Website einfügen, die Ihnen gefällt):
|
||||
|
||||
|
||||
Schließlich erhalten wir:
|
||||
|
||||
|
||||
### 2.3 Was tun bei Fehlern
|
||||
|
||||
In der Praxis sind Fehler unvermeidlich. Das ist normal und bedeutet nicht, dass Sie etwas falsch gemacht haben. Sie müssen die Fehler nicht verstehen – geben Sie einfach das "Was Sie sehen" vollständig an AI weiter.
|
||||
|
||||
Es gibt grundsätzlich drei Behandlungsmethoden:
|
||||
|
||||
- **Methode 1: Seiten- oder Terminal-Fehler**
|
||||
Wenn die Seite rot wird, weiß wird oder im Terminal viele rote Zeilen erscheinen, machen Sie einen Screenshot oder kopieren Sie die gesamte Fehlermeldung und senden Sie sie an AI, damit sie Ihnen bei der Reparatur hilft.
|
||||
|
||||
- **Methode 2: Funktion falsch, aber kein Fehler**
|
||||
Zum Beispiel reagiert ein Button nicht, Daten werden nicht angezeigt, das Layout ist durcheinander. Beschreiben Sie in einfachen Worten "Was gerade passiert + Was Sie eigentlich wollen", bei Bedarf mit einem Screenshot.
|
||||
|
||||
- **Methode 3: Unsicher, ob es ein Problem gibt**
|
||||
Sie können AI direkt fragen: "Hilf mir zu prüfen, ob diese Funktion offensichtliche Probleme hat und ob sie angepasst werden muss."
|
||||
|
||||
#### 2.3.1 Häufige Fragen von Anfängern
|
||||
|
||||
- **F: Ich weiß nicht, wo die Fehlermeldung ist?**
|
||||
- A: Suchen Sie grundsätzlich nach allem, was "rot" ist. Im Terminal, in der Konsole oder auf der Seite – finden Sie die roten Hinweise, markieren Sie alles und kopieren Sie es zu AI.
|
||||
|
||||
- **F: AI hat es repariert, aber es kommt derselbe Fehler – was nun?**
|
||||
- A: Das ist ein häufiges Szenario. Machen Sie weiterhin Screenshots oder kopieren Sie die neueste Fehlermeldung und senden Sie sie an AI, damit sie auf Basis der letzten Änderung weiter repariert.
|
||||
|
||||
- **F: Muss ich AI's Reparaturansatz vollständig verstehen?**
|
||||
- A: Nicht auf einmal. Konzentrieren Sie sich jedes Mal auf ein bis zwei Punkte. Mit der Zeit werden Sie zunehmend mehr Code verstehen – wie beim Aufbau eines englischen Wortschatzes.
|
||||
|
||||
- **F: Viele Male geändert, das Problem ist immer noch nicht gelöst – was nun?**
|
||||
- A: Sie können Folgendes versuchen:
|
||||
- Die "Versionsrücksetzung"-Funktion der IDE verwenden. Im Agent-Dialog den Rückgängig-Button finden und zu einer lauffähigen Version zurückkehren und neu beginnen;
|
||||
- Ein anderes Modell wählen oder den Prompt anpassen, Phänomene und Fehlermeldungen spezifischer beschreiben;
|
||||
- "Aktuellen Code + Fehler-Log + erwartetes Verhalten" zusammenpacken und AI auf einmal übergeben, damit sie den Problembereich insgesamt restrukturiert.
|
||||
|
||||
## 3. Von der Single-Page zur Multi-Page-Anwendung erweitern
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
|
||||
{ title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
|
||||
{ title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
|
||||
{ title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Wenn die Logik der Kernfunktion grundsätzlich generiert ist, können wir die restlichen Inhalte erstellen. Zum Beispiel sind Klicks auf Einstellungen oder bestimmte Buttons zu diesem Zeitpunkt noch völlig wirkungslos.
|
||||
|
||||
Sie können AI bitten, basierend auf den Anforderungen des Geschäftsprompts zu prüfen und die noch nicht generierten Teile zu erstellen. Oder Sie lassen AI die nicht vollständig implementierten Seiten direkt ergänzen. Sie können auch eine bestimmte Seite angeben, die AI implementieren soll, bis alle Seiten klickbar und alle Funktionen ordnungsgemäß interaktiv sind:
|
||||
|
||||
|
||||
Nach kurzer Wartezeit sehen wir, dass das Programm auf der bisherigen Basis mehrere Seiten und interaktive Funktionen ergänzt hat:
|
||||
|
||||
|
||||
|
||||
|
||||
Jetzt müssen Sie nur noch manuell jede Funktion und jeden Button anklicken, die Sie interessieren, und sicherstellen, dass die Interaktion ordnungsgemäß funktioniert. Wenn es nicht interaktive Funktionen gibt, können Sie mit AI kommunizieren und sie um Hilfe bei der Reparatur bitten.
|
||||
|
||||
## 4. Den Prototyp "wie echt" aussehen lassen
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
|
||||
{ title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
|
||||
{ title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
|
||||
{ title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Nachdem wir die Multi-Page-Struktur haben, ist der letzte Schritt, den Prototyp von "es läuft" zu "lässt sich flüssig bedienen und sieht professionell aus" zu bringen. Dafür müssen wir den gesamten Prozess (Nutzer-Flow) einmal selbst durchlaufen und die nicht funktionierenden Teile von AI reparieren lassen, damit wir nach jedem Refresh den vollständigen Prozess als neuer Nutzer simulieren und die erwarteten Ergebnisse erhalten können.
|
||||
|
||||
Lassen Sie uns die ursprünglichen Anforderungen rekapitulieren:
|
||||
|
||||
```
|
||||
1. Operations-Mitarbeitern helfen, die erste Version von Bild- und Textentwürfen
|
||||
stapelweise zu generieren:
|
||||
- **Eingabe (direkter Upload und Batch-Import unterstützt):**
|
||||
- Produktbasisinformationen: Name, Kategorie, Marke, Material, Größe, Farbe,
|
||||
Zielgruppe etc.;
|
||||
- Produktbilder: Weißgrund / einfaches Szenario-Foto;
|
||||
- Bei jeder Generierung: zusätzlicher Upload von Screenshots früherer
|
||||
Bestseller oder Referenz-Links möglich;
|
||||
- Excel Batch-Import oder Online-Eingabe/Upload auf der Seite unterstützt.
|
||||
- Auf der Seite kann angegeben werden, ob Produktmaterialien in der
|
||||
Materialbibliothek gespeichert werden sollen, für spätere Verwendung.
|
||||
- **Ausgabe (Inhalte, die direkt oder mit leichten Änderungen eingestellt
|
||||
werden können):**
|
||||
- Für jedes Produkt ein Hauptbild-Entwurf, der "ansehbar" ist und
|
||||
grundlegende Selling-Points enthält;
|
||||
- Ein "strukturgerechter" Titel mit Kern-Keywords + 1-2 Sätze
|
||||
Selling-Point-Copywriting.
|
||||
- **Erwartete Änderung der Arbeitsweise:**
|
||||
Vom Neuentwurf für jede Produktcharge zum Einwerfen einer Charge in das
|
||||
System, mit System-Entwürfen zur Auswahl und Feinjustierung.
|
||||
|
||||
2. Gute Outputs als wiederverwendbare Vorlagenbibliothek konservieren:
|
||||
- **Was kann gespeichert werden?**
|
||||
- Jeder Output, von dem der Operations-Mitarbeiter findet, dass er "gut
|
||||
funktioniert", kann mit einem Klick gespeichert werden:
|
||||
- Kann eine komplette Kombination aus "Hauptbild + Titel + Selling-Point"
|
||||
sein;
|
||||
- Oder nur ein Teil davon, z.B. eine bestimmte Titel-Struktur oder ein
|
||||
bestimmter Selling-Point-Text.
|
||||
- **Was kann nach dem Speichern getan werden?**
|
||||
- **Wiederverwenden:**
|
||||
- Diese gespeicherte Vorlage verwenden, neue Produkt-Parameter einsetzen,
|
||||
neue Bild- und Textentwürfe generieren;
|
||||
- Oder auf demselben Produkt basierend auf der Vorlage mehrere Varianten
|
||||
für A/B-Tests generieren.
|
||||
- **Bearbeiten:**
|
||||
- Titel-Text / Selling-Point-Text direkt ändern;
|
||||
- Wenn Bildbearbeitung unterstützt wird, können Text, Sticker etc. im
|
||||
Hauptbild feinjustiert werden.
|
||||
- **Verwalten:**
|
||||
- Gespeicherte Vorlagen benennen, taggen (z.B. "Herrentaschen-Hauptbild-Vorlage",
|
||||
"Großverkaufs-Titel-Struktur"), nach Shop kategorisieren für einfache
|
||||
spätere Suche.
|
||||
- **Wie beim nächsten Mal verwenden?**
|
||||
- Nach Import eines neuen Produkts kann der Operations-Mitarbeiter wählen:
|
||||
- Systemstandard-Logik verwenden, oder
|
||||
- "Meine gespeicherte Vorlage verwenden" angeben;
|
||||
- Das System wendet basierend auf den neuen Produktdaten automatisch Struktur
|
||||
und Stil der Vorlage an und generiert neue Hauptbild + Titel +
|
||||
Selling-Point-Entwürfe.
|
||||
```
|
||||
|
||||
Wenn bei jedem Test neue Daten manuell erstellt werden müssen, kostet das viel Zeit. Zu diesem Zeitpunkt verwenden wir normalerweise eine Methode namens "Testdaten". Wir können wie folgt mit AI kommunizieren und AI bitten, auf der Oberfläche einen schnellen Testdaten-Eingang zu generieren, damit wir testen können, ob alle Funktionen ordnungsgemäß durchlaufen werden:
|
||||
|
||||
```
|
||||
Ich muss jetzt diesen Nutzungsprozess testen und sicherstellen, dass er
|
||||
vollständig durchlaufen werden kann. Bitte generiere basierend auf den
|
||||
folgenden Anforderungen einen Testdaten-Eingang, damit ich nach einem Klick
|
||||
schnell testen kann, ob der gesamte Prozess normal funktioniert:
|
||||
1. Operations-Mitarbeitern helfen, die erste Version von Bild- und Textentwürfen
|
||||
stapelweise zu generieren:
|
||||
- **Eingabe (direkter Upload und Batch-Import unterstützt):**
|
||||
- Produktbasisinformationen: Name, Kategorie, Marke, Material, Größe, Farbe,
|
||||
Zielgruppe etc.;
|
||||
- Produktbilder: Weißgrund / einfaches Szenario-Foto;
|
||||
- Bei jeder Generierung: zusätzlicher Upload von Screenshots früherer
|
||||
Bestseller oder Referenz-Links möglich;
|
||||
- Excel Batch-Import oder Online-Eingabe/Upload auf der Seite unterstützt.
|
||||
- Auf der Seite kann angegeben werden, ob Produktmaterialien in der
|
||||
Materialbibliothek gespeichert werden sollen, für spätere Verwendung.
|
||||
- **Ausgabe (Inhalte, die direkt oder mit leichten Änderungen eingestellt
|
||||
werden können):**
|
||||
- Für jedes Produkt ein Hauptbild-Entwurf, der "ansehbar" ist und
|
||||
grundlegende Selling-Points enthält;
|
||||
- Ein "strukturgerechter" Titel mit Kern-Keywords + 1-2 Sätze
|
||||
Selling-Point-Copywriting.
|
||||
- **Erwartete Änderung der Arbeitsweise:**
|
||||
Vom Neuentwurf für jede Produktcharge zum Einwerfen einer Charge in das
|
||||
System, mit System-Entwürfen zur Auswahl und Feinjustierung.
|
||||
```
|
||||
|
||||
Man erhält schnell Ergebnisse (wenn Ihnen ein Datensatz zu wenig ist, können Sie AI bitten, mehrere testbare Use Cases zu generieren):
|
||||
|
||||
|
||||
Nach dem Klick erhalten wir das Ergebnis:
|
||||
|
||||
|
||||
Was wir hier direkt erhalten, ist das Ergebnis – es gibt keinen "simulierten Generierungsprozess". Wenn wir einen realistischen Generierungsprozess simulieren möchten, können wir direkt mit AI dialogieren: "Bitte simuliere einen realistischen Generierungsprozess, bei dem die Ergebnisse erst nach einiger Zeit nach dem Klick angezeigt werden."
|
||||
|
||||
|
||||
Nachdem die Generierungsfunktion durchlaufen ist, müssen wir auch sicherstellen, dass die Vorlagenbibliothek ordnungsgemäß funktioniert. Auf der Generierungskarte der Seite können wir sehen, dass die Vorlagenbibliothek-Speicherfunktion noch nicht implementiert ist. Jetzt müssen wir mit AI weitergehend kommunizieren: "Bitte hilf mir sicherzustellen, dass die Anforderung [hier den Inhalt von Punkt 2 oben einfügen] erfüllt ist, ein Ergebnis angeklickt werden kann, um die entsprechende Vorlage zu speichern, und nach dem Öffnen die Generierungsparameter sichtbar sind."
|
||||
|
||||
Generierung ist oft nicht in einem Schritt erledigt – häufig sind Screenshots und Korrekturen nötig:
|
||||
|
||||
|
||||
Schließlich erhalten wir das erwartete Ergebnis:
|
||||
|
||||
|
||||
Neben der manuellen Überprüfung des Anforderungsprozesses können Sie AI auch bitten, direkt eine Anforderungsprüfung durchzuführen, zum Beispiel:
|
||||
|
||||
- "Bitte vergleiche meine ursprünglichen Anforderungen und prüfe, ob die aktuelle Anwendung alle Kernfunktionen abdeckt."
|
||||
- "Hilf mir, eine Funktionsliste zu erstellen, die markiert, was bereits fertig ist und was noch nicht implementiert ist oder unzureichend ist."
|
||||
|
||||
AI gibt normalerweise eine Checkliste aus. Basierend auf den Ergebnissen können Sie überlegen, ob weitere Verbesserungen nötig sind. Nach wiederholten Überarbeitungen erhalten Sie einen relativ vollständigen Prototyp.
|
||||
|
||||
## 5. Hausaufgabe: Erstellen Sie Ihren eigenen Douyin E-Commerce-Workspace
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Herausforderung: E-Commerce-Material-Workspace nachbauen</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Referenzieren Sie die Prompts und Inhalte dieser Lektion und schließen Sie einen vollständigen Kreislauf ab:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Vollständiger Praxis-Kreislauf</strong>
|
||||
<ul>
|
||||
<li>Geschäftsstrukturierung → Prompt-Generierung → Single-Page-Prototyp-Generierung → Multi-Page-Prototyp-Generierung</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Ergebnisse teilen</strong>
|
||||
<ul>
|
||||
<li>Machen Sie Screenshots Ihres Programms und teilen Sie sie mit anderen</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Denkaufgabe</strong>
|
||||
<ul>
|
||||
<li>Bereiten Sie sich auf die nächste Lektion "Anbindung von Large Language Models (LLM) und Text-to-Image-Fähigkeiten" vor und überlegen Sie im Voraus: Wie könnten Sie "AI-Copywriting / Bildgenerierung / Skriptgenerierung" etc. in Ihren Workspace einbetten?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
In der nächsten Lektion werden wir auf Basis dieses Content-Produktions-Workspaces konkrete AI-Fähigkeiten anbinden (Text-zu-Text, Bild-zu-Text, Text-zu-Bild), zum Beispiel:
|
||||
|
||||
- Automatische Generierung von Copywriting-Entwürfen und mehreren Titel-Alternativen für eine Content-Aufgabe
|
||||
- Automatische Generierung von Bild-Entwürfen basierend auf der Aufgabenbeschreibung (Text-to-Image)
|
||||
- Automatische Kategorisierung und Zusammenfassung historischer Content-Aufgaben, um Sie bei der Planung des nächsten Events zu unterstützen
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Weiterlernen"
|
||||
description="Empfehlung: in der Reihenfolge 'AI-Fähigkeiten anbinden → vollständiger Projekt-Kreislauf → Design-Engineering' fortsetzen."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'Vollständiges Projektpraktikum - Vom Demo zum produktionsreifen Prototyp'
|
||||
description: 'Verlassen Sie die Demo-Phase und lernen Sie, die Produktkette zu vervollständigen, realistische Simulationsdaten zu erstellen, durch Feedback schnell zu iterieren und schließlich einen präsentierbaren, interaktiven vollständigen AI-Produktprototyp fertigzustellen.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Etwa <strong>3 Tage</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['de-de/stage-1/complete-project-practice'] ?? []
|
||||
</script>
|
||||
|
||||
# Anfänger V: Vollständiges Projektpraktikum
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Produktdenken', 'Simulationsdaten', 'Interaktionsvervollständigung', 'LocalStorage']" coreOutput="1 vollständiger AI-Produktprototyp" expectedOutput="Eine Web-Anwendung mit vollständiger Kette und realen Daten">
|
||||
|
||||
Im letzten Kapitel haben wir AI-Fähigkeiten integriert und das Demo läuft. Aber es ist von einem echten "Produkt" noch <strong>weit entfernt</strong>: Sobald die Seite aktualisiert wird, <strong>sind die Daten weg</strong>, bei Fehlern gibt es eine <strong>weiße Seite</strong>, die Liste zeigt nur "Testdaten 1, Testdaten 2", und wenn der Nutzer falsch klickt, <strong>kann er es nicht rückgängig machen</strong>...
|
||||
|
||||
In diesem Kapitel werden wir <strong>alle diese Lücken füllen</strong>: Wir werden die <strong>vollständige Kette des Produkts ergänzen</strong>, mit AI <strong>realistische Geschäftsdaten</strong> generieren, anstelle von Platzhalterdaten, <strong>Fehlerbehandlung und Nutzer-Feedback</strong> hinzufügen und schließlich einen <strong>vollständigen Prototyp polieren, den man vorführen kann</strong>.
|
||||
|
||||
Dies ist das <strong>letzte Kapitel der Anfängerphase</strong>. Wenn Sie diesen Schritt abgeschlossen haben, haben Sie die Verwandlung von "kann überhaupt nicht programmieren" zu "<strong>kann unabhängig AI-Produktprototypen erstellen</strong>" vollzogen.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Kette vervollständigen', description: 'Von Einzelfunktion zum vollständigen Kreislauf' },
|
||||
{ title: 'Seele einhauchen', description: 'Echte Geschäftsdaten simulieren' },
|
||||
{ title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
|
||||
{ title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. "Happy Path" ablehnen: Die Kernkette vervollständigen
|
||||
|
||||
Viele Einsteiger erstellen Prototypen oft nur für den "Happy Path" (den Idealfall): Nutzer klickt → API antwortet erfolgreich → Ergebnis wird angezeigt.
|
||||
In der realen Welt läuft aber oft nicht alles so glatt. Damit Ihr Prototyp wie ein echtes Produkt aussieht, müssen Sie folgende "unsichtbare" Aspekte berücksichtigen.
|
||||
|
||||
### 1.1 "Warten" und "Feedback" hinzufügen
|
||||
|
||||
Wenn der Nutzer auf "Copywriting generieren" klickt, benötigt AI oft mehrere Sekunden, um zu antworten. Wenn die Oberfläche nicht reagiert, denkt der Nutzer, das Programm sei kaputt.
|
||||
**Lassen Sie die AI IDE einen Loading-Status hinzufügen:**
|
||||
|
||||
> Prompt-Beispiel:
|
||||
> "Wenn ich auf den Generieren-Button klicke, ändere den Button in 'Generiere...' und deaktiviere ihn. Zeige gleichzeitig im rechten Bereich eine Lade-Animation. Erst wenn die API ein Ergebnis zurückgibt, kehre zum Normalzustand zurück."
|
||||
|
||||
### 1.2 "Fehler" und "Ausnahmen" behandeln
|
||||
|
||||
API Keys können ablaufen, Netzwerke können unterbrochen werden.
|
||||
**Lassen Sie die AI IDE Fehler behandeln:**
|
||||
|
||||
> Prompt-Beispiel:
|
||||
> "Wenn die API-Anfrage feh schlägt, zeige nicht einfach einen Fehler in der Konsole, sondern zeige oben auf der Seite eine rote Benachrichtigung (Toast), die dem Nutzer sagt: 'Generierung fehlgeschlagen, bitte später erneut versuchen', und erlaube dem Nutzer, erneut auf Generieren zu klicken."
|
||||
|
||||
### 1.3 Chat-Verlauf persistieren
|
||||
|
||||
Bei der Interaktion mit AI müssen wir den Konversationsinhalt speichern, damit Nutzer den Verlauf überprüfen und frühere Gespräche fortsetzen können. Aktuell führen wir noch keine Datenbank ein; Sie können eine der folgenden leichtgewichtigen Lösungen wählen:
|
||||
|
||||
**Speicherlösung-Auswahl:**
|
||||
|
||||
| Lösung | Anwendungsbereich | Eigenschaften |
|
||||
| --- | --- | --- |
|
||||
| **LocalStorage** | Reines Frontend-Projekt, Nutzerdaten im Browser gespeichert | Einfache Implementierung, geht bei Aktualisierung nicht verloren, keine geräteübergreifende Synchronisierung |
|
||||
| **JSON-Datei** | Lokaler Prototyp, Daten als Datei gespeichert | Klare Struktur, leicht zu debuggen, manuell bearbeitbar |
|
||||
| **TXT-Datei** | Einfachste Lösung, schnelle Textaufzeichnung | Freies Format, gute Kompatibilität |
|
||||
|
||||
**Beispiel für Konversationsinhalt:**
|
||||
Der gespeicherte Chat-Verlauf enthält normalerweise folgende Inhalte:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"role": "user",
|
||||
"content": "Hilf mir, einen Douyin-Verkaufstext für Bluetooth-Kopfhörer zu generieren",
|
||||
"timestamp": "2026-01-20 10:30:00"
|
||||
},
|
||||
{
|
||||
"role": "assistant",
|
||||
"content": "[Bluetooth-Kopfhörer Empfehlungstext]\n\nTschüss Verzögerung, immersives Hörerlebnis\n\nHey! Diese Bluetooth-Kopfhörer sind wirklich unglaublich\n\n40dB aktive Geräuschunterdrückung, sofort in die Musikwelt eintauchen\n30 Stunden Akkulaufzeit, eine Woche Pendeln ohne Aufladen\nKristallklare Anrufe wie von Angesicht zu Angesicht\nHalb-In-Ear-Design, langes Tragen ohne Schmerzen\n\nZeitlich begrenztes Angebot, klicken Sie auf den Link unten!",
|
||||
"timestamp": "2026-01-20 10:30:05"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**Implementierungs-Prompt:**
|
||||
|
||||
> "Bitte implementiere eine Chat-Verlauf-Speicherfunktion. Unterstütze das Speichern von Nutzer- und AI-Konversationsaufzeichnungen als JSON-Datei (oder verwende LocalStorage). Lade beim Öffnen der Seite automatisch den Verlauf und unterstütze das Anzeigen und Löschen einzelner Konversationsaufzeichnungen."
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Kette vervollständigen', description: 'Von Einzelfunktion zum vollständigen Kreislauf' },
|
||||
{ title: 'Seele einhauchen', description: 'Echte Geschäftsdaten simulieren' },
|
||||
{ title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
|
||||
{ title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Seele einhauchen: Echte Daten simulieren (Mock Data)
|
||||
|
||||
Eine leere Seite kann niemanden überzeugen. Stellen Sie sich vor, Sie präsentieren einen "E-Commerce-Material-Workspace", aber der Verlauf ist völlig leer oder zeigt nur eine Zeile "test / test / test".
|
||||
Für die bestmögliche Demo-Wirkung müssen wir "realistische Daten fälschen", damit Ihr Prototyp wie ein echtes Produkt aussieht, das seit einem halben Jahr in Betrieb ist.
|
||||
|
||||
### 2.1 AI beim Entwerfen der Datenstruktur helfen lassen
|
||||
|
||||
Wir müssen nicht selbst überlegen, wie jedes Feld heißen soll (z.B. `name` oder `title`). Das können wir komplett AI überlassen.
|
||||
|
||||
Sie müssen AI nur Ihr **Geschäftsszenario** mitteilen:
|
||||
|
||||
> **Prompt-Beispiel:**
|
||||
> "Ich arbeite an einem Prototyp für einen **Douyin E-Commerce Material-Workspace**.
|
||||
> Bitte entwerfe eine JSON-Datenstruktur, die eine 'Produktaufgabe' beschreibt.
|
||||
> Diese Aufgabe sollte enthalten: Produktbasisinformationen (Name, Kategorie), Eingabematerialien (Bild-Links) sowie AI-generierte Ergebnisse (Titel, Copywriting, Poster-Bild).
|
||||
> Bitte gib mir direkt ein JSON-Beispiel."
|
||||
|
||||
AI wird basierend auf Ihrer Beschreibung automatisch Felder wie `productName`, `generatedContent` usw. vorschlagen.
|
||||
|
||||
### 2.2 AI "realistische" Daten in Batch produzieren lassen
|
||||
|
||||
Nachdem die Datenstruktur steht, ist der nächste Schritt, AI beim "Ausfüllen" zu helfen und einen Satz realistisch aussehender Daten zu generieren.
|
||||
|
||||
**Prompt-Techniken:**
|
||||
Sie können AI nicht einfach sagen "Generiere Daten für mich". Sie müssen es wie einem Praktikanten eine Aufgabe stellen und ihm **Geschäftskontext** und **Inhaltsanforderungen** mitteilen:
|
||||
|
||||
- **Geschäftskontext**: Erklären Sie AI, dass wir im "Douyin E-Commerce" tätig sind, also sollten Produkttitel aufmerksamkeitsstark sein (z.B. "Figur-schmeichelndes Wunder", "Studierenden-Must-have") und das Copywriting umgangssprachlich sein.
|
||||
- **Bildanforderungen**: Damit der Prototyp gut aussieht, sollten die Bilder keine schwarz-weißen Platzhalter sein, sondern am besten zufällige bunte Landschafts- oder Produktfotos.
|
||||
|
||||
> **Prompt-Beispiel:**
|
||||
> "Bitte generiere basierend auf der soeben erstellten Struktur 10 realistische Simulationsdaten.
|
||||
> (Hinweis: Nicht zwingend im JSON-Format. Wenn Sie Frontend schreiben, können Sie direkt JavaScript-Arrays generieren; bei Python Listen.)
|
||||
>
|
||||
> **Geschäftsszenario-Anforderungen**:
|
||||
>
|
||||
> 1. Angenommen, dies ist ein Kaufhaus, das Produkte in den Kategorien 'Damenmode', 'Elektronik' und 'Kosmetik' umfasst.
|
||||
> 2. **Generierte Titel und Copywriting sollten sehr 'Douyin-Stil' sein**: Titel sollten Emojis enthalten, Copywriting im umgangssprachlichen 'Unglaublich!'-Stil verfasst sein.
|
||||
> 3. **Bildfeld**: Bitte einheitlich das Format `https://picsum.photos/seed/{random_id}/300/400` verwenden, um sicherzustellen, dass jedes Bild anders ist."
|
||||
|
||||
**Generiertes Mock-Data-Beispiel:**
|
||||
|
||||
```javascript
|
||||
export const mockProductTasks = [
|
||||
{
|
||||
id: 'task_001',
|
||||
name: 'Sommerkleid im französischen Vintage-Blumenstil',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Damenmode',
|
||||
features: ['Taillenbetonung', 'Figurschmeichelnd', 'Elegant'],
|
||||
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: 'Wer es trägt sieht toll aus! Dieses französische Blumenkleid ist wirklich unglaublich',
|
||||
generatedCopy:
|
||||
'Mädels! Dieses Kleid ist wirklich figurschmeichelnd! Die taillenbetonende Design ist genial, sofort hat man eine Taille. Der Stoff ist sehr atmungsaktiv, im Sommer trägt man es gar nicht schwül. Perfekt für Dates und Shopping! ',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-20T10:00:00Z'
|
||||
},
|
||||
{
|
||||
id: 'task_002',
|
||||
name: 'Super Noise-Cancelling Bluetooth Kopfhörer Pro',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Elektronik',
|
||||
features: ['Noise-Cancelling', 'Ultra-Lange Akkulaufzeit', 'Niedrige Latenz'],
|
||||
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: ' Endlich gefunden! Die Noise-Cancelling dieser Kopfhörer ist unglaublich stark!',
|
||||
generatedCopy:
|
||||
'Aufsetzen und die Welt wird sofort leise. Unglaubliche Klangqualität, Musik hören wie live. Die Akkulaufzeit ist auch beeindruckend, einmal aufladen reicht für eine Woche! Ein Must-have für Studierende!',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-21T14:30:00Z'
|
||||
}
|
||||
// ... weitere Daten
|
||||
]
|
||||
```
|
||||
|
||||
### 2.3 (Fortgeschritten) Mit LocalStorage "Pseudo-CRUD" implementieren
|
||||
|
||||
Wenn Sie möchten, dass die generierten "Simulationsdaten" nicht nur angezeigt, sondern auch gelöscht, geändert und sogar nach dem Aktualisieren der Seite noch vorhanden sind, können Sie `LocalStorage` verwenden.
|
||||
|
||||
> **Prompt-Beispiel:**
|
||||
> "Bitte implementiere eine Datenspeicherfunktion.
|
||||
>
|
||||
> 1. Priorität: Zunächst Daten aus `localStorage` lesen.
|
||||
> 2. Wenn `localStorage` leer ist, mit den generierten Mock-Daten initialisieren und in `localStorage` speichern.
|
||||
> 3. Schreibe zusätzlich `addProductTask` und `deleteProductTask` Funktionen, die bei jeder Operation `localStorage` synchron aktualisieren."
|
||||
|
||||
Durch diesen Schritt erhält Ihr Prototyp "Gedächtnis" und die Nutzererfahrung ist nahezu identisch mit einem echten Produkt.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Kette vervollständigen', description: 'Von Einzelfunktion zum vollständigen Kreislauf' },
|
||||
{ title: 'Seele einhauchen', description: 'Echte Geschäftsdaten simulieren' },
|
||||
{ title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
|
||||
{ title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Feedback sammeln und schnell iterieren
|
||||
|
||||
Man kann kein gutes Produkt hinter verschlossenen Türen entwickeln. Jetzt hat Ihr Prototyp "Kernfunktionen" + "vollständige Kette" + "Demo-Daten" und es ist Zeit, ihn anderen zu zeigen.
|
||||
|
||||
### 3.1 Wen zum Testen einladen? Wie testen?
|
||||
|
||||
- **Freunde/Kollegen finden**: Sie müssen nicht technikversiert sein, sie müssen es nur einmal ausprobieren.
|
||||
- **Beobachten statt leiten**: Nicht "Klick hier" sagen, sondern sehen, wohin sie klicken würden. Wenn sie den Button nicht finden, liegt ein Designproblem vor.
|
||||
- **"Wizard of Oz"-Methode**: Wenn Ihre AI noch nicht angeschlossen ist, können Sie manuell im Hintergrund (oder in der Datenbank) Daten ändern, um die AI-Rückgabe zu simulieren und zunächst zu validieren, ob Nutzer diese Funktion benötigen.
|
||||
|
||||
### 3.2 Mit Bugs und Kritik umgehen
|
||||
|
||||
- **Layout-Probleme**: Auf verschiedenen Bildschirmgrößen kann es chaotisch aussehen.
|
||||
- **Aktion**: Screenshot an AI IDE senden → "Bei dieser Bildschirmbreite ist es verschoben, bitte reparieren."
|
||||
- **Ungeschickte Bedienung**: "Dieser Prozess ist zu umständlich".
|
||||
- **Aktion**: Den Vorschlag an AI IDE weitergeben → "Nutzer finden Hochladen und dann Generieren zu langsam, kann man es zu einem Klick zusammenfassen?"
|
||||
- **Neue Anforderungen**: "Wenn es diese Funktion gäbe, wäre es toll."
|
||||
- **Aktion**: Prüfen, ob es zum Kern gehört; wenn ja, AI eine vereinfachte Version schnell implementieren lassen.
|
||||
|
||||
**Merken: In dieser Phase ist AI Ihr bester Modifikationsassistent. Sie sind nur für die Problemerkennung verantwortlich, die Code-Änderung übernimmt AI.**
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Kette vervollständigen', description: 'Von Einzelfunktion zum vollständigen Kreislauf' },
|
||||
{ title: 'Seele einhauchen', description: 'Echte Geschäftsdaten simulieren' },
|
||||
{ title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
|
||||
{ title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 4. Abschlussprojekt: Vervollständigen Sie Ihre "Abschlussarbeit"
|
||||
|
||||
Herzlichen Glückwunsch! Sie haben den gesamten Prozess von "Anforderungen" über "Prototyp" bis "AI-Integration" durchlaufen. Jetzt ist es Zeit, Ihr finales Ergebnis zu präsentieren.
|
||||
|
||||
**Dieses Abschlussprojekt ist nicht mehr auf den "E-Commerce Material-Workspace" beschränkt.** Sie müssen basierend auf Ihren Interessen oder Branchenhintergrund einen einzigartigen AI-Produktprototyp entwickeln.
|
||||
|
||||
### Themenauswahl und Anforderungen
|
||||
|
||||
Sie müssen das Szenario wählen, das Ihnen am ehesten entspricht, aus der **[Mehrbranchen-Szenarioreferenz](../appendix-industry-scenarios/index.md)**, oder ein völlig neues Szenario basierend auf Ihren eigenen Ideen entwerfen.
|
||||
|
||||
**Das Projekt muss alle Inhalte aus den vorherigen Lektionen integriert nutzen:**
|
||||
|
||||
1. **Prototyp-Erstellung**: Frontend-Technologie verwenden, um eine ästhetische, benutzerfreundliche Oberfläche zu erstellen.
|
||||
2. **Anforderungskontrolle**: Nicht alles auf einmal, aber die Kernfunktionslogik muss geschlossen sein.
|
||||
3. **API-Integration**: Echte AI-Modelle (LLM/VLM etc.) integrieren, um der Anwendung echte Intelligenz zu verleihen.
|
||||
4. **Eine spielbare Anwendung erstellen**: Nicht nur statische Seiten, sondern eine dynamische Anwendung mit Datenfluss und Interaktions-Feedback.
|
||||
|
||||
### Projekt-Outputs
|
||||
|
||||
Am Ende müssen Sie Folgendes einreichen:
|
||||
|
||||
1. **Eine vollständige Prototyp-Anwendung**: Online bereitgestellt oder lokal ausführbar, mit vollständiger Nutzungskette.
|
||||
2. **Ein 30-Sekunden-Demo-Video**: Ein Video aufnehmen, das kurz Ihr Anwendungsszenario vorstellt und die Kernfunktionen in Aktion zeigt.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Abschlussherausforderung-Checkliste</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Dies ist die letzte Herausforderung von Stage 1. Bitte überprüfen Sie Ihr Werk anhand der folgenden Checkliste:
|
||||
</p>
|
||||
|
||||
<div style="font-weight: bold; margin-bottom: 10px;">Kernfunktionen-Selbstprüfung</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Klares Szenario</strong>: Ein konkretes Branchen- oder Anwendungsszenario ausgewählt</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Geschlossene Logik</strong>: Kernprozess funktioniert, nicht nur der Happy Path</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>AI-getrieben</strong>: Echte LLM-API aufgerufen, keine vordefinierten Antworten</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Vollständige Erfahrung</strong>: Loading, Fehlerbehandlung und Simulationsdaten enthalten</label></li>
|
||||
</ul>
|
||||
|
||||
<div style="font-weight: bold; margin: 20px 0 10px;">Liefergegenstände</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Prototyp-Anwendung</strong>: Code ist fertiggestellt und ausführbar</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Demo-Video</strong>: Etwa 30 Sekunden, zeigt klar die Kern-Highlights</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
Nach Abschluss des Abschlussprojekts verfügen Sie über die Fähigkeit, "unabhängig AI-Anwendungsprototypen zu entwickeln".
|
||||
In Stage 2 werden wir uns mit komplexerer Full-Stack-Entwicklung befassen und lernen, wie man diesen Prototypen in eine echte, online-fähige, datenbankgestützte Anwendung mit Benutzersystem verwandelt.
|
||||
|
||||
Wir sehen uns im nächsten Stage!
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Weiter fortgeschritten"
|
||||
description="Herzlichen Glückwunsch zum Abschluss von Stage 1. Diese Kapitel helfen Ihnen, in die professionelle Entwicklung überzugehen."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,812 @@
|
||||
---
|
||||
title: 'AI-Fähigkeiten in den Prototyp integrieren - Text- und Bild-API anbinden'
|
||||
description: 'Echte AI-Fähigkeiten in einen bestehenden Web-Prototyp integrieren: API-Kernkonzepte verstehen, API Key und offizielle Beispiele finden; DeepSeek Textmodell und verschiedene Bildgenerierungsdienste (SiliconFlow Qwen-Image, Recraft, Seedream) in der Praxis integrieren und gängige Modellauswahl-Methoden beherrschen.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Etwa <strong>1 Tag</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['de-de/stage-1/integrating-ai-capabilities'] ?? []
|
||||
</script>
|
||||
|
||||
# Anfänger IV: AI-Fähigkeiten in den Prototyp integrieren
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['API', 'Textmodell', 'Text-zu-Bild', 'Prototyp-Integration']" coreOutput="Prototyp mit 1 Textmodell + 1 Bildmodell (optional) verbunden" expectedOutput="AI-Prototyp mit realer API-Anbindung">
|
||||
|
||||
In den vorherigen Kapiteln haben wir den vollständigen Prozess von der <strong>Ideenfindung</strong> bis zum <strong>Produktprototyp</strong> durchlaufen. Aber der aktuelle Prototyp ist nur eine "Hülle" – ein Klick auf den Button generiert keinen echten Inhalt, die Daten auf der Seite sind hartcodiert.
|
||||
|
||||
Erinnern Sie sich, was wir im ersten Kapitel betont haben? <strong>Wir wollen "Produkte, für die jemand zu zahlen bereit ist" erstellen, nicht "gut aussehende Prototypen".</strong> Der echte Wert entsteht dadurch, dass das Produkt <strong>echte Probleme löst</strong>. Um das zu erreichen, muss der Prototyp <strong>wirklich funktionieren</strong>.
|
||||
|
||||
Dieses Kapitel bringt den Prototyp zum <strong>"Leben"</strong>: Wir binden <strong>echte AI-Fähigkeiten</strong> ein, vom Erhalt des API Keys über das Lesen der offiziellen Dokumentation bis zur Integration durch AI IDE. Am Beispiel des <strong>DeepSeek Textmodells</strong> lernen Sie, wie Sie die Anwendung <strong>echt große Modelle zur Inhaltsgenerierung aufrufen</strong> lassen; bei Interesse können Sie optional <strong>auch die Bildgenerierung integrieren</strong>.
|
||||
|
||||
Nach diesem Kapitel ist Ihr Prototyp <strong>nicht mehr nur eine statische Demo</strong>, sondern eine <strong>Anwendung, die echte AI-Fähigkeiten aufrufen und echte Probleme lösen kann</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'API-Grundlagen', description: 'Kernkonzepte und Sicherheitsrichtlinien verstehen' },
|
||||
{ title: 'Text integrieren', description: 'DeepSeek Textgenerierung in der Praxis' },
|
||||
{ title: 'Bilder integrieren', description: 'VLM Bildverstehen und -generierung' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 1. API-Grundkonzepte
|
||||
|
||||
Wir erwähnten, dass unser Ziel ist, "AI-Fähigkeiten zu integrieren" und den Prototypen von einer statischen Demo zu einem Tool zu machen, das echte AI-Dienste aufrufen kann. Der Schlüssel dafür liegt im Verständnis und der Nutzung von APIs (Application Programming Interfaces).
|
||||
|
||||
API ist ein wichtiges Abstraktionskonzept im Computerbereich. Man kann es sich einfach vorstellen als: **Sie senden "eine Frage" im gewünschten Format und erhalten "ein Ergebnis" im selben Format zurück.**
|
||||
|
||||
- **Was Sie senden**: Enthält normalerweise einen "Schlüssel (API Key)" und "was Sie generieren möchten"
|
||||
- **Was Sie zurückbekommen**: Bei Erfolg das Ergebnis; bei Fehler die Ursache (z.B. "Schlüssel falsch", "Guthaben unzureichend", "Parameter fehlerhaft")
|
||||
|
||||
Konkret müssen Sie folgende Kernelemente beherrschen:
|
||||
|
||||
1. **API Key**: Ihr "Ausweis" und zugleich Ihr "Geldschlüssel". Wer ihn hat, kann in Ihrem Namen API-Aufrufe tätigen und Kosten verursachen.
|
||||
2. **Endpoint (Schnittstellenpfad)**: Der spezifische Pfad der API-Anfrage, der dem Server sagt, welche Funktion Sie nutzen möchten. Die vollständige Anfrage-URL besteht normalerweise aus "Basis-URL + Endpoint-Pfad". Zum Beispiel:
|
||||
- Textgenerierung: Basis-URL (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = Vollständige URL `https://api.service.com/v1/chat/completions`
|
||||
- Bildgenerierung: Basis-URL (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = Vollständige URL `https://api.service.com/v1/images/generations`
|
||||
3. **Aufruf/Anfrage**: Der Prozess, eine Aufgabe an den AI-Dienst zu senden und Ergebnisse zu erhalten
|
||||
4. **Anfrage-Inhalt**: Was Sie an AI senden, z.B. das Thema des Artikels, den AI schreiben soll, oder die Beschreibung des zu generierenden Bildes
|
||||
5. **Antwort-Ergebnis**: Was AI nach der Verarbeitung zurückgibt, z.B. den generierten Artikel oder das Bild
|
||||
6. **Fehlerbehandlung**: Wissen, wie man Probleme diagnostiziert, wenn etwas schiefgeht (falscher API Key, zu häufige Anfragen etc.)
|
||||
|
||||
::: info Was ist eine API?
|
||||
Eine ausführlichere Erklärung finden Sie im Anhang: [API-Einführung](/de-de/appendix/4-server-and-backend/api-intro).
|
||||
|
||||
::: warning API-Sicherheitshinweise
|
||||
API Key ist Ihr "Ausweis" für AI-Dienst-Anfragen – eine Passwort-Zeichenkette zur Authentifizierung und Abrechnung.
|
||||
|
||||
Da der API Key direkt mit Ihrem Konto und den Kosten verbunden ist, beachten Sie unbedingt:
|
||||
|
||||
- **Niemals** in Gruppenchats teilen, als Screenshot online stellen oder in öffentlichen Foren veröffentlichen
|
||||
- **Nicht** im Code hartcodieren und in ein Git-Repository laden (besonders öffentliche Repos)
|
||||
- Wenn Sie vermuten, dass der Key kompromittiert wurde: **Sofort einen neuen Key erstellen**
|
||||
|
||||
Wir werden in den folgenden Inhalten den API KEY **direkt in die AI IDE einfügen**. **In echten Projekten nicht so vorgehen!!** Da es sich um eine Übung handelt, ist es in Ordnung. (Wenn Sie fortgeschrittener sind, können Sie AI eine Konfigurationsdatei generieren lassen und den API Key dort eintragen.)
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'API-Grundlagen', description: 'Kernkonzepte und Sicherheitsrichtlinien verstehen' },
|
||||
{ title: 'Text integrieren', description: 'DeepSeek Textgenerierung in der Praxis' },
|
||||
{ title: 'Bilder integrieren', description: 'VLM Bildverstehen und -generierung' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 2. Textgenerierungs-API integrieren: DeepSeek
|
||||
|
||||
Obwohl APIs diese technischen Konzepte beinhalten, kann die praktische Umsetzung in der Prototyp-Phase sehr einfach und effizient sein. Das Kernprinzip:
|
||||
|
||||
> **Offizielles Beispiel finden, API Key besorgen, AI IDE an den Button anbinden lassen.**
|
||||
|
||||
Mit diesem Verständnis werden Sie feststellen: Ob Text- oder Bildmodell – der grundlegende Ablauf ist derselbe: Wenn der Nutzer auf einen Button klickt, bereitet das Frontend die Eingabe vor und sendet die Anfrage; die Schnittstelle gibt das Ergebnis zurück, das dann auf der Seite angezeigt wird. Als Nächstes werden wir dies durch praktische Anwendung überprüfen.
|
||||
|
||||
In "1.2 Prototyp erstellen" haben Sie bereits einen interaktiven Prototypen erstellt. Als Nächstes verwandeln wir die "AI-ähnlichen Funktionen" im Prototyp in echte Fähigkeiten: **Wenn der Nutzer auf den Button klickt, sendet der Prototyp eine Anfrage an einen externen AI-Dienst und zeigt den zurückgegebenen Text an.**
|
||||
|
||||
::: info Prinzip-Erweiterung
|
||||
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Große Sprachmodelle (LLM) Einführung](/de-de/appendix/8-artificial-intelligence/llm-principles).
|
||||
::: details Mehr erfahren: Was ist DeepSeek?
|
||||
|
||||
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, unter dem Handelsnamen DeepSeek, ist ein **chinesisches AI-Unternehmen, das große Sprachmodelle (LLMs) entwickelt**. DeepSeek hat seinen Hauptsitz in Hangzhou, Provinz Zhejiang, und wird von dem chinesischen Hedgefonds High-Flyer besessen und finanziert. DeepSeek wurde im Juli 2023 von Liang Wenfeng, Mitbegründer von High-Flyer, gegründet, der auch CEO beider Unternehmen ist. Das Unternehmen brachte im Januar 2025 den gleichnamigen Chatbot und das DeepSeek-R1-Modell auf den Markt.
|
||||
|
||||
Schauen wir uns an, wie DeepSeek im GPQA-Benchmark-Ranking im Vergleich zu anderen Top-Modellen abschneidet. Bemerkenswert: DeepSeek ist ein Open-Source-Modell (jeder kann das Modell aus dem Internet herunterladen), während andere gängige Modelle wie Grok, Google Gemini und ChatGPT proprietär sind. Wie wir sehen, hat DeepSeek die Spitze bereits weitgehend erreicht.
|
||||
|
||||
|
||||
|
||||
GPQA steht für "Graduate-Level Google-Proof Q&A Benchmark", ein Benchmark für wissenschaftliche Frage-Antwort-Aufgaben auf Graduiertenniveau. Hier ist eine detaillierte Einführung.
|
||||
|
||||
GPQA enthält 448 Multiple-Choice-Fragen aus Teilbereichen der Biologie, Physik und Chemie, wie Quantenmechanik, organische Chemie, Molekularbiologie usw. Diese Fragen wurden von 61 Experten mit Doktortitel oder in Doktorandenausbildung verfasst und durchliefen einen strengen Verifizierungsprozess.
|
||||
:::
|
||||
|
||||
Folgen Sie diesen 3 Schritten, um die schnelle Integration der LLM-Generierungs-API zu realisieren:
|
||||
|
||||
1. **Einen API Key auf der DeepSeek-Plattform erstellen**
|
||||
2. **Das Textgenerierungs-Beispiel in der DeepSeek-Dokumentation finden** (oft gibt es fertigen Code zum direkten Kopieren)
|
||||
3. **AI IDE öffnen, API Key + offizielles Beispiel einfügen** und AI sagen, welche Funktion implementiert werden soll:
|
||||
> Hilf mir, die API dieses großen Modells zu integrieren, unterstütze die Copywriting-Generierung dieser Anwendung
|
||||
|
||||
Als Nächstes demonstrieren wir den Ablauf. Sie können den gesamten Prozess einmal mitschreiben. Registrieren Sie zunächst ein [DeepSeek](https://platform.deepseek.com/usage)-Konto, erstellen Sie einen API Key und laden Sie ein kleines Guthaben auf.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Klicken Sie auf "API KEYS" und finden Sie unten auf dem Bildschirm "create new API key". Sie erhalten schließlich einen API Key wie sk-8573341c39fc44315aadc071c53rh7d2.
|
||||
|
||||
|
||||
|
||||
Sobald Sie den Schlüssel haben, verfügen Sie über die Berechtigung, das Modell aufzurufen.
|
||||
|
||||
Nun können Sie die [API](https://api-docs.deepseek.com/)-Dokumentation lesen, die normalerweise curl- oder Python-Aufrufbeispiele bietet.
|
||||
|
||||
|
||||
|
||||
Nachdem Sie das Beispiel gefunden haben, können Sie den gesamten Inhalt der Dokumentation zusammen mit dem Schlüssel in den AI IDE-Dialog kopieren und das LLM in den bereits entwickelten Prototypen integrieren lassen.
|
||||
|
||||
|
||||
|
||||
Verwenden Sie folgenden Prompt als Referenz:
|
||||
|
||||
```
|
||||
Beziehe dich auf diese Aufrufmethode und hilf mir, die Copywriting-Generierung zu unterstützen.
|
||||
Basierend auf Produktinformationen soll nach Klick Douyin E-Commerce-Copywriting in verschiedenen Stilen generiert werden.
|
||||
|
||||
Referenzmaterialien:
|
||||
api key: sk-8573341c39aefa1efe
|
||||
api Anfrage-Referenz:
|
||||
curl \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
|
||||
-d '{
|
||||
"model": "deepseek-chat",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
Nach einer Weile der AI-Codegenerierung erhalten Sie leicht den entsprechenden Copywriting-Generierungs-Button zum Testen. Wenn Sie den Einstieg nicht finden, können Sie AI IDE nach der relevanten Seite fragen. Wenn Sie wirklich nicht weiterkommen, können Sie AI IDE direkt basierend auf Ihren Ideen umgestalten lassen, um das endgültige Copywriting-Generierungsergebnis zu erhalten.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Sie fragen sich vielleicht: Woher weiß ich, ob das große Modell wirklich aufgerufen wurde und nicht nur eine feste Antwort eingebaut ist? Sie können benutzerdefiniertes Copywriting eingeben und das große Modell bitten, basierend auf Ihrer angegebenen benutzerdefinierten Analyse entsprechendes Copywriting zu generieren.
|
||||
|
||||
Wenn die Ergebnisse bei jedem Aufruf unterschiedlich, aber logisch sind, können Sie zuversichtlich annehmen, dass die API erfolgreich aufgerufen wird. Sie können auch die [API-Nutzungsverwaltungsplattform](https://platform.deepseek.com/usage) prüfen, ob der Aufruf erfolgreich war (es kann einige Minuten dauern, bis die Daten angezeigt werden).
|
||||
|
||||
## Weitere Textgenerierungs-Modelle
|
||||
|
||||
Neben DeepSeek können Sie auch andere große Sprachmodelle ausprobieren. Da die meisten Modelle eine **OpenAI-kompatible Schnittstelle** bieten, ist der Wechsel sehr einfach – nur API Key, Basis-URL und Modellname müssen geändert werden.
|
||||
|
||||
### MiniMax-Integration
|
||||
|
||||
::: details Mehr erfahren: Was ist MiniMax?
|
||||
|
||||
**MiniMax** ist ein chinesisches AI-Unternehmen, das an der Entwicklung allgemeiner KI-Technologie forscht. MiniMax hat die selbstentwickelte MiniMax-M2.7 LLM-Serie auf den Markt gebracht, die in mehreren Benchmarks hervorragende Ergebnisse erzielt und ein exzellentes Preis-Leistungs-Verhältnis bietet.
|
||||
|
||||
**Hauptmerkmale der MiniMax-M2.7-Serie:**
|
||||
|
||||
- **Ultra-langer Kontext**: Unterstützt ein Kontextfenster von 204.800 Tokens, ideal für lange Dokumente und Multi-Runden-Dialoge
|
||||
- **Hervorragendes Preis-Leistungs-Verhältnis**: Sehr wettbewerbsfähige Preise
|
||||
- **OpenAI-kompatible Schnittstelle**: Direkt mit OpenAI SDK aufrufbar, ohne neues API-Format lernen zu müssen
|
||||
- **Zwei verfügbare Modelle**:
|
||||
- `MiniMax-M2.7`: Flaggschiff-Modell für komplexe Aufgaben
|
||||
- `MiniMax-M2.7-highspeed`: Hochgeschwindigkeitsversion mit gleicher Leistung aber schneller
|
||||
:::
|
||||
|
||||
Die Integration erfolgt wie bei DeepSeek in drei Schritten:
|
||||
|
||||
1. Auf der [MiniMax Open Platform](https://platform.minimax.io/) registrieren und API Key erstellen
|
||||
2. Aufrufbeispiel in der MiniMax-Dokumentation finden
|
||||
3. API Key + Beispiel in die AI IDE einfügen
|
||||
|
||||
Da MiniMax eine OpenAI-kompatible Schnittstelle bietet, können Sie direkt das folgende curl-Beispiel mit Ihrem API Key kopieren und an die AI IDE zur Integration senden:
|
||||
|
||||
```bash
|
||||
curl https://api.minimax.io/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${MINIMAX_API_KEY}" \
|
||||
-d '{
|
||||
"model": "MiniMax-M2.7",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
::: tip Hinweis
|
||||
MiniMax API-Format ist nahezu identisch mit DeepSeek (beide verwenden das OpenAI-kompatible Format). Wenn Sie DeepSeek bereits erfolgreich integriert haben, müssen Sie nur drei Dinge ändern:
|
||||
1. **Basis-URL**: Ändern zu `https://api.minimax.io/v1`
|
||||
2. **API Key**: MiniMax API Key verwenden
|
||||
3. **Modellname**: Ändern zu `MiniMax-M2.7` oder `MiniMax-M2.7-highspeed`
|
||||
|
||||
Weitere Informationen finden Sie in der [MiniMax OpenAI-kompatiblen Schnittstellendokumentation](https://platform.minimax.io/docs/api-reference/text-openai-api).
|
||||
:::
|
||||
|
||||
# 3. Bild-zu-Text-API integrieren: Qwen3 VL
|
||||
|
||||
::: info Prinzip-Erweiterung
|
||||
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Visuelle Sprachmodelle (VLM) Einführung](/de-de/appendix/8-artificial-intelligence/multimodal-models).
|
||||
|
||||
::: details Mehr erfahren: Was ist Qwen3 VL?
|
||||
|
||||
**Qwen3 VL** ist die neueste Version der multimodalen visuellen Sprachmodellserie, die vom Qwen-Team von Alibaba Cloud entwickelt wurde. VL steht für "Vision-Language", also visuelles Sprachmodell. Es kann Bildinhalte verstehen und basierend auf Bildern Textbeschreibungen generieren, Fragen zu Bildern beantworten und Bildinformationen extrahieren.
|
||||
|
||||
|
||||
|
||||
|
||||
**Hauptfähigkeiten von Qwen3 VL:**
|
||||
|
||||
- **Bildverstehen**: Kann Objekte, Szenen, Personen und Text in Bildern erkennen
|
||||
- **Visuelle Frage-Antwort**: Basierend auf Nutzerfragen präzise Antworten zu Bildern geben
|
||||
- **Bildbeschreibung**: Detaillierte oder kompakte Textbeschreibungen von Bildern generieren
|
||||
- **Multi-Bild-Verständnis**: Unterstützt die gleichzeitige Verarbeitung mehrerer Bilder für Vergleichsanalysen
|
||||
- **Textextraktion**: Textinhalte aus Bildern extrahieren (OCR-Fähigkeit)
|
||||
|
||||
**Warum Qwen3 VL wählen?**
|
||||
|
||||
Im Vergleich zur vorherigen Generation hat Qwen3 VL die Genauigkeit des Bildverstehens deutlich verbessert und unterstützt längere, komplexere Bildanalyseaufgaben. Es zeichnet sich durch hervorragendes Chinesisch-Verständnis aus, und die API-Aufrufkosten sind relativ niedrig mit einem guten Preis-Leistungs-Verhältnis. Außerdem ist das Kontextfenster größer und kann komplexere visuelle Schlussfolgerungsaufgaben bewältigen.
|
||||
|
||||
**Typische Anwendungsszenarien:**
|
||||
|
||||
- E-Commerce: Automatische Generierung von Titeln, Beschreibungen und Selling-Points für Produktbilder
|
||||
- Content-Erstellung: Automatische Copywriting- oder Bildvorschläge basierend auf Materialbildern
|
||||
- Büro: Bildinhalts-Extraktion, automatische Berichtserkennung
|
||||
- Bildung: Automatische Analyse von Bildaufgaben, Extraktion von Wissenspunkten
|
||||
|
||||
:::
|
||||
|
||||
Im vorherigen Abschnitt haben wir erklärt, wie man eine Textgenerierungs-API integriert. Für unsere Anwendungsszenarien stellen wir jedoch ein Problem fest: Wir laden ein Bild hoch, und wenn wir nur ein großes Sprachmodell verwenden, kann es den Bildinhalt nicht gut verstehen, was zu abweichenden Ergebnissen führen kann.
|
||||
|
||||
Wir möchten ein Modell, das uns hilft, ein Bild in eine Textbeschreibung umzuwandeln. Dafür benötigen wir ein visuelles Sprachmodell (VLM). In unserem Beispiel werden wir das visuelle Sprachmodell verwenden, um Selling-Point-Beschreibungen für Produkte zu generieren und die Nutzererfahrung zu verbessern.
|
||||
|
||||
Der Einfachheit halber verwenden wir die API-Schnittstelle der [SiliconFlow Cloud-Plattform](https://cloud.siliconflow.cn/me) für die Integration der Bild-zu-Text-API.
|
||||
|
||||
::: details Mehr erfahren: Was ist SiliconFlow?
|
||||
**SiliconFlow** ist eine bekannte inländische AI-Modell-Aggregationsplattform, die API-Schnittstellendienste für verschiedene gängige große Sprachmodelle und visuelle Sprachmodelle anbietet.
|
||||
|
||||
**Plattform-Features:**
|
||||
|
||||
- **Multi-Modell-Unterstützung**: Integriert verschiedene gängige AI-Modelle, einschließlich Open-Source-Modelle wie DeepSeek, Qwen, Llama-Serie usw.
|
||||
- **Technologische Optimierung**: Inferenzoptimierung für Open-Source-Modelle mit API-Diensten für niedrige Latenz und hohe Parallelität
|
||||
- **Schnittstellenkompatibilität**: Bietet eine mit dem OpenAI-Format kompatible API-Schnittstelle für einfache Integration in bestehende Anwendungen
|
||||
- **Nutzungsabhängige Abrechnung**: Unterstützt nutzungsabhängige Abrechnung nach API-Aufrufen
|
||||
|
||||
SiliconFlow ist im Bereich der Inferenzdienste für Open-Source-Großmodelle relativ etabliert und eine der gängigen Optionen für die Nutzung inländischer Open-Source-AI-Modelle.
|
||||
:::
|
||||
|
||||
Auf der Startseite der SiliconFlow-Plattform sehen wir viele verfügbare Modelle. Finden Sie den Filter oben links, klicken Sie, um den Filter zu öffnen, und wählen Sie das Tag "Vision". Wir sehen dann viele Bild-zu-Text-Modelle, wie z.B. Zhipu GLM-4.6V oder Qwen3-VL.
|
||||
|
||||
|
||||
|
||||
Wir können ein beliebiges Modell zum Testen auswählen. Hier verwenden wir `Qwen/Qwen3-VL-8B-Instruct` als Beispiel.
|
||||
|
||||
|
||||
|
||||
Gehen Sie zur [SiliconFlow-Plattform](https://cloud.siliconflow.cn/me/account/ak), klicken Sie unter API-Schlüssel auf "Neuen API-Schlüssel erstellen", um einen neuen API Key zu erstellen.
|
||||
|
||||
Sie können den folgenden Code als Referenzcode verwenden und ihn zusammen mit dem generierten API Key an die AI IDE senden, um die Funktionsintegration durchzuführen.
|
||||
|
||||
::: details Bild-zu-Text-Referenzcode
|
||||
|
||||
```python
|
||||
from openai import OpenAI
|
||||
from typing import Dict, Any, List
|
||||
import base64
|
||||
import os
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
|
||||
MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
|
||||
|
||||
def encode_image(image_path: str) -> str:
|
||||
with open(image_path, "rb") as image_file:
|
||||
return base64.b64encode(image_file.read()).decode('utf-8')
|
||||
|
||||
def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL_NAME,
|
||||
messages=messages,
|
||||
max_tokens=512,
|
||||
temperature=0.7,
|
||||
top_p=0.7,
|
||||
frequency_penalty=0.5,
|
||||
stream=False,
|
||||
n=1
|
||||
)
|
||||
return response.choices[0].message.content
|
||||
|
||||
def caption_image(image_path: str) -> str:
|
||||
base64_image = encode_image(image_path)
|
||||
messages = [
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Please describe this image in detail."
|
||||
},
|
||||
{
|
||||
"type": "image_url",
|
||||
"image_url": {
|
||||
"url": f"data:image/jpeg;base64,{base64_image}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
client = OpenAI(
|
||||
api_key=SILICONFLOW_API_KEY,
|
||||
base_url=SILICONFLOW_BASE_URL
|
||||
)
|
||||
|
||||
return get_vlm_completion(client, messages)
|
||||
|
||||
image_path = "images.jpg"
|
||||
caption = caption_image(image_path)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
In diesem Szenario lassen wir AI IDE direkt helfen, die Funktion zum automatischen Generieren von E-Commerce-Selling-Point-Texten und Keywords aus hochgeladenen Bildern zu implementieren, wie folgt:
|
||||
|
||||
```
|
||||
Basierend auf der folgenden Bild-zu-Text-API, hilf uns, eine Funktion zu implementieren,
|
||||
die aus hochgeladenen Bildern automatisch E-Commerce-Selling-Point-Texte und Keywords generiert.
|
||||
|
||||
<Code hier ausgelassen, Sie müssen den Schlüssel und den Referenzcode selbst einfügen>
|
||||
```
|
||||
|
||||
Schließlich erhalten wir das Generierungsergebnis:
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'API-Grundlagen', description: 'Kernkonzepte und Sicherheitsrichtlinien verstehen' },
|
||||
{ title: 'Text integrieren', description: 'DeepSeek Textgenerierung in der Praxis' },
|
||||
{ title: 'Bilder integrieren', description: 'VLM Bildverstehen und -generierung' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 4. Bildgenerierungs-API integrieren: Seedream
|
||||
|
||||
In den vorherigen Abschnitten haben wir hauptsächlich mit textbezogenen Aufgaben gearbeitet. Als Nächstes werden wir die Integration der Bildgenerierungsfunktion ausprobieren, die die Generierung von Bildern aus Textbeschreibungen oder die Bearbeitung von Bildern unterstützt.
|
||||
|
||||
::: info Prinzip-Erweiterung
|
||||
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Bildgenerierung Einführung](/de-de/appendix/8-artificial-intelligence/image-generation).
|
||||
|
||||
::: details Mehr erfahren: Was ist [Seedream](https://seed.bytedance.com/en/seedream4_5)?
|
||||
|
||||
|
||||
|
||||
> Vielleicht kennen Sie bereits Nano Banana (von Google entwickelt), aber Sie sollten Seedream nicht verpassen. Seedream 4.5 ist ein neues Bildgenerierungsmodell von ByteDance. Es integriert Bildgenerierung und Bildbearbeitungsfähigkeiten in einer einheitlichen Architektur. Dies ermöglicht die flexible Bearbeitung komplexer multimodaler Aufgaben wie wissensbasierte Generierung, komplexes Schlussfolgern und Referenzkonsistenz. Außerdem ist die Inferenzgeschwindigkeit deutlich schneller als bei der Vorgängerversion, und es kann hochauflösende Bilder mit bis zu 4K-Auflösung generieren.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
**Hauptfähigkeiten:**
|
||||
|
||||
- **Text-zu-Bild**: Bilder aus Textbeschreibungen generieren, unterstützt verschiedene Stile (realistisch, Cartoon, Tuschmalerei, Cyberpunk usw.)
|
||||
- **Stiltransfer**: Ein Bild in einen bestimmten Kunststil umwandeln
|
||||
- **Bildvarianten**: Neue Bilder im ähnlichen Stil basierend auf einem Referenzbild generieren
|
||||
- **Auflösungsverbesserung**: Bildklarheit und Details verbessern
|
||||
- **Bildbearbeitung**: Bestehende Bilder durch natürlichsprachliche Anweisungen bearbeiten und verändern
|
||||
|
||||
**Warum Seedream wählen?**
|
||||
|
||||
- **Stabiles Inlandsnetzwerk**: Schnelle Zugriffszeiten im Inland, niedrige Latenz
|
||||
- **Hervorragende Ergebnisse**: Stabile und zuverlässige Leistung in E-Commerce- und Material-Szenarien
|
||||
- **Chinesisch-Optimierung**: Genaueres Verständnis für chinesische Prompts, geeignet für inländische Nutzer
|
||||
- **Hohe Geschwindigkeit**: Hohe Generierungseffizienz, kurze Antwortzeiten
|
||||
- **Stabile Qualität**: Generierung hochauflösender Bilder bis zu 4K
|
||||
|
||||
**Typische Anwendungsszenarien:**
|
||||
|
||||
- E-Commerce: Hauptbilder, Detailseiten-Illustrationen, Werbeplakate generieren
|
||||
- Social Media: Avatare, Memes, Illustrationen generieren
|
||||
- Design: Schnelle Konzeptbilder, Materialbilder, Hintergrundbilder erstellen
|
||||
- Marketing: Werbebilder, Event-Banner, Festtagsplakate erstellen
|
||||
|
||||
**Kombination mit Qwen3 VL:**
|
||||
|
||||
Diese beiden APIs können in Reihe geschaltet werden: Zuerst Qwen3 VL verwenden, um ein Referenzbild zu analysieren und den Bildinhalt zu verstehen; dann Seedream verwenden, um basierend auf den analysierten Prompts des Referenzbildes neue Bilder zu generieren.
|
||||
:::
|
||||
|
||||
Viele "AI-Plakate / AI-Hauptbilder / AI-Charakterbilder", die Sie möglicherweise auf Douyin, Bilibili oder YouTube sehen, nutzen im Wesentlichen die in diesem Abschnitt vorgestellte Technik. Was Sie tun müssen, ist einfach: Die Nutzereingabe zu einem Satz zusammenfassen, die Bild-API anfragen und das zurückgegebene Bild anzeigen. Das hier verwendete Modell wird als Bildgenerierungs-/Bildbearbeitungsmodell bezeichnet.
|
||||
|
||||
Wir werden schrittweise demonstrieren, wie Sie die Seedream API in Ihr Projekt integrieren (mit Unterstützung durch AI IDE).
|
||||
|
||||
Nachdem Sie die [Startseite](https://www.volcengine.com/experience/ark?launch=seedream) aufgerufen haben, klicken Sie auf Anmelden.
|
||||
|
||||
|
||||
|
||||
Nach der Anmeldung finden Sie die Aufladeoption oben rechts auf der Seite.
|
||||
|
||||
|
||||
|
||||
Für die Aufladung ist eine Identitätsverifizierung erforderlich.
|
||||
|
||||
|
||||
|
||||
Nach erfolgreicher Verifizierung können Sie [1 Yuan zum Testen aufladen](https://console.volcengine.com/finance/fund/recharge).
|
||||
|
||||
Kehren Sie zur [ursprünglichen Seite](https://www.volcengine.com/experience/ark?launch=seedream) zurück und klicken Sie auf API-Zugriff.
|
||||
|
||||
|
||||
|
||||
Erstellen Sie zunächst einen API Key und klicken Sie dann auf die Auswahloption.
|
||||
|
||||
|
||||
|
||||
Dies bringt Sie zu Schritt 2. Hier müssen Sie bestätigen, dass der aufgerufene Dienst Seedream 4.5 ist, und das bereitgestellte Aufrufbeispiel kopieren. (Der Screenshot wurde früher erstellt, daher ist die Modellversion noch 4.0.)
|
||||
|
||||
|
||||
|
||||
Nachdem Sie den API Key und das Aufrufbeispiel vorbereitet haben, können Sie diese direkt in die AI IDE einfügen und eine Frontend-Interaktionsdemo generieren lassen oder die Fähigkeit in einen bestehenden Prototypen integrieren. Beachten Sie, dass Sie im Bild auswählen können, ob Sie Text-zu-Bild oder Mehrere-Bilder-zu-einem-Bild verwenden möchten. Sie müssen den Referenzcode entsprechend Ihren aktuellen Anforderungen auswählen.
|
||||
|
||||
::: warning Wichtiger Hinweis
|
||||
Das Standardbeispiel hier ist relativ komplex. Denken Sie daran, **"Wasserzeichen hinzufügen"** und **"Streaming-Antwort"** zu deaktivieren, um sicherzustellen, dass kein Wasserzeichen generiert wird und keine Anfragefehler auftreten.
|
||||
:::
|
||||
|
||||
Da wir später den Referenzbild-Generierungsmodus verwenden, wählen wir zunächst die Funktion Mehrere-Bilder-zu-einem-Bild. Der kopierte Referenzcode sieht wie folgt aus:
|
||||
|
||||
```
|
||||
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer xxxxxxx" \
|
||||
-d '{
|
||||
"model": "doubao-seedream-4-5-251128",
|
||||
"prompt": "Ersetze die Kleidung in Bild 1 durch die Kleidung in Bild 2",
|
||||
"image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
|
||||
"sequential_image_generation": "disabled",
|
||||
"response_format": "url",
|
||||
"size": "2K",
|
||||
"stream": false,
|
||||
"watermark": true
|
||||
}'
|
||||
```
|
||||
|
||||
Mit dem Bildreferenzcode lassen wir AI IDE gängige Bildaufgaben im E-Commerce unterstützen:
|
||||
|
||||
```
|
||||
Bitte basierend auf der folgenden API hilf mir, die gängigen Funktionen im E-Commerce-Geschäft zu implementieren
|
||||
(z.B. Plakatgenerierung, Douyin E-Commerce-Hauptbild-Generierung usw.)
|
||||
|
||||
<Hier API KEY und Bildbearbeitungscode einfügen>
|
||||
```
|
||||
|
||||
Das Ergebnis sieht wie folgt aus:
|
||||
|
||||
|
||||
|
||||
Es ist erwähnenswert, dass die Bildgenerierung oft zu seltsamen Problemen führen kann. Es wird empfohlen, AI IDE so einzustellen, dass es vollständige Fehlermeldungen anzeigt, um das Kopieren und Einfügen für Korrekturen zu erleichtern (andernfalls wird möglicherweise wiederholt "Generierung fehlgeschlagen" angezeigt, ohne dass klar ist, warum). Zum Beispiel können Sie sagen:
|
||||
|
||||
```
|
||||
Zeige nicht nur "Bildgenerierung fehlgeschlagen", sondern zeige jedes Mal den vollständigen Fehlergrund,
|
||||
wie z.B. Bildinkompatibilität, Anfragefehler, Timeout usw.!
|
||||
```
|
||||
|
||||
Manchmal werden Aktualisierungen nach einer Änderung nicht auf der Webseite angewendet. Wenn Sie feststellen, dass die Webseite nach einer Änderung weiterhin Fehler anzeigt (mehrmals hintereinander), können Sie auch versuchen, AI IDE direkt zu sagen: Bitte starten Sie dieses Projekt neu.
|
||||
|
||||
Im E-Commerce-Geschäft möchten wir möglicherweise, dass Nutzer hochgeladene Kleidung automatisch auf einer Person tragen können, oder automatisch attraktive Verkaufsimages und Plakate für Produkte generieren. Hier probieren wir einen Prompt aus, um ein E-Commerce-Plakat zu generieren:
|
||||
|
||||
|
||||
|
||||
Sie können je nach Ihren eigenen Geschäftsszenarien die Text-zu-Bild- oder Bild-zu-Bild-API verwenden, um verschiedene Funktionen zu implementieren.
|
||||
|
||||
## Weitere Bildgenerierungsdienste
|
||||
|
||||
Nachfolgend finden Sie weitere Optionen. Es wird empfohlen, zunächst die Qwen-Bildgenerierung erfolgreich zum Laufen zu bringen und dann basierend auf Ergebnissen und Kosten die folgenden Dienste als Ersatz auszuprobieren (wählen Sie nach persönlichem Erfahrungseindruck).
|
||||
|
||||
### Recraft-Integration
|
||||
|
||||
Wenn Ihr Prototyp eher in Richtung "Design-Produktion" geht (z.B. Generierung von Marken-Stil-Illustrationen, Marketing-Plakaten, Vektor-Stil-Materialien), ist Recraft oft die bessere Wahl. Die Integration erfolgt genau wie im vorherigen Abschnitt: **Key besorgen + offizielles Beispiel finden + AI IDE das Beispiel in Ihren Button/Ihre Seite integrieren lassen**.
|
||||
|
||||
::: details Mehr erfahren: Was ist Recraft?
|
||||
|
||||
> Recraft ist ein AI-Tool für Designer, Illustratoren und Vermarkter – 2022 in den USA gegründet, mit Hauptsitz in London. Es hilft bei der Generierung/Iteration von visuellen Elementen (Bilder, Vektorgrafiken, 3D-Grafiken) mit Vorteilen wie hochwertiger Ausgabe (jede Textgröße/-länge), präziser Elementplatzierung und markenkonsistentem Design. Vertraut von über 3 Millionen Nutzern in 200 Ländern (einschließlich Ogilvy, Netflix) und über 350 Millionen generierten Bildern. Das Team zielt darauf ab, es zu einem unverzichtbaren Designer-Tool zu machen und sicherzustellen, dass Creator ihre AI-gestützten Workflows kontrollieren können.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
Zunächst müssen wir den [API-Zugang](https://www.recraft.ai/profile/api) finden, um den API Key zu erhalten.
|
||||
|
||||
Da hier kein kostenloses Kontingent bereitgestellt wird, müssen wir 1.000 Credits selbst aufladen. Diese Website unterstützt Alipay und WeChat Pay, sodass es einfach ist, 1.000 Credits zu erhalten (Hinweis: Nicht mehr als notwendig aufladen).
|
||||
|
||||
|
||||
|
||||
Danach folgen wir weiterhin derselben Methode: Zur offiziellen Dokumentation gehen und die entsprechenden Anfragebeispiele finden:
|
||||
|
||||
- <https://www.recraft.ai/docs/api-reference/getting-started>
|
||||
- <https://www.recraft.ai/docs/api-reference/usage>
|
||||
- <https://www.recraft.ai/docs/api-reference/guides>
|
||||
|
||||
:::
|
||||
|
||||
### Qwen Image / Qwen Image Edit Integration
|
||||
|
||||
Wenn Sie einen einfacheren Weg zur Integration eines Bildgenerierungsdienstes bevorzugen, können Sie Qwen Image (Tongyi Wanxiang) in Betracht ziehen. Der Ansatz bleibt derselbe: Behandeln Sie es als "Bildgenerierungs-API" und binden Sie es an den Button Ihres Prototyps an.
|
||||
|
||||
::: details Mehr erfahren: Was ist Qwen Image / Qwen Image Edit?
|
||||
|
||||
**Qwen Image** (auch bekannt als Tongyi Wanxiang) ist eine Bildgenerierungsmodellserie des Qwen-Teams von Alibaba Cloud, die hauptsächlich zwei Modelle umfasst:
|
||||
|
||||
**1. Qwen Image — Text-zu-Bild-Modell**
|
||||
|
||||
Generiert basierend auf Textbeschreibungen völlig neue Bilder. Sie geben einen Prompt ein, das Modell versteht Ihre Absicht und generiert ein Bild, das der Beschreibung entspricht.
|
||||
|
||||
|
||||
|
||||
**Hauptfähigkeiten:**
|
||||
|
||||
- **Text-zu-Bild**: Bilder aus Textbeschreibungen generieren, unterstützt verschiedene Stile (realistisch, Cartoon, Tuschmalerei, Cyberpunk usw.)
|
||||
- **Stiltransfer**: Ein Bild in einen bestimmten Kunststil umwandeln
|
||||
- **Bildvarianten**: Neue Bilder im ähnlichen Stil basierend auf einem Referenzbild generieren
|
||||
- **Auflösungsverbesserung**: Bildklarheit und Details verbessern
|
||||
|
||||
**2. Qwen Image Edit — Bild-zu-Bild-Modell**
|
||||
|
||||
Bearbeitet und verändert bestehende Bilder. Durch natürlichsprachliche Anweisungen versteht das Modell Ihre Änderungsabsicht und generiert das Ergebnis.
|
||||
|
||||
**Hauptfähigkeiten:**
|
||||
|
||||
- **Lokaler Austausch**: Ein bestimmtes Objekt oder eine Person im Bild ersetzen (z.B. "Hintergrund zum Strand ändern")
|
||||
- **Elemententfernung**: Unerwünschte Elemente aus dem Bild entfernen
|
||||
- **Stiltransfer**: Filter oder künstlerische Effekte auf das Bild anwenden
|
||||
- **Bilderweiterung**: Bildränder erweitern und neue Inhalte generieren
|
||||
- **Intelligente Bildbearbeitung**: Automatische Verschönerung, Lichtanpassung, Fehlerkorrektur
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Warum die Qwen Image Serie wählen?**
|
||||
|
||||
- **Chinesisch-Optimierung**: Genaueres Verständnis für chinesische Prompts, geeignet für inländische Nutzer
|
||||
- **Niedrige Kosten**: Im Vergleich zu internationalen Wettbewerbern erschwinglicher
|
||||
- **Hohe Geschwindigkeit**: Hohe Generierungseffizienz, kurze Antwortzeiten
|
||||
- **Stabile Qualität**: Stabile und zuverlässige Leistung in E-Commerce- und Material-Szenarien
|
||||
- **Vielfältige Stile**: Unterstützt verschiedene Kunststile und kreative Effekte
|
||||
|
||||
**Typische Anwendungsszenarien:**
|
||||
|
||||
- E-Commerce: Hauptbilder, Detailseiten-Illustrationen, Werbeplakate generieren
|
||||
- Social Media: Avatare, Memes, Illustrationen generieren
|
||||
- Design: Schnelle Konzeptbilder, Materialbilder, Hintergrundbilder erstellen
|
||||
- Marketing: Werbebilder, Event-Banner, Festtagsplakate erstellen
|
||||
:::
|
||||
|
||||
Besuchen Sie die offizielle Website von [SiliconFlow](https://siliconflow.cn/). Auf der linken Seite gibt es einen "Playground"-Bereich, in dem Sie verschiedene Modelle ohne API-Aufruf ausprobieren können. Oben auf der Seite gibt es einen "Filters"-Button; klicken Sie darauf, um die Modellliste auf der rechten Seite zu filtern.
|
||||
|
||||
Wenn Sie "Image" auswählen, sehen Sie nur die aktuell unterstützten Text-zu-Bild-Modelle. In diesem Fall verwenden wir Qwen/Qwen-Image.
|
||||
|
||||
|
||||
|
||||
Nachdem alles eingerichtet ist, müssen wir die entsprechende Bildgenerierungs-API-Dokumentation konsultieren. Sie können auf der offiziellen Dokumentationsseite jeden Abschnitt finden, der als "API Reference" markiert ist. Klicken Sie darauf und navigieren Sie zum [API-Bereich für Bildgenerierung](https://docs.siliconflow.cn/cn/api-reference/images/images-generations), um das entsprechende Anfragebeispiel zu finden.
|
||||
|
||||
Sie können das folgende Anfragebeispiel zusammen mit dem API Key an die AI IDE senden, um die Bildgenerierungsfunktion zu implementieren.
|
||||
|
||||
```bash
|
||||
curl --request POST \
|
||||
--url https://api.siliconflow.cn/v1/images/generations \
|
||||
--header 'Authorization: Bearer <token>' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data '
|
||||
{
|
||||
"model": "Qwen/Qwen-Image-Edit-2509",
|
||||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||||
}
|
||||
'
|
||||
```
|
||||
|
||||
Hier können Sie entweder Qwen/Qwen-Image oder Qwen/Qwen-Image-Edit-2509 als Modell verwenden.
|
||||
|
||||
::: details Bildbearbeitungs-Referenzcode
|
||||
|
||||
Kopieren Sie den folgenden Code zusammen mit dem Key und senden Sie beides an AI IDE:
|
||||
|
||||
```python
|
||||
import requests
|
||||
import os
|
||||
from typing import Dict, Any, Optional
|
||||
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
|
||||
QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
|
||||
|
||||
def generate_image_edit(
|
||||
prompt: str,
|
||||
image: Optional[str] = None,
|
||||
image2: Optional[str] = None,
|
||||
image3: Optional[str] = None,
|
||||
negative_prompt: Optional[str] = None,
|
||||
cfg: Optional[float] = 4.0,
|
||||
seed: Optional[int] = None
|
||||
) -> Optional[Dict[str, Any]]:
|
||||
payload: Dict[str, Any] = {
|
||||
"model": QWEN_IMAGE_EDIT_MODEL,
|
||||
"prompt": prompt,
|
||||
}
|
||||
if image:
|
||||
payload["image"] = image
|
||||
if image2:
|
||||
payload["image2"] = image2
|
||||
if image3:
|
||||
payload["image3"] = image3
|
||||
if negative_prompt:
|
||||
payload["negative_prompt"] = negative_prompt
|
||||
if cfg is not None:
|
||||
payload["cfg"] = cfg
|
||||
if seed is not None:
|
||||
payload["seed"] = seed
|
||||
|
||||
headers: Dict[str, str] = {
|
||||
"Authorization": f"Bearer {SILICONFLOW_API_KEY}",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
|
||||
response.raise_for_status()
|
||||
return response.json()
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error generating image: {e}")
|
||||
return None
|
||||
|
||||
def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
|
||||
try:
|
||||
response = requests.get(image_url)
|
||||
response.raise_for_status()
|
||||
os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
|
||||
with open(output_path, "wb") as f:
|
||||
f.write(response.content)
|
||||
print(f"Image saved successfully to: {output_path}")
|
||||
return True
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error downloading image: {e}")
|
||||
return False
|
||||
except Exception as e:
|
||||
print(f"Error saving image: {e}")
|
||||
return False
|
||||
|
||||
prompt: str = "Verwandle den Himmel in eine Abendstimmung mit Mond und Sternen, im traumhaften Stil"
|
||||
negative_prompt: str = "verschwommen, niedrige Qualität, verzerrt"
|
||||
image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
|
||||
image2_url: Optional[str] = None
|
||||
image3_url: Optional[str] = None
|
||||
|
||||
cfg: float = 4.0
|
||||
seed: int = 12345
|
||||
output_path: str = "edited_image.png"
|
||||
|
||||
print(f"Generating edited image with prompt: {prompt}")
|
||||
print(f"Input image: {image_url}")
|
||||
print(f"CFG: {cfg}, Seed: {seed}")
|
||||
print("-" * 50)
|
||||
|
||||
result = generate_image_edit(
|
||||
prompt=prompt,
|
||||
image=image_url,
|
||||
image2=image2_url,
|
||||
image3=image3_url,
|
||||
negative_prompt=negative_prompt,
|
||||
cfg=cfg,
|
||||
seed=seed
|
||||
)
|
||||
|
||||
if result and "images" in result:
|
||||
images = result["images"]
|
||||
if images and len(images) > 0:
|
||||
image_url_result = images[0]["url"]
|
||||
print(f"Image edit generated successfully. URL: {image_url_result}")
|
||||
success = save_image_from_url(image_url_result, output_path)
|
||||
if success:
|
||||
print(f"Image saved to: {output_path}")
|
||||
else:
|
||||
print("Failed to save image to local file")
|
||||
else:
|
||||
print("No images found in response")
|
||||
else:
|
||||
print("Image generation failed")
|
||||
if result:
|
||||
print(f"Response: {result}")
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# Anhang: Wie man "aktuell stärkere" AI-Modelle findet
|
||||
|
||||
Die Entwicklung von Textmodellen (auch oft als "große Sprachmodelle" bezeichnet) verläuft sehr schnell. Wir müssen immer sicherstellen, dass wir eines der leistungsstärkeren Modelle verwenden. Über die folgenden zwei Websites können Sie bequem sehen, "welche Modelle aktuell häufig verwendet und besser bewertet werden".
|
||||
|
||||
Im Allgemeinen können diese Websites als **"Modell-Arenen"** verstanden werden: Sie stellen die Ausgaben zweier Modelle nebeneinander, und Sie stimmen für diejenige, die Ihnen besser gefällt. Modelle mit mehr Stimmen bedeuten in der Regel, dass mehr Menschen sie "besser" finden.
|
||||
|
||||
Darüber hinaus sehen Sie möglicherweise gelegentlich mysteriöse anonyme Modelle ("Unknown Model") in diesen Großmodell-Arenen. Dies bedeutet normalerweise: Jemand hat ein "internes Testmodell" für Blindtests eingeschleust, und Sie haben möglicherweise die Chance, stärkere Fähigkeiten vorab zu erleben.
|
||||
|
||||
## LMArena
|
||||
|
||||
Website: <https://lmarena.ai/>
|
||||
|
||||
LMArena eignet sich besser dafür zu beurteilen, "welches Modell die meisten Nutzer bevorzugen". Mehr Stimmen und höhere Scores bedeuten in der Regel, dass es in realen Anwendungsszenarien stabiler ist.
|
||||
|
||||
Eine einfache Nutzung:
|
||||
|
||||
1. Direkt das Leaderboard ansehen
|
||||
2. Zunächst eine Richtung wählen (z.B. allgemeiner Dialog / Programmierung / Vision)
|
||||
3. Wählen Sie eines der Top 3, das Sie nutzen können (zugänglich, Preis akzeptabel, Latenz akzeptabel)
|
||||
|
||||
|
||||
|
||||
## Artificial Analysis
|
||||
|
||||
Website: <https://artificialanalysis.ai/>
|
||||
|
||||
Artificial Analysis eignet sich besser dafür, "Leistung / Preis / Geschwindigkeit" in einer Tabelle zu vergleichen. Sie können es als Parametertabelle für die Modellauswahl verwenden.
|
||||
|
||||
Typische Nutzung:
|
||||
|
||||
1. Finden Sie die Modellkategorie, die Sie interessiert (Text / Bildgenerierung usw.)
|
||||
2. Qualitätsindikatoren (Quality) + Preis (Price) + Latenz/Durchsatz (Latency/Throughput) vergleichen
|
||||
3. Wählen Sie das Modell mit dem besten "Gesamtpreis-Leistungs-Verhältnis" für Ihr Produkt
|
||||
|
||||
::: tip Empfehlung
|
||||
Verlassen Sie sich nicht auf Ihr Bauchgefühl, um zu argumentieren, "welches besser ist". Ein zuverlässigerer Ansatz: Testen Sie 2-3 Modelle gleichzeitig mit denselben Eingaben und treffen Sie dann Ihre Entscheidung basierend auf dem Ranking und den Preisen.
|
||||
:::
|
||||
|
||||
## Zusammenfassung
|
||||
|
||||
Bei der Integration verschiedener AI-Dienste müssen Sie APIs nicht als zu kompliziert betrachten. Wenn Sie die folgenden Kernkonzepte beherrschen, können Sie die meisten Szenarien bewältigen:
|
||||
|
||||
**Eine API ist im Kern eine Kommunikationsbrücke.** Was sie tut, ist einfach: Ihre Anfrage senden und die Antwort des Modells zurückbringen. Sie müssen sich nicht um das kümmern, was im Hintergrund passiert, sondern nur das Anfrageformat korrekt zusammenstellen.
|
||||
|
||||
**Ein SDK ist eine Kapselung der API.** Wenn API die rohe Schnittstelle ist, dann ist ein SDK ein fertiges Werkzeugkasten – es übernimmt die mühsamen Details wie Anfragesignaturen, Fehlerbehandlung und Parametervalidierung für Sie. Im täglichen Entwicklungsalltag sollten Sie SDKs gegenüber direkten API-Aufrufen bevorzugen, um sich viel Mühe zu sparen.
|
||||
|
||||
**Beim Lesen der Dokumentation genügt es, auf drei Dinge zu achten**: Die Dienstadresse (Endpoint), die Anmeldeinformationen (API Key) und wie die Aufrufparameter ausgefüllt werden. Wenn Sie diese drei Punkte geklärt haben, ist es nur eine Frage der Zeit, bis der Aufruf funktioniert.
|
||||
|
||||
Die restliche Arbeit erledigen IDEs und moderne Entwicklungstools für Sie. Konzentrieren Sie sich auf Ihre Geschäftslogik und überlassen Sie die zugrunde liegenden Aufrufe diesen ausgereiften SDKs und Toolchains.
|
||||
|
||||
# 5. Hausaufgabe: Ihre erste AI-Fähigkeit integrieren
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Herausforderung: AI-Fähigkeiten in Ihren Workspace integrieren</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Beziehen Sie sich auf die Prompts und Inhalte dieser Lektion und schließen Sie einen vollständigen Zyklus ab:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Vollständiger Praxis-Zyklus</strong>
|
||||
<ul>
|
||||
<li>Wählen und integrieren Sie einen AI-Dienst (LLM / Text-zu-Bild / Bild-zu-Bild) → Frontend-Backend-Interaktion implementieren → In Ihren Prototypen integrieren</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Ergebnisse teilen</strong>
|
||||
<ul>
|
||||
<li>Machen Sie Screenshots Ihrer Funktionsseite und teilen Sie sie mit allen</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Denkaufgabe</strong>
|
||||
<ul>
|
||||
<li>Bereiten Sie sich auf das nächste Kapitel "Vollständiges Projektpraktikum" vor, indem Sie im Voraus überlegen: Wie möchten Sie diese AI-Fähigkeiten kombinieren, um interessante Funktionen zu schaffen?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
Im nächsten Kapitel werden wir diese verteilten AI-Fähigkeiten verketten und in einem realen Geschäftsszenario ein vollständiges Produkt erstellen:
|
||||
|
||||
- Content-Planung, Produkteinstellung, Datenanalyse und andere Schritte zu einem vollständigen Geschäftsprozess verketten
|
||||
- Die in dieser Lektion gelernten AI-Fähigkeiten (LLM-Copywriting-Generierung, Text-zu-Bild, Bildbearbeitung usw.) in tatsächliche Geschäftsknotenpunkte einbetten
|
||||
- Einen wirklich nutzbaren "E-Commerce AI Workspace" erstellen, keine isolierte Demo
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Weiterlernen"
|
||||
description="Empfohlener Lernpfad von 'einzelnen AI-Fähigkeiten' zum 'vollständigen Produktprozess'."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,493 @@
|
||||
---
|
||||
title: 'AI-Programmierwerkzeuge lernen'
|
||||
description: 'Lernen Sie den Unterschied zwischen IDE und AI IDE kennen, richten Sie eine lokale Entwicklungsumgebung ein und erstellen Sie mit Trae ein erstes Snake-Spiel. Dieses Kapitel zeigt den kompletten Ablauf von Installation, Projektstart, Ausfuehrung, Fehlerbehebung und Kommunikation mit AI.'
|
||||
---
|
||||
|
||||
# Anfaenger II: AI-Programmierwerkzeuge lernen
|
||||
|
||||
## Kapiteluebersicht
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'ca. <strong>1 Tag</strong>, in mehreren Sitzungen moeglich'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['zh-cn/stage-1/introduction-to-ai-ide'] ?? []
|
||||
</script>
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Lokale Entwicklungsumgebung', 'IDE und AI IDE', 'Trae', 'Agent-Entwicklung']" coreOutput="1 selbst erstelltes Spiel" expectedOutput="Ein lokal laufendes Snake-Spiel">
|
||||
|
||||
Im vorherigen Kapitel haben wir AI-Programmierung im Browser ausprobiert. Eine Web-Plattform ist bequem, aber sie hat Grenzen: Dateien lassen sich schwer langfristig verwalten, lokale Abhaengigkeiten sind eingeschraenkt, und komplexere Projekte werden schnell unuebersichtlich. In diesem Kapitel holen wir die Entwicklungsumgebung auf den eigenen Rechner.
|
||||
|
||||
Sie lernen, was eine IDE ist, wodurch sich eine AI IDE unterscheidet, wie Trae als lokales Werkzeug funktioniert und wie man AI nicht nur zum Chatten, sondern zum Erstellen, Aendern, Ausfuehren und Reparieren von Projekten nutzt. Am Ende haben Sie einen Arbeitsablauf, der dem Alltag echter Entwickler schon deutlich naeher kommt.
|
||||
|
||||
::: tip Fortgeschrittenen-Hinweis
|
||||
Wenn Sie bereits programmieren koennen und lieber in der Kommandozeile arbeiten, lesen Sie spaeter auch [Moderne CLI Coding Werkzeuge](../../stage-2/backend/modern-cli/).
|
||||
:::
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Umgebung verstehen', description: 'IDE und AI IDE einordnen' },
|
||||
{ title: 'Lokal ueben', description: 'Snake-Spiel mit Trae' },
|
||||
{ title: 'Werkzeug kennen', description: 'IDE-Oberflaeche verstehen' },
|
||||
{ title: 'Besser fragen', description: 'Mit AI klar kommunizieren' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Welche Umgebung man zum Programmieren braucht
|
||||
|
||||
### 1.1 Denkwechsel: Bei Problemen zuerst AI fragen
|
||||
|
||||
Beim klassischen Programmierlernen sucht man oft erst im Web: Wie installiere ich Python? Wie konfiguriere ich Conda? Warum haengt `npm install`? Danach arbeitet man Tutorials Schritt fuer Schritt ab und sucht bei jeder Fehlermeldung erneut.
|
||||
|
||||
Mit einer AI IDE sollten Sie diese Gewohnheit aendern. Wenn Sie nicht wissen, was zu tun ist, fragen Sie zuerst die AI im Seitenpanel. Sie kann Befehle erklaeren, passende Schritte vorschlagen oder sogar direkt fuer Sie ausfuehren.
|
||||
|
||||
- **Umgebung unklar?** Fragen Sie: "Ich moechte Python schreiben. Bitte pruefe, ob Python installiert ist, und hilf mir bei der Installation, falls es fehlt."
|
||||
- **Abhaengigkeiten laden nicht?** Schreiben Sie: "Der Download schlaegt fehl. Ist das ein Netzwerkproblem? Bitte hilf mir, eine passende Spiegelquelle zu verwenden."
|
||||
- **Befehl vergessen?** Fragen Sie: "Bitte erstelle eine neue virtuelle Umgebung mit dem Namen `demo`."
|
||||
|
||||
Der wichtige Punkt ist: Sie muessen nicht alle Befehle auswendig kennen. Sie muessen lernen, das Ziel klar zu beschreiben und die AI Schritt fuer Schritt pruefen zu lassen.
|
||||
|
||||
### 1.2 Warum Werkzeuge noetig sind
|
||||
|
||||
Ein paar Codezeilen kann man theoretisch in einem einfachen Texteditor schreiben. Fuer ein wartbares Projekt reicht das aber nicht:
|
||||
|
||||
- **Ohne Syntaxhervorhebung** sehen Schluesselwoerter, Strings und Kommentare gleich aus.
|
||||
- **Ohne Vervollstaendigung** muss jeder Name exakt selbst getippt werden.
|
||||
- **Ohne Projektansicht** verliert man bei mehreren Dateien schnell den Ueberblick.
|
||||
- **Ohne Debugging** bleibt bei Fehlern oft nur Raten und Log-Ausgabe.
|
||||
|
||||
Eine IDE, also eine integrierte Entwicklungsumgebung, loest diese Probleme. Sie organisiert Dateien, hebt Code farbig hervor, bietet Autovervollstaendigung, startet Programme und hilft beim Debugging.
|
||||
|
||||
## 2. Was ist eine IDE?
|
||||
|
||||
::: info Vorbereitung
|
||||
Wenn Ihnen IDEs noch neu sind, lesen Sie spaeter auch [IDE Grundlagen](/zh-cn/appendix/2-development-tools/ide-basics). Dort werden typische Bereiche wie Editor, Terminal, Seitenleiste und Debugger noch einmal in Ruhe erklaert.
|
||||
:::
|
||||
|
||||
Fruehe Entwickler arbeiteten mit einfachen Editoren und Kommandozeilentools. Als Projekte groesser wurden, brauchte man Werkzeuge, die Dateien, Ausfuehrung und Debugging in einer Oberflaeche vereinen. Daraus entstand die IDE.
|
||||
|
||||
|
||||
|
||||
Bildquelle der Terminal-Oberflaeche: https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
|
||||
|
||||
Auch heute werden Werkzeuge wie `Vim` oft auf Servern verwendet.
|
||||
|
||||
|
||||
|
||||
Moderne IDEs sind fuer Einsteiger komfortabler. Sie enthalten normalerweise:
|
||||
|
||||
- **Quellcode-Editor**: Syntaxhervorhebung und Autovervollstaendigung.
|
||||
- **Build- und Startwerkzeuge**: Programme koennen direkt ausgefuehrt werden.
|
||||
- **Debugger**: Breakpoints, Variablenansicht und schrittweises Ausfuehren.
|
||||
- **Projektverwaltung**: Dateien und Ordner bleiben im Zusammenhang sichtbar.
|
||||
|
||||
Die bekannteste leichte IDE ist **[Visual Studio Code](https://code.visualstudio.com/)**. Sie ist erweiterbar und fuer viele Sprachen geeignet.
|
||||
|
||||
|
||||
|
||||
VS Code folgt dem Prinzip "Alles ist eine Erweiterung". Mit Python-Erweiterung wird es zur Python-IDE, mit C++-Erweiterung zur C++-IDE. Ohne Erweiterungen ist es eher ein guter Texteditor.
|
||||
|
||||
|
||||
|
||||
Es eignet sich auch sehr gut zum Schreiben von Markdown-Dokumenten.
|
||||
|
||||
|
||||
|
||||
Kurz gesagt: Eine IDE ist ein Werkzeugset, das Schreiben, Verwalten, Ausfuehren und Reparieren von Code effizienter macht.
|
||||
|
||||
## 3. Was unterscheidet eine AI IDE von einer gewoehnlichen IDE?
|
||||
|
||||
Eine normale IDE ist ein Werkzeugkasten. Sie koennen Dateien oeffnen, Code schreiben, Programme starten und Erweiterungen installieren. Aber Sie muessen selbst wissen, welche Datei wichtig ist, welcher Befehl ausgefuehrt werden muss und wie eine Fehlermeldung zu lesen ist.
|
||||
|
||||
Eine AI IDE fuegt ein grosses Sprachmodell und haeufig einen Agenten hinzu. Dadurch koennen Sie Aufgaben in natuerlicher Sprache formulieren:
|
||||
|
||||
- "Erstelle eine Login-Seite."
|
||||
- "Hier ist die Fehlermeldung. Bitte erklaere die Ursache und schlage eine Reparatur vor."
|
||||
- "Fasse die Projektstruktur zusammen und erklaere mir, welche Dateien wichtig sind."
|
||||
- "Fuege eine Bestenliste zum Spiel hinzu und starte danach die App."
|
||||
|
||||
Eine gute AI IDE kann Dateien lesen, neue Dateien erzeugen, Code ueber mehrere Dateien hinweg aendern, Befehle im Terminal ausfuehren und nach Ihrer Bestaetigung Tests oder Entwicklungsserver starten.
|
||||
|
||||
VS Code selbst enthaelt inzwischen ebenfalls AI-Funktionen. Trotzdem sind spezialisierte AI IDEs in vielen Aufgaben staerker, weil sie Agentenablaeufe, Kontextverwaltung, Dateiaenderungen und Modellintegration gezielter ausbauen.
|
||||
|
||||
|
||||
|
||||
Viele AI IDEs basieren auf VS Code. Wenn Sie die Grundbedienung von VS Code verstehen, koennen Sie deshalb relativ leicht zwischen Trae, Cursor, Kiro, Qoder oder aehnlichen Werkzeugen wechseln.
|
||||
|
||||
Typische AI-IDE-Faehigkeiten sind:
|
||||
|
||||
- **Codegenerierung und Vervollstaendigung**: Aus wenigen Saetzen oder Pseudocode entsteht lauffaehige Logik.
|
||||
- **Codeverstaendnis und Q&A**: Die IDE beantwortet Fragen zu Dateien, Funktionen und Projektstruktur.
|
||||
- **Refactoring und Optimierung**: Bestehender Code wird nach Ihrer Absicht umgeschrieben.
|
||||
- **Testgenerierung**: Fuer Funktionen und Module koennen Testfaelle erzeugt werden.
|
||||
- **Agentische Ausfuehrung**: Ein Agent kann Dateien erstellen, Abhaengigkeiten installieren, Programme starten und Fehler iterativ reparieren.
|
||||
|
||||
### Aktuelle AI IDEs im Ueberblick
|
||||
|
||||
::: details Antigravity
|
||||
|
||||
### [Antigravity](https://antigravity.google/)
|
||||
|
||||
Antigravity ist eine von Google vorgestellte AI IDE mit Agent-First-Ansatz. Der Agent kann Editor, Terminal und Browser bedienen, Aufgaben planen, Code ausfuehren, Tests starten und Ergebnisse zusammenfassen. Sie eignet sich besonders, wenn man mit Gemini- und anderen modernen Modellen arbeiten moechte.
|
||||
:::
|
||||
|
||||
::: details Trae
|
||||
|
||||
### [Trae](https://www.trae.ai/)
|
||||
|
||||
|
||||
|
||||
Trae ist ein AI-Programmierassistent von ByteDance. Es unterstuetzt viele Programmiersprachen, kann Code aus natuerlicher Sprache erzeugen, beim Debugging helfen und Designentwuerfe in React- oder Vue-Komponenten umwandeln. Fuer dieses Kapitel nutzen wir Trae als Beispiel, weil es fuer Einsteiger einen relativ klaren Agentenablauf bietet.
|
||||
:::
|
||||
|
||||
::: details Cursor
|
||||
|
||||
### [Cursor](https://cursor.com/)
|
||||
|
||||
Cursor ist ein AI-Codeeditor auf Basis von VS Code. Er ist besonders stark bei groesseren Codebasen, Multi-File-Aenderungen und Kontextarbeit. Cursor ist sehr beliebt, aber die Pro-Version kostet ungefaehr 20 US-Dollar pro Monat.
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: details Qoder
|
||||
|
||||
### [Qoder](https://qoder.com/)
|
||||
|
||||
Qoder betont transparente Zusammenarbeit und Kontext-Engineering. Es kann Aufgaben in Schritte zerlegen, Ausfuehrung sichtbar machen und eignet sich fuer groessere Projekte, Architekturarbeit und Analyse alter Systeme.
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: details CodeBuddy
|
||||
|
||||
### [CodeBuddy](https://copilot.tencent.com/)
|
||||
|
||||
|
||||
|
||||
CodeBuddy ist ein AI-Programmierwerkzeug von Tencent Cloud. Es unterstuetzt Codevervollstaendigung, Code-Review, mehrere Modelle und Enterprise-Anforderungen wie private Bereitstellung und Compliance.
|
||||
:::
|
||||
|
||||
::: details Cline
|
||||
|
||||
### [Cline](https://cline.bot/)
|
||||
|
||||
Cline ist ein Agent-Plugin fuer VS Code. Es kann ueber verschiedene API-Endpunkte mit unterschiedlichen Modellen arbeiten, unterstuetzt MCP-Werkzeuge und verlangt fuer Aktionen normalerweise eine Nutzerbestaetigung. Es ist gut geeignet, um Ideen schnell in bestehenden VS-Code-Workflows zu testen.
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: details Kiro
|
||||
|
||||
### [Kiro](https://kiro.dev/)
|
||||
|
||||
Kiro ist eine AI-IDE von AWS und integriert sich eng mit Amazon Bedrock sowie AWS-Diensten wie Lambda, S3 oder DynamoDB. Sie eignet sich besonders fuer Cloud-native Entwicklung im AWS-Umfeld.
|
||||
:::
|
||||
|
||||
::: tip Modellhinweis
|
||||
Wenn Sie Anthropic-Claude-Modelle stabil nutzen wollen, sind Cursor, Kiro oder Antigravity oft geeignete Optionen, weil sie offizielle oder tiefere Integrationen anbieten.
|
||||
:::
|
||||
|
||||
## 4. Mit Trae ein Snake-Spiel lokal erstellen
|
||||
|
||||
Bis hierhin ging es um Begriffe. Jetzt bringen wir das in die Praxis: Wir erstellen einen leeren Ordner, oeffnen ihn in einer AI IDE, schreiben im Seitenpanel eine klare Aufgabe und lassen Trae ein Snake-Spiel mit React erzeugen.
|
||||
|
||||
Wenn Sie vorher schon auf z.ai oder einer anderen Web-Plattform Code erstellt haben, koennen Sie diesen Code auch herunterladen und lokal in Trae weiterbearbeiten. So bleiben alte Ergebnisse erhalten, und Sie bekommen trotzdem die staerkere lokale Umgebung.
|
||||
|
||||
### 4.1 Trae installieren
|
||||
|
||||
Trae kann von der offiziellen Website installiert werden. Je nach Region gibt es unterschiedliche Versionen.
|
||||
|
||||
|
||||
|
||||
- **CN-Version**: Fuer Einsteiger in China meist einfacher, oft kostenlos nutzbar und ohne Auslandsnetzwerk bequemer.
|
||||
- **Internationale Version**: Bietet Zugang zu internationalen Modellen, setzt aber passende Netzwerkbedingungen und haeufig ein Abo voraus.
|
||||
- **Drittanbieter-Modelle**: Wenn Sie API-Token fuer Modelle wie DeepSeek, Qwen, Kimi oder andere Anbieter besitzen, koennen Sie diese als Custom Model einbinden.
|
||||
|
||||
Die genaue Version ist weniger wichtig als der Arbeitsablauf: Projektordner oeffnen, Agent starten, Aufgabe klar beschreiben, Ergebnis pruefen.
|
||||
|
||||
### 4.2 Trae-Oberflaeche verstehen
|
||||
|
||||
Trae sieht VS Code sehr aehnlich: links Dateibaum, in der Mitte Editor, rechts AI-Panel.
|
||||
|
||||
|
||||
|
||||
Das rechte Panel ist das Copilot- oder Agentenfenster. Wenn es nicht sichtbar ist, oeffnen Sie es ueber das Symbol rechts oben.
|
||||
|
||||
|
||||
|
||||
Im Seitenpanel finden Sie normalerweise einen **Builder**-Modus. Er funktioniert aehnlich wie ein lokaler z.ai-Agent: Er kann Dateien anlegen, Abhaengigkeiten installieren, Befehle starten und lokale Webseiten oeffnen.
|
||||
|
||||
|
||||
|
||||
Es gibt oft mehrere Modi:
|
||||
|
||||
- **Chat**: Gut fuer Fragen zum aktuellen Projekt oder fuer allgemeine Erklaerungen.
|
||||
- **Builder**: Gut fuer Aufgaben, bei denen Dateien erstellt oder geaendert werden.
|
||||
- **Builder with MCP**: Erweitert den Agenten um zusaetzliche Werkzeuge, etwa externe Dienste oder lokale Integrationen.
|
||||
|
||||
Im Modellmenue koennen Sie das verwendete Modell waehlen. Vermeiden Sie am Anfang nach Moeglichkeit den Auto-Modus, wenn Sie reproduzierbare Ergebnisse wollen. Testen Sie fuer internationale Versionen Modelle wie Gemini oder GPT; fuer chinesische Versionen koennen Kimi, GLM, Qwen oder MiniMax gute Alltagsoptionen sein. Entscheidend ist nicht ein Dogma, sondern ob das Modell Ihre Aufgabe verlaesslich loest.
|
||||
|
||||
### 4.3 Leeren Projektordner vorbereiten
|
||||
|
||||
Erstellen Sie lokal einen leeren Ordner, zum Beispiel:
|
||||
|
||||
```txt
|
||||
snake-game-react
|
||||
```
|
||||
|
||||
Oeffnen Sie diesen Ordner in Trae. Der Dateibaum sollte anfangs leer oder fast leer sein. Damit weiss der Agent klar, dass er ein neues Projekt von Grund auf anlegen soll.
|
||||
|
||||
::: details Optional: API oder Coding Plan einbinden
|
||||
|
||||
Einige Cloud-Anbieter bieten Coding Plans oder Modell-APIs an. Damit kann man Modelle haeufiger oder stabiler nutzen als ueber einzelne Token-Abrechnung.
|
||||
|
||||
Der typische Ablauf:
|
||||
|
||||
1. Website des Anbieters oeffnen.
|
||||
2. Konto registrieren und anmelden.
|
||||
3. Preis- oder Coding-Plan-Seite finden.
|
||||
4. Passenden Plan kaufen oder eine API aktivieren.
|
||||
5. API Key kopieren.
|
||||
6. In Trae ueber **Add Model** oder **Custom Model** eintragen.
|
||||
|
||||
Fuer erste Uebungen reicht oft ein kostenloses oder sehr guenstiges Modell. Zahlen Sie am Anfang nur kleine Betraege ein, bis Sie wissen, wie lange Ihr Guthaben reicht.
|
||||
|
||||
:::
|
||||
|
||||
### 4.4 Snake-Spiel mit einem klaren Prompt erstellen
|
||||
|
||||
Oeffnen Sie das AI-Seitenpanel, zum Beispiel mit `Ctrl+L` oder ueber das Chat-Symbol. Geben Sie dann eine konkrete Aufgabe ein:
|
||||
|
||||
> Bitte implementiere mit React ein Snake-Spiel. Es soll Tastatursteuerung, Essen, Wachstum, Punkteanzeige, Game Over bei Wandkontakt oder Selbstkollision und einen Neustart-Button enthalten. Erstelle das Projekt, installiere fehlende Abhaengigkeiten und starte es lokal. Wenn eine Umgebung fehlt, erklaere zuerst kurz, was installiert werden muss, und hilf mir dann Schritt fuer Schritt.
|
||||
|
||||
Der Agent wird normalerweise Dateien anlegen, Abhaengigkeiten installieren und einen Entwicklungsserver starten. Dabei kann er anhalten, wenn er eine Bestaetigung braucht.
|
||||
|
||||
::: warning Wichtiger Hinweis
|
||||
Manchmal pausiert ein Agent, weil ein Befehl eine Eingabe erwartet, etwa `y`, `Enter`, einen Projektnamen oder eine Auswahl. Wenn Sie unsicher sind, machen Sie einen Screenshot und fragen Sie die AI: "Was soll ich in diesem Schritt tun?"
|
||||
:::
|
||||
|
||||
Typische Situationen:
|
||||
|
||||
- Wenn ein Button wie **Run** erscheint, muessen Sie die Ausfuehrung bestaetigen.
|
||||
- Wenn ein Paketmanager `y` erwartet, reicht meist die Eingabe `y`.
|
||||
- Wenn ein lokaler Entwicklungsserver gestartet wurde, bleibt der Prozess im Terminal aktiv. Das ist normal; oeffnen Sie die angezeigte URL im Browser.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Wenn das Ergebnis nicht passt, beschreiben Sie das sichtbare Problem:
|
||||
|
||||
- "Die Schlange bewegt sich nach Start nicht."
|
||||
- "Beim Wandkontakt erscheint kein Game Over."
|
||||
- "Der Punktestand wird nicht aktualisiert."
|
||||
- "Hier ist die Fehlermeldung. Bitte erklaere und behebe sie."
|
||||
|
||||
Nach kurzer Zeit sollten Sie ein lauffaehiges Ergebnis sehen.
|
||||
|
||||
|
||||
|
||||
### 4.5 Aenderungen pruefen und zurueckrollen
|
||||
|
||||
AI IDEs zeigen Aenderungen normalerweise vor oder nach dem Schreiben an. Sie koennen akzeptieren, ablehnen oder einzelne Dateien pruefen.
|
||||
|
||||
|
||||
|
||||
Wenn der Agent eine schlechte Aenderung macht, nutzen Sie **Revert** oder die Versionshistorie der IDE. Das ist eine wichtige Gewohnheit: Lassen Sie AI schnell arbeiten, aber behalten Sie Kontrolle ueber die Aenderungen.
|
||||
|
||||
|
||||
|
||||
## 5. Den generierten Code verstehen und verbessern
|
||||
|
||||
Wenn das Spiel laeuft, ist die Arbeit nicht beendet. Jetzt koennen Sie dieselbe AI nutzen, um das Projekt zu verstehen.
|
||||
|
||||
Fragen Sie zum Beispiel:
|
||||
|
||||
> Bitte erklaere mir von oben nach unten, wie dieses Snake-Spiel funktioniert. Verwende moeglichst wenig Fachwoerter.
|
||||
|
||||
Danach koennen Sie gezielt nachhaken:
|
||||
|
||||
> Wie wird der Koerper der Schlange im Code gespeichert? Kannst du eine Alltagsanalogie verwenden?
|
||||
|
||||
> Wo im Code wird gesteuert, dass sich die Schlange in festen Zeitabstaenden bewegt?
|
||||
|
||||
> Welche Schritte passieren, wenn die Schlange Essen erreicht?
|
||||
|
||||
> Wo werden Wandkollision und Selbstkollision erkannt?
|
||||
|
||||
Wenn Sie eine Datei wie `SnakeGame.tsx` sehen und sie nicht verstehen, fragen Sie:
|
||||
|
||||
> Bitte teile `SnakeGame.tsx` in Funktionsbereiche auf und erklaere jeden Bereich in einfachen Worten.
|
||||
|
||||
So lernen Sie nicht alle Konzepte auf einmal, sondern erkennen zuerst die Hauptdaten: Schlange, Essen, Punktzahl und Spielzustand. Danach verstehen Sie, wann diese Daten geaendert werden: Bewegung, Essen, Game Over, Neustart.
|
||||
|
||||
### 5.1 Oberflaeche gezielt verbessern
|
||||
|
||||
Sagen Sie nicht nur: "Mach es schoener." Das ist zu ungenau. Beschreiben Sie konkrete Aenderungen:
|
||||
|
||||
> Bitte verbessere die Spieloberflaeche:
|
||||
>
|
||||
> - Zentriere den Spielbereich.
|
||||
> - Nutze einen hellen Hintergrund.
|
||||
> - Mache Schlange und Essen gut sichtbar.
|
||||
> - Vergroessere die Punktzahl.
|
||||
> - Verwende Blau als Hauptfarbe fuer Buttons.
|
||||
|
||||
Fuer Game Over:
|
||||
|
||||
> Wenn das Spiel vorbei ist, zeige in der Mitte "Game Over" und darunter einen Neustart-Button.
|
||||
|
||||
Wenn das Ergebnis noch nicht passt, gehen Sie in kleinen Schritten weiter:
|
||||
|
||||
> Die Punktzahl soll groesser und auffaelliger sein.
|
||||
|
||||
> Der Spielbereich soll kompakter wirken und mehr Abstand zum Rand haben.
|
||||
|
||||
> Der Neustart-Button soll blau, abgerundet und zentriert sein.
|
||||
|
||||
Wenn eine Aenderung Fehler erzeugt, kopieren Sie die Fehlermeldung ins Chatfenster und schreiben Sie: "Dieser Fehler ist nach der Oberflaechenanpassung aufgetreten. Bitte finde die Ursache im aktuellen Projekt und behebe sie."
|
||||
|
||||
### 5.2 Gute Referenzen nutzen
|
||||
|
||||
Einsteiger wissen oft noch nicht, was eine gute Architektur oder ein gutes UI ist. Dann hilft es, Referenzen zu verwenden. Wenn Sie auf z.ai bereits ein gutes Ergebnis hatten, kopieren Sie dessen README oder Projektbeschreibung in Trae und bitten Sie:
|
||||
|
||||
> Bitte vergleiche mein lokales Projekt mit dieser README-Beschreibung und passe Struktur, Funktionen und Oberflaeche so an, dass sie dem beschriebenen Ergebnis naeher kommen.
|
||||
|
||||
So erhalten Sie nicht nur "irgendein" Spiel, sondern naehern sich einem konsistenteren Ergebnis.
|
||||
|
||||
## 6. IDE-Oberflaeche im Detail
|
||||
|
||||
Nachdem der erste Ablauf funktioniert, lohnt sich ein Blick auf die IDE selbst. Die meisten AI IDEs folgen dem VS-Code-Layout.
|
||||
|
||||
Typische Bereiche:
|
||||
|
||||
- **Title Bar**: Dateiname, Fenstersteuerung und Hauptmenues.
|
||||
- **Activity Bar**: Wechsel zwischen Dateien, Suche, Git, Erweiterungen und Debugging.
|
||||
- **Side Bar**: Dateibaum oder Suchergebnisse.
|
||||
- **Editor Groups**: Hauptbereich zum Lesen und Schreiben von Code.
|
||||
- **Breadcrumbs**: Pfadnavigation innerhalb der Datei.
|
||||
- **Minimap**: Kleine Codeuebersicht fuer schnelle Orientierung.
|
||||
- **Panel**: Terminal, Ausgabe, Probleme und Debug-Informationen.
|
||||
- **Status Bar**: Umgebung, Branch, Sprache und andere Statusinformationen.
|
||||
|
||||
Wenn Sie diese Bereiche erkennen, koennen Sie AI besser anleiten: "Oeffne die Datei im Editor", "Starte den Befehl im Terminal", "Pruefe die Fehlermeldung im Problems-Panel".
|
||||
|
||||
## 7. Wie man als Einsteiger besser mit AI spricht
|
||||
|
||||
AI ist stark, aber sie braucht klare Aufgaben. Der Unterschied zwischen guten und schlechten Ergebnissen liegt oft nicht an der Intelligenz des Modells, sondern daran, wie konkret Sie fragen.
|
||||
|
||||
### 7.1 Von vager Idee zu konkreter Beschreibung
|
||||
|
||||
Schlecht:
|
||||
|
||||
> Hilf mir, eine Website zu bauen.
|
||||
|
||||
Besser:
|
||||
|
||||
> Ich kann noch nicht programmieren. Ich moechte eine einseitige persoenliche Website erstellen, die ich Bewerbern oder Recruitern schicken kann. Die Seite soll oben meinen Namen und einen kurzen Satz haben, in der Mitte drei berufliche Stationen zeigen und unten E-Mail sowie Kontaktmoeglichkeit enthalten. Bitte gib mir eine vollstaendige `index.html`, die ich direkt im Browser oeffnen kann.
|
||||
|
||||
Ergaenzen Sie moeglichst:
|
||||
|
||||
1. Wofuer das Ergebnis genutzt wird.
|
||||
2. Welche Inhalte enthalten sein muessen.
|
||||
3. Welche Einschraenkungen gelten.
|
||||
4. In welcher Form Sie das Ergebnis brauchen.
|
||||
|
||||
### 7.2 Erst lauffaehig, dann komplex
|
||||
|
||||
Einsteiger wollen oft sofort ein komplettes System: Login, Registrierung, Bestellung, Datenbank, Adminbereich. Das fuehrt schnell zu grossen Codebloecken, die man nicht versteht.
|
||||
|
||||
Besser:
|
||||
|
||||
1. Erst ein Minimalbeispiel.
|
||||
2. Dann einen Bereich hinzufuegen.
|
||||
3. Danach Oberflaeche verbessern.
|
||||
4. Erst spaeter Datenhaltung, Login oder Deployment.
|
||||
|
||||
Beispiel:
|
||||
|
||||
> Bitte gib mir zuerst nur ein minimales Beispiel, das im Browser eine Zeile "Das ist meine Startseite" zeigt. Erklaere mir Dateiname, Speichern und Oeffnen Schritt fuer Schritt.
|
||||
|
||||
Danach:
|
||||
|
||||
> Fuege nun einen Bereich "Berufserfahrung" hinzu und sende mir wieder den vollstaendigen Code.
|
||||
|
||||
### 7.3 Screenshots und Fehlermeldungen nutzen
|
||||
|
||||
Wenn Sie ein Problem nicht beschreiben koennen, geben Sie AI das, was Sie sehen:
|
||||
|
||||
- Kopieren Sie rote Fehlermeldungen.
|
||||
- Machen Sie Screenshots von falschem Layout.
|
||||
- Beschreiben Sie knapp, was erwartet war.
|
||||
|
||||
Beispiel:
|
||||
|
||||
> Hier ist die vollstaendige Fehlermeldung. Ich verstehe das Englisch nicht. Bitte erklaere mir zuerst in einfachen Worten, was ungefaehr passiert ist, und sage mir danach, was ich am einfachsten aendern soll.
|
||||
|
||||
Wenn das Modell Bilder unterstuetzt:
|
||||
|
||||
> Das ist der aktuelle Screenshot und hier ist mein Code. Ich wollte drei Spalten, aber es erscheint nur eine Spalte. Bitte finde die Ursache und gib mir die korrigierte vollstaendige Datei.
|
||||
|
||||
::: tip Bildfaehigkeit pruefen
|
||||
Nicht jedes Modell kann Screenshots verstehen. Reine LLMs verarbeiten nur Text. Multimodale Modelle koennen Bilder lesen. Wenn Ihr Modell keine Bilder unterstuetzt, kopieren Sie Fehlermeldungen und beschreiben Sie das Layout in Worten.
|
||||
:::
|
||||
|
||||
### 7.4 Wenn AI-Code nicht funktioniert
|
||||
|
||||
Fehler sind normal. Nutzen Sie eine feste Routine:
|
||||
|
||||
1. **Nicht sofort neu anfangen.** Erst Fehlermeldung kopieren.
|
||||
2. **Problem isolieren.** Was wurde zuletzt geaendert?
|
||||
3. **AI im Projektkontext fragen.** Nicht nur die Fehlermeldung, sondern auch Ziel und letzte Aenderung nennen.
|
||||
4. **Kleine Reparatur verlangen.** Keine komplette Neuentwicklung, wenn nur ein Detail kaputt ist.
|
||||
5. **Nach jeder Reparatur testen.**
|
||||
|
||||
Guter Prompt:
|
||||
|
||||
> Nach deiner letzten Aenderung startet das Projekt nicht mehr. Hier ist die Fehlermeldung. Bitte erklaere zuerst die Ursache, aendere dann nur die noetigen Stellen und starte danach erneut den Test.
|
||||
|
||||
### 7.5 AI nicht blind vertrauen
|
||||
|
||||
AI kann Dateien aendern, aber Sie bleiben verantwortlich. Gewoehnen Sie sich an drei Kontrollen:
|
||||
|
||||
- **Diff ansehen**: Welche Dateien wurden geaendert?
|
||||
- **Starten oder testen**: Laeuft das Projekt wirklich?
|
||||
- **Rueckgängig machen koennen**: Wenn etwas schlechter wird, Revert nutzen.
|
||||
|
||||
Das Ziel ist nicht, jeden Code sofort zu verstehen, sondern genug Kontrolle zu behalten, um sinnvoll mit dem Agenten zu arbeiten.
|
||||
|
||||
## 8. Hauefige Begriffe
|
||||
|
||||
| Begriff | Bedeutung |
|
||||
| --- | --- |
|
||||
| IDE | Entwicklungsumgebung zum Schreiben, Starten und Debuggen von Code. |
|
||||
| AI IDE | IDE mit integriertem Sprachmodell und oft Agentenfaehigkeiten. |
|
||||
| Agent | AI-System, das mehrschrittige Aufgaben planen und Werkzeuge bedienen kann. |
|
||||
| Terminal | Befehlsfenster innerhalb oder ausserhalb der IDE. |
|
||||
| Dependency | Externe Bibliothek, die ein Projekt benoetigt. |
|
||||
| Dev Server | Lokaler Server, der eine Web-App waehrend der Entwicklung bereitstellt. |
|
||||
| Revert | Aenderungen auf einen frueheren Zustand zuruecksetzen. |
|
||||
| Prompt | Die Anweisung, die Sie der AI geben. |
|
||||
| Diff | Vergleich zwischen altem und neuem Code. |
|
||||
| Build | Produktions- oder Pruefprozess, der zeigt, ob ein Projekt korrekt gebaut werden kann. |
|
||||
|
||||
## 9. Zusammenfassung
|
||||
|
||||
In diesem Kapitel haben Sie gelernt:
|
||||
|
||||
1. Eine IDE ist mehr als ein Texteditor: Sie organisiert, startet und debuggt Projekte.
|
||||
2. Eine AI IDE erweitert die IDE um Sprachmodell, Kontextverstaendnis und Agentenaktionen.
|
||||
3. Trae kann ein lokales Projekt erstellen, Abhaengigkeiten installieren und ein React-Spiel starten.
|
||||
4. AI funktioniert am besten, wenn Sie Ziele, Grenzen und erwartete Ausgabe konkret beschreiben.
|
||||
5. Einsteiger sollten zuerst lauffaehige Minimalversionen erstellen und danach schrittweise verbessern.
|
||||
|
||||
Der naechste sinnvolle Schritt ist, mit einem sehr kleinen eigenen Projekt zu ueben: ein Timer, eine To-do-Liste, ein Mini-Spiel oder eine persoenliche Seite. Wichtig ist nicht, sofort perfekt zu programmieren, sondern den Kreislauf zu beherrschen: beschreiben, erzeugen lassen, ausfuehren, pruefen, nachfragen und verbessern.
|
||||
|
||||
<RelatedArticles :articles="relatedArticles" />
|
||||
@@ -0,0 +1,275 @@
|
||||
---
|
||||
title: 'Von der Idee zum AI-Produkt - Easy-Vibe Lernpfad'
|
||||
description: 'Vollständiger Lernpfad für AI-Programmierung: Von null bis Full-Stack-Entwicklung. Beherrschen Sie Vibe Coding, Claude Code, Cursor und andere AI IDE-Tools. Lernen Sie Produktdenken, Full-Stack-Entwicklung und AI-Fähigkeitsintegration.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['de-de/stage-1/learning-map'] ?? []
|
||||
</script>
|
||||
|
||||
# Von der Idee zum AI-Produkt
|
||||
|
||||
::: info Besonderer Dank
|
||||
Besonderer Dank an die Studierenden der **Tsinghua Universität Shenzhen International Graduate School** für das Testen, Feedback und die Unterstützung dieses Kurses! Eure Meinungen und Beiträge haben diesen Kurs besser gemacht. [Zur vollständigen Beiträgerliste](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
|
||||
:::
|
||||
|
||||
Früher war die Hürde für Softwareentwicklung sehr hoch: Man musste Programmierung und Algorithmen verstehen und über Jahre von Projekterfahrung verfügen.
|
||||
Heute ist das anders. Solange Sie eine Idee haben, kann AI Ihnen beim Schreiben von Code helfen.
|
||||
|
||||
Das ist eine gewaltige Veränderung: **Programmiersprachen werden zu natürlichen Sprachen.**
|
||||
|
||||
Mit dem Aufkommen großer Sprachmodelle (LLMs) ist Entwicklung nicht mehr "das exklusive Vorrecht von Tech-Genies", sondern ein Werkzeug, das jeder nutzen kann. Das einst schwierigste Problem war "wie man Code schreibt"; jetzt ist das schwierigste Problem: "**Was willst du erstellen?**".
|
||||
|
||||
> **Was ist Vibe Coding?**
|
||||
> Kurz gesagt: "Programmieren durch Sprechen". Vibe Coding bedeutet, dass Sie sich darauf verlassen können, ausschließlich mit AI zu kommunizieren, anstatt Code direkt zu schreiben, um Programmierprojekte abzuschließen.
|
||||
|
||||
Natürlich ist es nur der erste Schritt, AI Code schreiben zu lassen. Um ein wirklich nutzbares Produkt zu erstellen, werden Sie auf folgende Probleme stoßen:
|
||||
- Wie lässt man AI sauberen, wartbaren Code schreiben?
|
||||
- Wie fügt man zerstreuten Code zu einer lauffähigen Anwendung zusammen?
|
||||
- Wie bringt man die Anwendung wirklich online, damit sie von Menschen genutzt wird?
|
||||
- Wie integriert man AI-Fähigkeiten wie Textgenerierung und Bilderkennung in Ihr Produkt?
|
||||
|
||||
In diesem Kurs finden Sie Antworten auf diese Fragen.
|
||||
|
||||
Egal ob Sie Studierende, Lehrkraft, Arzt, Arbeiter oder eine beliebige Person ohne technisches Vorwissen sind – ohne vorher jahrelang Programmieren gelernt zu haben, können Sie in zwei Wochen einen lauffähigen, demo-fähigen Produktprototyp erstellen.
|
||||
|
||||
| Ihre Identität | Was dieser Kurs Ihnen bietet |
|
||||
|---|---|
|
||||
| Studierende | Hausaufgaben, Wettbewerbe, Gründung: Projekte selbständig umsetzen, ohne andere zu bitten |
|
||||
| Berufstätige | Wiederkehrende Arbeit automatisieren, Effizienz steigern, sogar ein Nebenprojekt entwickeln |
|
||||
| Produktmanager / Designer | Ideen bleiben nicht auf dem Papier; schnell ein Demo für Chef/Kunden erstellen |
|
||||
| Gründer / Kleinunternehmer | Ideen kostengünstig validieren, ohne Tausende für eine Agentur auszugeben |
|
||||
| Lehrkräfte / Pädagogen | Lehrmittel, Kursmaterialien, automatisierte Aufgaben erstellen, Lehr-Effizienz steigern |
|
||||
| Ärzte / Anwälte / Fachkräfte | Professionelle Abläufe automatisieren, eigene Effizienz-Tools entwickeln |
|
||||
| Jeder | AI nutzen, um konkrete Probleme im Leben/Beruf zu lösen, Unmögliches möglich machen |
|
||||
|
||||
In der AI-Ära sind Umsetzungskraft und Ideen stets wichtiger als Technik.
|
||||
|
||||
## Wachstumspfad: Von "AI nutzen können" zu "AI-Produkte erstellen können"
|
||||
|
||||
<div class="stage-intro">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎮</div>
|
||||
<h3>Neueinsteiger</h3>
|
||||
<p class="stage-role">AI-Programmierung erleben</p>
|
||||
<div class="stage-tags">
|
||||
<span>Snake-Spiel</span>
|
||||
<span>Null-Vorkenntnisse</span>
|
||||
<span>Vibe Coding erleben</span>
|
||||
<span>In Minuten generieren</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-grid">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🛠️</div>
|
||||
<h3>Stage 1</h3>
|
||||
<p class="stage-role">Produktmanager / Operations</p>
|
||||
<div class="stage-tags">
|
||||
<span>AI IDE (Cursor/Claude)</span>
|
||||
<span>Anforderungsanalyse & Prototyp</span>
|
||||
<span>AI-Fähigkeiten integrieren</span>
|
||||
<span>Vollständige Demo-Entwicklung</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Stage 2</h3>
|
||||
<p class="stage-role">Junior-/Mid-Level Entwickler</p>
|
||||
<div class="stage-tags">
|
||||
<span>Figma zu Code</span>
|
||||
<span>Supabase Datenbank</span>
|
||||
<span>Stripe-Zahlung</span>
|
||||
<span>Dify Wissensbasis</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Stage 3</h3>
|
||||
<p class="stage-role">Senior Entwickler / Architekt</p>
|
||||
<div class="stage-tags">
|
||||
<span>Web/Mini-App/Multi-Plattform</span>
|
||||
<span>MCP Advanced Tools</span>
|
||||
<span>RAG & LangGraph</span>
|
||||
<span>Senior Engineer Mindset</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stage-intro {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: var(--vp-c-bg-mute);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stage-role {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stage-tags span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-card:hover .stage-tags span {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
Durch diesen vollständigen Lernpfad werden Sie erwerben:
|
||||
|
||||
- **Vibe Coding Entwicklungsfähigkeiten:** Vibe Coding Denken und AI-Coding-Tools meisterhaft einsetzen, die Entwicklungseffizienz um ein Vielfaches steigern. Keine Syntax mehr auswendig lernen, sondern lernen, AI zur Generierung hochwertigen Codes zu leiten.
|
||||
- **Full-Stack-Entwicklungs-Know-how:** Von UI-Design über Frontend-Implementierung, von Datenbank-Design bis API-Entwicklung, von lokaler Entwicklung bis Cloud-Deployment – den vollständigen Technologie-Stack moderner Web-Anwendungen beherrschen.
|
||||
- **AI-Fähigkeitsintegration:** Lernen, verschiedene multimodale AI-APIs aufzurufen und AI-Fähigkeiten wie Text, Bild und Sprache nahtlos in Ihre Anwendungen zu integrieren. Durch RAG und andere Technologien intelligente Produkte aufbauen.
|
||||
- **Produktdenken und Operations-Fähigkeiten:** Von Nutzerforschung über Anforderungszerlegung, von MVP-Design bis Produkt-Iteration, von Zahlungsintegration bis Nutzermanagement – einen vollständigen Produktentwicklungs- und Operations-Kreislauf bilden.
|
||||
|
||||
# Was können Sie nach Abschluss tun?
|
||||
|
||||
## Stage 1: Ihren ersten Produktprototyp erstellen
|
||||
|
||||
Diese Phase richtet sich an Personen, die überhaupt keine Programmiererfahrung haben oder nur ein bisschen können, sich aber nicht sicher fühlen. Sie müssen nicht erst eine Menge Theorie lernen, sondern steigen direkt ein und lernen beim Tun, AI-Tools zum Schreiben von Code zu nutzen.
|
||||
|
||||
**Nach Abschluss können Sie:**
|
||||
- Mit AI-Programmier-Tools unabhängig eine Web-Anwendung erstellen
|
||||
- Produktideen in klickbare, interaktive Prototypen umsetzen
|
||||
- Dem Prototypen AI-Funktionen hinzufügen (z.B. Text-to-Image, intelligente Konversation)
|
||||
- Wissen, wie man Fehler diagnostiziert und behebt
|
||||
|
||||
Kurz gesagt: Etwas erstellen, das "läuft und anderen vorgeführt werden kann".
|
||||
|
||||
Wir können zunächst AI-Programmierung durch kleine Spiele erleben, dann lernen, AI-Programmier-Tools beim Schreiben von Code und Beheben von Fehlern zu unterstützen. Danach beginnen wir mit einfachen Seiten und erstellen schrittweise interaktive Multi-Page-Anwendungen, ergänzt um AI-Funktionen wie Text-to-Image und intelligente Konversation. Schließlich schließen Sie unabhängig ein vollständiges Projekt ab, sodass Ihre Ideen echte Umsetzungschancen erhalten.
|
||||
|
||||
# Warum projektbasiertes Training?
|
||||
|
||||
> **Herausforderungen der echten Welt**
|
||||
>
|
||||
> Der Grund ist eigentlich ganz einfach: Im aktuellen Zustand werden die meisten von Ihnen, direkt ins Berufsleben eintretend, bei echten Projekten und unter dem "Druck" von Chefs/Kunden kaum vorankommen. In der echten Welt sind häufigere Szenarien:
|
||||
|
||||
> Ihr Betreuer / Ihr Chef: Wir möchten ein xxx machen, das Ziel ist es, den Effekt yyy zu erreichen.
|
||||
>
|
||||
> Dokumentation? Fertige Frameworks? Detaillierte Anforderungsspezifikationen? Oft existieren diese nicht.
|
||||
|
||||
Viele Aufgaben in der echten Arbeitswelt bestehen im Wesentlichen darin, in einer hochgradig unsicheren Umgebung nie gesehene Probleme zu lösen: Anforderungen sind vage, Grenzen verschieben sich, niemand sagt Ihnen die richtige Antwort. Sie müssen selbst recherchieren, experimentieren, Prototypen erstellen und ständig iterieren, um schließlich eine "laufende, nutzbare, online-fähige" Lösung zu präsentieren.
|
||||
|
||||
Dieser Kurs möchte genau das in einer relativ sicheren Umgebung tun: Ihnen eine "simulierte Herausforderung" im Voraus geben.
|
||||
|
||||
- Durch scheinbar anspruchsvolle Projektaufgaben zwingen wir Sie, Problemlösung, Designentwürfe und selbständige Informationssuche zu üben
|
||||
- Durch nicht "idiotensichere" Gerüste und Code lernen Sie, eine mittelgroße Codebasis zu lesen, zu verstehen und anzupassen
|
||||
- Durch den vollständigen Kreislauf von der Idee bis zum Launch erleben Sie den kompletten Prozess von 0 auf 1 eines echten Produkts
|
||||
|
||||
Kurzfristig ist dieses Training anspruchsvoll; langfristig wird es Ihre Wettbewerbsfähigkeit bei der Jobsuche und Karriereentwicklung erheblich steigern: Sie können mehr verantworten, in unsicheren Umgebungen eher Durchbrüche finden und AI eher in echte Produkte umsetzen, statt bei "Demo spielen" stehen zu bleiben.
|
||||
|
||||
# Die Kunst des Fragens: Eine unerlässliche Fähigkeit in der AI-Ära
|
||||
|
||||
In der AI-Ära gehört auch das Fragen zu den "Grundlagen". Bei gleichem Code und gleichem Fehler: **Wie Sie fragen, bestimmt fast, welche Antwort AI geben kann** – ob oberflächlich oder Schritt für Schritt mit umsetzbaren Lösungen.
|
||||
|
||||
**Gute Gewohnheit entwickeln:** "AI fragen" als Teil des täglichen Entwicklungs-Workflows betrachten: Bei jeder Frage, bei der Sie nicht weiterkommen, sofort fragen.
|
||||
|
||||
## Warum ist diese Fähigkeit unerlässlich?
|
||||
|
||||
- **Echte Dokumentation ist selten:** Meistens stehen Sie vor unklaren Anforderungen, unfertigem Code und verstreuten Fehlermeldungen
|
||||
- **AI ist Ihr always-on Mentor + Kollege:** Wer gut fragen kann, macht daraus "hochwertige Pair-Programming"-Sessions
|
||||
- **Das Leistungslimit wird durch Kommunikation bestimmt:** Je mehr Schlüsselinformationen Sie liefern und je besser Sie das Ausgabeformat steuern, desto nutzbarer die Antworten
|
||||
|
||||
**Häufiger Fehler:** Nur "Warum gibt es einen Fehler?" zu fragen, bringt meist nur Spekulationen. Wenn Sie den Kontext vervollständigen, erhalten Sie umsetzbare Lösungen.
|
||||
|
||||
## Wie man AI Informationen "zuführt": Screenshot vs. Copy & Paste
|
||||
|
||||
Beide Methoden funktionieren, aber für unterschiedliche Zwecke:
|
||||
|
||||
| Methode | Geeignetes Szenario | Wichtige Anforderungen |
|
||||
| --- | --- | --- |
|
||||
| **Copy & Paste** | Fehler-Stacktraces, Logs, Code, Konfiguration, API-Antworten | Möglichst vollständig, nicht nur eine Zeile mit Schlüsselwörtern |
|
||||
| **Screenshot** | UI-Layout-Probleme, Interaktionsanomalien, Tool-Interface wo man Buttons nicht findet | Vollbild + wichtige Bereiche markieren, am besten mit einem Satz Textbeschreibung |
|
||||
|
||||
::: danger Wichtige Voraussetzung
|
||||
**Nicht alle AI-Modelle unterstützen Bildeingabe.** Screenshot-Kommunikation erfordert multimodale AI-Fähigkeiten. Aktuell unterstützen Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google) sowie einige nationale große Modelle wie Qwen, Wenxin Yiyan etc. Bildeingabe.
|
||||
|
||||
**Wenn Ihre AI keine Bildeingabe unterstützt**, können Screenshots nicht erkannt werden. Bitte verwenden Sie in diesem Fall Copy & Paste zur Kommunikation.
|
||||
:::
|
||||
|
||||
## Prompt-Techniken, mit denen AI "gut und erklärend" antwortet
|
||||
|
||||
Wenn Sie nicht nur die Antwort, sondern auch "die Antwort verstehen" wollen. Verwenden Sie ähnliche Anweisungen, die die Erklärungsqualität deutlich verbessern:
|
||||
|
||||
> **Lern-Frage-Beispiele**
|
||||
>
|
||||
> - "Bitte erkläre dieses Konzept zunächst in 5 Sätzen, und gib mir dann einige Fragen, um zu prüfen, ob ich es richtig verstanden habe."
|
||||
> - "Bitte erkläre diese Fehlermeldung im Detail; ich verstehe nicht, warum dieser Fehler auftritt."
|
||||
|
||||
# Ich habe lange durchgehalten, aber es klappt nicht. Ich möchte aufgeben
|
||||
|
||||
Vielleicht ist Ihre Methode falsch. Kämpfen Sie nicht allein im Dunkeln. Sprechen Sie mit den Autoren und Tutoren: Teilen Sie ehrlich, was Sie bereits versucht haben, wo genau Sie feststecken und wie Ihr aktueller Gemütszustand ist. Oft reicht eine kleine Richtungsänderung oder das Auffüllen eines fehlenden Schlüsselwissens, um weiterzumachen.
|
||||
|
||||
# Ich finde einige Tutorial-Designs unangemessen
|
||||
|
||||
Feedback ist jederzeit willkommen – kontaktieren Sie die Autoren, reichen Sie ein Issue ein oder geben Sie direkt in der Gruppe/im Unterricht Feedback. Wir hoffen sehr, dieses Tutorial gemeinsam mit Ihnen immer besser zu machen: Was unklar ist, was schlecht erlebbar ist, wo Sie Zeit verschwendet haben – alles kann offen kritisiert werden. Je authentischer und konkreter das Feedback, desto mehr hilft es späteren Lernenden, Fehler zu vermeiden.
|
||||
|
||||
# Referenzen
|
||||
|
||||
- [Nanjing Universität, Informatik-Fakultät, Computer System Grundlagen Kurspraktikum](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Was Sie als Nächstes lernen können"
|
||||
description="Folgen Sie dem Pfad 'von AI nutzen zu Produkterstellung' und gehen Sie weiter."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,82 @@
|
||||
# Project Introduction
|
||||
|
||||
2025 is regarded by many as the first year of AI programming. More and more people are starting to use AI to write code, but what they produce often remains at the toy level — they don't know how to use Vibe Coding to organize their development workflow, which tools to choose, or what critical steps lie between a prototype and a live product.
|
||||
|
||||
We adopt a progressive **three-stage practical learning path**: a beginner onboarding stage where you quickly get started with AI programming through mini-games, Stage 1 where you master the Vibe Coding workflow and complete a web application prototype, Stage 2 where you learn full-stack development and deployment, and Stage 3 where you build cross-platform complex applications.
|
||||
|
||||
Each stage comes with a complete hands-on project, guiding you from toy to product through real-world challenges, ultimately equipping you with the ability to **turn any idea into a working application**.
|
||||
|
||||
We believe that by mastering Vibe Coding combined with systematic training, you alone can become a **versatile developer who combines front-end and back-end development, AI capability integration, and product design**.
|
||||
|
||||
This project is primarily designed for three types of learners:
|
||||
|
||||
- **Beginners (non-technical people / product and operations roles)**: Help non-technical stakeholders and entry-level learners understand key concepts and complete their first AI-powered tool or product prototype.
|
||||
- **Junior to mid-level developers (students and developers with some foundation)**: Systematically master Vibe Coding and native AI application development.
|
||||
- **Senior developers (companies and startups, open-source and independent developers)**: Support teams and individuals in rapidly building, validating, and iterating on native AI applications.
|
||||
|
||||
## 📖 Content Navigation
|
||||
|
||||
### General Appendix
|
||||
|
||||
[AI Capability Dictionary: Common AI core concepts, terminology, and scenario explanations](/en/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### Stage 0: Kindergarten
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :----- |
|
||||
| [Beginner Onboarding: Learning Map](/en/stage-1/learning-map/) | Overview of the complete learning path | ✅ |
|
||||
| [Beginner Onboarding: In the AI Era, If You Can Talk, You Can Code](/en/stage-1/ai-capabilities-through-games/) | Get an initial feel for AI programming capabilities through cases like Snake | ✅ |
|
||||
|
||||
### Stage 1: AI Product Manager
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :----- |
|
||||
| [1.2: Getting to Know AI IDE Tools](/en/stage-1/introduction-to-ai-ide/) | Learn to use an IDE, master the interface structure and efficient prompting | ✅ |
|
||||
| [1.3: Build a Prototype Hands-On](/en/stage-1/building-prototype/) | A complete loop from product analysis and breakdown to multi-page product prototype implementation | ✅ |
|
||||
| [1.4: Adding AI Capabilities to Your Prototype](/en/stage-1/integrating-ai-capabilities/) | Understand and complete API integration for common AI capabilities (text, image, video) | ✅ |
|
||||
| [1.5: Complete Project Practice](/en/stage-1/complete-project-practice/) | Simulate real-world scenarios, iterate based on user feedback, and complete a project showcase (includes a final assignment) | ✅ |
|
||||
|
||||
#### Appendix
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :----------------------------------------------------------------------- | :------------------------------------------------------------------------------------ | :----- |
|
||||
| [Appendix A: Product Thinking Supplement](/en/stage-1/appendix-a-product-thinking/) | A product thinking framework from idea evaluation to requirement breakdown and MVP | ✅ |
|
||||
| [Appendix B: Common Errors and Solutions](/en/stage-1/appendix-b-common-errors/) | Common errors and troubleshooting methods in Vibe Coding | ✅ |
|
||||
| [Appendix: Where to Find Ideas](/en/stage-1/appendix-idea-sources/) | Discover niche directions from reference apps, trends, and VC lists | ✅ |
|
||||
| [Appendix: Double Diamond Model](/en/stage-1/appendix-double-diamond/) | Understand the complete rhythm of defining the problem first, then expanding into solution design | ✅ |
|
||||
| [Appendix: Jobs to Be Done](/en/stage-1/appendix-jobs-to-be-done/) | Use the JTBD method to understand what users truly want to accomplish | ✅ |
|
||||
| [Appendix: The Mom Test Interview Method](/en/stage-1/appendix-mom-test/) | A research method for validating needs through user interviews | ✅ |
|
||||
|
||||
### Stage 2: Junior to Mid-level Developer
|
||||
|
||||
#### Front-end Section
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | :----- |
|
||||
| Using Lovart to produce assets | Learn to use Lovart to batch-generate character, scene, and other visual assets, providing a foundation for UI design and front-end development | 🚧 |
|
||||
| Getting started with Figma and MasterGo | Use design tools to organize information architecture and page structure, laying the groundwork for front-end implementation | 🚧 |
|
||||
| Building your first modern application — UI design | Complete a component-based interface from design mockups, implementing the first link from design to code | 🚧 |
|
||||
| Designing pages and buttons following UI design specifications | Learn to use mainstream design specifications to organize page structure and button hierarchy, and leverage AI to generate design proposals | 🚧 |
|
||||
| [Let's Build Hogwarts Portraits Together](/en/stage-2/frontend/hogwarts-portraits/) | Build a front-end application with AI capabilities from scratch, connecting design and development | 🚧 |
|
||||
|
||||
#### Back-end Development Section
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | :----- |
|
||||
| What is an API | Understand HTTP interfaces and the request-response model, preparing for back-end integration and debugging | 🚧 |
|
||||
| [From Database to Supabase](/en/stage-2/backend/database-supabase/) | Set up databases and APIs on Supabase, connecting data models to front-end pages | 🚧 |
|
||||
| Using large language models to assist in writing interface code and documentation | Use LLMs to help generate interface and database documentation and code, creating readable and testable back-end services | 🚧 |
|
||||
| Git workflows and Zeabur deployment | Manage code with Git workflows and deploy applications to Zeabur for going live | 🚧 |
|
||||
| Modern CLI development tools | Use CLI-based AI programming tools to accelerate development and debugging, forming a personal engineering workflow | 🚧 |
|
||||
| How to integrate payment systems like Stripe | Integrate payment systems, completing the payment flow and basic settlement process | 🚧 |
|
||||
| Building your first modern application — full-stack application | Combine front-end, back-end, and payment modules to deliver a deployable full-stack web application | 🚧 |
|
||||
| Modern front-end component library + Trae in practice | Use a modern front-end component library with Trae to independently build a product with login/registration and payment support | 🚧 |
|
||||
|
||||
#### AI Capabilities Appendix
|
||||
|
||||
| Chapter | Key Content | Status |
|
||||
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | :----- |
|
||||
| [Getting Started with Dify and Knowledge Base Integration](/en/stage-2/ai-capabilities/dify-knowledge-base/) | Build tool-type products using Dify Workflow and basic RAG, creating a template for future application upgrades | 🚧 |
|
||||
| Learning to query the AI dictionary and integrate multi-modal APIs | Learn to find suitable models and APIs, and integrate text, image, and other multi-modal capabilities into your product | 🚧 |
|
||||
|
||||
### Stage 3: Senior Developer
|
||||
@@ -1,3 +1,8 @@
|
||||
---
|
||||
title: 'Beginner 1: In The AI Era, Talking Is Programming'
|
||||
description: 'Build an AI-native snake game through conversation, then generalize the workflow to create your own mini game or demo.'
|
||||
---
|
||||
|
||||
# Primary 1: AI Era, If You Can Speak, You Can Code
|
||||
|
||||
This is a **project-based learning** tutorial. We encourage you to follow the steps one by one and try to reproduce the results.
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
---
|
||||
title: 'Comparison Of 7 AI Coding Tools'
|
||||
description: 'A hands-on benchmark of popular Web Vibe Coding platforms using one unified task, covering beginner-friendliness, code control, and deployment.'
|
||||
---
|
||||
|
||||
# Seven AI Programming Tools Comparison
|
||||
|
||||
## Chapter Introduction
|
||||
|
||||
+5
@@ -1,3 +1,8 @@
|
||||
---
|
||||
title: 'Build A Website With Design + Coding Agents'
|
||||
description: 'From idea to launch: coordinate a design agent to produce visuals, then use a coding agent to turn it into a working website with a reusable workflow.'
|
||||
---
|
||||
|
||||
# Designing Websites with Design and Programming Agents
|
||||
|
||||
## Chapter Introduction
|
||||
|
||||
@@ -452,7 +452,7 @@ curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
|
||||
-H "Authorization: Bearer xxxxxxx" \
|
||||
-d '{
|
||||
"model": "doubao-seedream-4-5-251128",
|
||||
"prompt": "将图1的服装换为图2的服装",
|
||||
"prompt": "Replace the outfit in image 1 with the outfit in image 2",
|
||||
"image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
|
||||
"sequential_image_generation": "disabled",
|
||||
"response_format": "url",
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
title: 'Beginner 2: Learn AI Coding Tools'
|
||||
description: 'Move from web-based AI coding to local development: understand IDE vs AI IDE, build a snake game with Trae, and learn practical AI collaboration tips.'
|
||||
---
|
||||
|
||||
# Beginner Level 2: Learn AI Programming Tools
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -81,7 +81,7 @@ We need Android Studio to provide the Android SDK and emulator required for runn
|
||||
|
||||
**Special reminder for beginners:**
|
||||
|
||||
Although modern versions of Android Studio have greatly simplified configuration, it still depends on the **JDK (Java Development Kit)** under the hood. If this is your first time doing development, or if you encounter errors related to environment variables or SDK configuration during installation, do not panic. You can refer to this detailed setup guide: [Android Studio2024版本安装环境SDK、Gradle配置](https://blog.csdn.net/keiraee/article/details/142321644?ops_request_misc=elastic_search_misc&request_id=a2b858d1f665095c53afa9114ad8864d&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-142321644-null-null.142^v102^pc_search_result_base4&utm_term=android%20studio%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE&spm=1018.2226.3001.4187)
|
||||
Although modern versions of Android Studio have greatly simplified configuration, it still depends on the **JDK (Java Development Kit)** under the hood. If this is your first time doing development, or if you encounter errors related to environment variables or SDK configuration during installation, do not panic. You can refer to this detailed setup guide: [Android Studio 2024 setup: SDK and Gradle configuration](https://blog.csdn.net/keiraee/article/details/142321644?ops_request_misc=elastic_search_misc&request_id=a2b858d1f665095c53afa9114ad8864d&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-142321644-null-null.142^v102^pc_search_result_base4&utm_term=android%20studio%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE&spm=1018.2226.3001.4187)
|
||||
|
||||
|
||||
|
||||
@@ -654,7 +654,7 @@ Under the `Production` menu, click `Create new release`, upload your `.aab` file
|
||||
|
||||
|
||||
|
||||
_If you have already completed developer account registration, this video tutorial can guide you through the rest of the process:_ [Android应用上传GooglePlay谷歌市场全流程教程](https://www.bilibili.com/video/BV16REQzGEnk/?share_source=weixin&vd_source=b42f227a4f2d413fbde18499d83227cf)
|
||||
_If you have already completed developer account registration, this video tutorial can guide you through the rest of the process:_ [Full workflow: uploading an Android app to Google Play](https://www.bilibili.com/video/BV16REQzGEnk/?share_source=weixin&vd_source=b42f227a4f2d413fbde18499d83227cf)
|
||||
|
||||
# 7 Final Notes
|
||||
|
||||
@@ -674,6 +674,6 @@ I am really looking forward to your next creation. Keep going!
|
||||
|
||||
# References
|
||||
|
||||
CSDN: [（2024.03.04）如何打包Android Studio项目？](https://blog.csdn.net/GenuineMonster/article/details/136443130?ops_request_misc=&request_id=&biz_id=102&utm_term=android%20studio%20%E6%89%93%E5%8C%85%20APK%20%E5%B9%B6%E5%88%86%E4%BA%AB&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-136443130.142^v102^pc_search_result_base4&spm=1018.2226.3001.4187)
|
||||
CSDN: [How to package/build an Android Studio project (2024-03-04)](https://blog.csdn.net/GenuineMonster/article/details/136443130?ops_request_misc=&request_id=&biz_id=102&utm_term=android%20studio%20%E6%89%93%E5%8C%85%20APK%20%E5%B9%B6%E5%88%86%E4%BA%AB&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-136443130.142^v102^pc_search_result_base4&spm=1018.2226.3001.4187)
|
||||
|
||||
CSDN: [Android Studio安装及配置](https://blog.csdn.net/Changersh/article/details/149838228?ops_request_misc=&request_id=&biz_id=102&utm_term=android%20studio%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-149838228.142^v102^pc_search_result_base4&spm=1018.2226.3001.4187)
|
||||
CSDN: [Android Studio installation and configuration](https://blog.csdn.net/Changersh/article/details/149838228?ops_request_misc=&request_id=&biz_id=102&utm_term=android%20studio%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-149838228.142^v102^pc_search_result_base4&spm=1018.2226.3001.4187)
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
# Introducción al Proyecto
|
||||
|
||||
2025 es considerado por muchos como el año inaugural de la programación con IA. Cada vez más personas comienzan a usar IA para escribir código, pero a menudo los resultados se quedan en el nivel de juguetes: no saben cómo organizar el flujo de desarrollo con Vibe Coding, no saben qué herramientas elegir, y mucho menos cuáles son los pasos clave entre el prototipo y el despliegue en producción.
|
||||
|
||||
Adoptamos una **ruta práctica de tres etapas, progresiva**: la etapa de iniciación permite a los novatos familiarizarse rápidamente con la programación con IA a través de juegos pequeños; la primera etapa domina el flujo de trabajo de Vibe Coding y completa un prototipo de aplicación web; la segunda etapa aprende desarrollo fullstack y despliegue en producción; la tercera etapa construye aplicaciones complejas multiplataforma.
|
||||
|
||||
Cada etapa está acompañada de proyectos prácticos completos, que te permiten avanzar de juguete a producto en desafíos reales, y finalmente adquirir la capacidad de **convertir cualquier idea en una aplicación funcional**.
|
||||
|
||||
Creemos que, dominando Vibe Coding junto con un entrenamiento sistemático, una sola persona puede convertirse en un **desarrollador integral que combina desarrollo frontend y backend, integración de capacidades de IA y diseño de productos**.
|
||||
|
||||
Este proyecto está dirigido principalmente a tres tipos de aprendices:
|
||||
|
||||
- **Novatos (personas sin formación técnica / perfiles de producto y operaciones)**: ayuda a quienes no tienen antecedentes técnicos y a los aprendices principiantes a comprender los conceptos clave y completar su primera herramienta de IA o prototipo de producto.
|
||||
- **Desarrolladores junior e intermedios (estudiantes y desarrolladores con cierta base)**: dominar sistemáticamente vibe coding y el desarrollo de aplicaciones nativas de IA.
|
||||
- **Desarrolladores senior (empresas y startups, desarrolladores de código abierto e independientes)**: apoyar a equipos e individuos para construir, validar e iterar rápidamente aplicaciones nativas de IA.
|
||||
|
||||
## 📖 Navegación de Contenido
|
||||
|
||||
### Apéndice General
|
||||
|
||||
[Diccionario de capacidades de IA: conceptos centrales, términos y escenarios comunes de IA](/es-es/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### Etapa Cero: Jardín de Infancia
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
|
||||
| [Introducción: Mapa de aprendizaje](/es-es/stage-1/learning-map/) | Visión general de la ruta de aprendizaje completa | ✅ |
|
||||
| [Introducción: En la era de la IA, saber hablar es saber programar](/es-es/stage-1/ai-capabilities-through-games/) | Experimentar inicialmente las capacidades de la programación con IA a través de casos como el juego Snake | ✅ |
|
||||
|
||||
### Etapa Uno: Product Manager de IA
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
|
||||
| [Nivel 2: Conociendo las herramientas AI IDE](/es-es/stage-1/introduction-to-ai-ide/) | Aprender a usar IDE, dominar la estructura de la interfaz y las formas eficientes de usar prompts | ✅ |
|
||||
| [Nivel 3: Construyendo un prototipo](/es-es/stage-1/building-prototype/) | Ciclo completo desde el análisis de producto hasta la implementación de un prototipo multipágina | ✅ |
|
||||
| [Nivel 4: Añadiendo capacidades de IA al prototipo](/es-es/stage-1/integrating-ai-capabilities/) | Comprender y completar la integración de API de capacidades de IA comunes (texto, imagen, video) | ✅ |
|
||||
| [Nivel 5: Práctica de proyecto completo](/es-es/stage-1/complete-project-practice/) | Simular escenarios reales, recibir retroalimentación de usuarios, iterar y completar la presentación del proyecto (incluye proyecto final) | ✅ |
|
||||
|
||||
#### Apéndices
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
|
||||
| [Apéndice A: Pensamiento de producto](/es-es/stage-1/appendix-a-product-thinking/) | Marco de pensamiento de producto desde la evaluación de ideas hasta la descomposición de requisitos y MVP | ✅ |
|
||||
| [Apéndice B: Errores comunes y soluciones](/es-es/stage-1/appendix-b-common-errors/) | Errores comunes en vibe coding y métodos de solución | ✅ |
|
||||
| [Apéndice: De dónde sacar ideas](/es-es/stage-1/appendix-idea-sources/) | Encontrar direcciones específicas a partir de aplicaciones de referencia, tendencias y listas de VC | ✅ |
|
||||
| [Apéndice: Modelo Double Diamond](/es-es/stage-1/appendix-double-diamond/) | Comprender el ritmo completo de definir primero el problema y luego desarrollar la solución | ✅ |
|
||||
| [Apéndice: Jobs to Be Done](/es-es/stage-1/appendix-jobs-to-be-done/) | Usar el método JTBD para comprender lo que el usuario realmente quiere lograr | ✅ |
|
||||
| [Apéndice: Método de entrevistas The Mom Test](/es-es/stage-1/appendix-mom-test/) | Método de investigación para validar necesidades a través de entrevistas con usuarios | ✅ |
|
||||
|
||||
### Etapa Dos: Desarrollador Junior e Intermedio
|
||||
|
||||
#### Parte Frontend
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
|
||||
| Uso de Lovart para producir materiales | Aprender a usar Lovart para generar por lotes materiales visuales como personajes y escenarios, proporcionando una base de materiales para el diseño UI y el desarrollo frontend | 🚧 |
|
||||
| Introducción a Figma y MasterGo | Usar herramientas de diseño para organizar la arquitectura de información y la estructura de páginas, sentando las bases para la implementación frontend | 🚧 |
|
||||
| Construir la primera aplicación moderna - Diseño UI | Completar una interfaz basada en componentes a partir del diseño, realizando el primer enlace de diseño a código | 🚧 |
|
||||
| Diseñar páginas y botones con referencia a especificaciones de diseño UI | Aprender a organizar la estructura de páginas y la jerarquía de botones con especificaciones de diseño convencionales, y usar IA para generar esquemas de diseño | 🚧 |
|
||||
| [Construyendo retratos de Hogwarts juntos](/es-es/stage-2/frontend/hogwarts-portraits/) | De 0 a 1, crear una aplicación frontend integrando capacidades de IA, uniendo diseño y desarrollo | 🚧 |
|
||||
|
||||
#### Parte de Desarrollo Backend
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| Qué es una API | Comprender las interfaces HTTP y el modelo petición-respuesta, preparándose para la integración backend y la depuración conjunta | 🚧 |
|
||||
| [De la base de datos a Supabase](/es-es/stage-2/backend/database-supabase/) | Implementar bases de datos y APIs en Supabase, conectando modelos de datos con páginas frontend | 🚧 |
|
||||
| Modelos grandes asistiendo en la redacción de código de interfaz y documentación de interfaz | Usar modelos grandes para ayudar a generar interfaces, documentación de base de datos y código, logrando un backend legible y testeable | 🚧 |
|
||||
| Flujo de trabajo Git y despliegue en Zeabur | Gestionar código en un flujo de trabajo Git, y desplegar la aplicación en Zeabur para ponerla en línea | 🚧 |
|
||||
| Herramientas modernas de desarrollo CLI | Usar herramientas de programación AI tipo CLI para acelerar el desarrollo y la depuración, formando un flujo de trabajo de ingeniería personal | 🚧 |
|
||||
| Cómo integrar sistemas de pago como Stripe | Integrar sistemas de pago, completando el enlace de cobro y el flujo básico de liquidación | 🚧 |
|
||||
| Construir la primera aplicación moderna - Aplicación fullstack | Integrar frontend, backend y módulo de pago para completar una aplicación web fullstack que pueda ponerse en línea | 🚧 |
|
||||
| Biblioteca de componentes frontend moderna + Práctica con Trae | Usar una biblioteca de componentes frontend moderna y Trae para completar independientemente un producto con login, registro y soporte de pago | 🚧 |
|
||||
|
||||
#### Apéndice de Capacidades de IA
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [Introducción a Dify e integración de base de conocimientos](/es-es/stage-2/ai-capabilities/dify-knowledge-base/) | Usar Dify Workflow y RAG básico para construir un producto tipo herramienta, preparando el terreno para futuras actualizaciones de aplicaciones | 🚧 |
|
||||
| Aprender a consultar el diccionario de IA e integrar APIs multimodales | Aprender a encontrar modelos y APIs adecuados, e integrar capacidades multimodales como texto e imagen en el producto | 🚧 |
|
||||
|
||||
### Etapa Tres: Desarrollador Senior
|
||||
@@ -0,0 +1,219 @@
|
||||
# Nivel Basico 1: En la era de la IA, saber hablar es saber programar
|
||||
|
||||
Este es un tutorial de aprendizaje **basado en proyectos**. Te recomendamos seguir los pasos uno por uno y tratar de reproducir los resultados.
|
||||
No tengas miedo de equivocarte o de cambiar cosas. Recuerda:
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
|
||||
<span style="font-size: 15px; font-weight: 500; color: #666;">Terminar es mas importante que ser perfecto</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'aprox. <strong>4 horas</strong> (puede hacerse en varias sesiones)'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['es-es/stage-1/ai-capabilities-through-games'] ?? []
|
||||
</script>
|
||||
|
||||
## Introduccion del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Programacion conversacional', 'Mini-juegos nativos de IA', 'Practica con Snake']" coreOutput="Snake nativo de IA + un mini-juego propio" expectedOutput="1 Snake nativo de IA ejecutable + (opcional) 1 mini-juego o demo propio">
|
||||
|
||||
Si <strong>no sabes programar</strong> o solo conoces lo minimo, este capitulo es para ti. Empezamos desde cero: vas a usar <strong>conversacion</strong> para que la IA te ayude a escribir codigo. Sin memorizar sintaxis ni configurar entornos, en muchos casos puedes ejecutarlo directamente en una pagina web.
|
||||
|
||||
Construiras tu <strong>primer programa que corre</strong>: una version de Snake que puede "comerse palabras", "escribir poemas" o "dibujar". Veras como se siente programar con IA: no es que la IA piense por ti; tu expresas tu intencion y la IA la implementa.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Nivel 1: Hablar = Programar', description: 'Aprende programacion con IA a traves de juegos. De Snake a tus propios mini-juegos nativos de IA.' },
|
||||
{ title: 'Exploracion rapida', description: 'Experiencia de 60 segundos' },
|
||||
{ title: 'Practica nativa', description: 'Construir Snake nativo de IA' },
|
||||
{ title: 'Extender y crear', description: 'Crear un juego propio' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. La dificultad de la gente comun y la oportunidad
|
||||
|
||||
Mucha gente tiene ideas: una herramienta para gastos, una pagina para registrar el crecimiento de un hijo, o incluso un mini-juego. Pero al pensar en "escribir codigo" o "buscar programadores", se desanima.
|
||||
|
||||
Con la IA aparece una posibilidad real: no necesitas saber programar para empezar; necesitas aprender a decirle a la IA con claridad que quieres. Incluso para desarrolladores profesionales, la IA ya es parte del flujo de trabajo, lo que significa que para quienes no programan, hablar bien con un agente se vuelve una habilidad muy valiosa.
|
||||
|
||||
Esta parte del curso busca que desarrolles una nueva capacidad: <strong>crear aplicaciones describiendo requisitos en lenguaje natural</strong>. Aprenderas a comunicarte con la IA "como una computadora": objetivos claros, pasos, entradas y salidas, y como depurar cuando algo no sale bien.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Dificultad y oportunidad', description: 'Una nueva forma de crear con IA' },
|
||||
{ title: 'Exploracion rapida', description: 'Experiencia de 60 segundos' },
|
||||
{ title: 'Practica nativa', description: 'Construir Snake nativo de IA' },
|
||||
{ title: 'Extender y crear', description: 'Crear un juego propio' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Hasta donde puede llegar la IA hoy
|
||||
|
||||
Pregunta concreta: si no sabes escribir codigo, hasta donde puedes llegar con una IA conversacional?
|
||||
|
||||
De forma realista, hoy la IA suele funcionar muy bien para:
|
||||
|
||||
- herramientas internas simples,
|
||||
- tableros de visualizacion,
|
||||
- mini-juegos ligeros,
|
||||
- prototipos para validar ideas desde perspectiva de producto.
|
||||
|
||||
Para productos grandes y listos para produccion, aun hace falta trabajo humano en diseno de flujo, detalles, seguridad, rendimiento y mantenibilidad. Pero para prototipos y herramientas personales, el nivel es sorprendentemente util.
|
||||
|
||||
### 2.1 Construye Snake en 60 segundos (con z.ai)
|
||||
|
||||
Abre la pagina de laboratorio del curso: [z.ai](https://chat.z.ai/). En este tutorial usaremos su modo de "desarrollo full-stack" para ver como la IA crea un proyecto y lo previsualiza.
|
||||
|
||||
::: details Que significa "programar desde el navegador"
|
||||
|
||||
Antes, para hacer una app web tenias que instalar entornos (Node.js, Python), configurar editor, aprender HTML/CSS/JS y resolver dependencias.
|
||||
|
||||
Ahora, con plataformas de programacion con IA:
|
||||
|
||||
- abres el navegador,
|
||||
- describes la funcionalidad en lenguaje natural,
|
||||
- la IA genera codigo y muestra vista previa.
|
||||
|
||||
Este estilo se parece a "conversar = programar": el foco pasa de escribir sintaxis a describir requisitos.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
Pega un requerimiento simple como este y ejecutalo:
|
||||
|
||||
```txt
|
||||
Haz un juego de Snake:
|
||||
1. Control con flechas
|
||||
2. Al comer, la serpiente crece y sube la puntuacion
|
||||
3. Chocar con la pared o contigo mismo termina el juego
|
||||
4. Boton de iniciar y reiniciar
|
||||
5. Interfaz simple y agradable
|
||||
```
|
||||
|
||||
|
||||
|
||||
Cuando termine, a la derecha veras la pagina lista para probar. Normalmente puedes:
|
||||
|
||||
- hacer scroll,
|
||||
- entrar en pantalla completa,
|
||||
- descargar el proyecto,
|
||||
- ver el codigo.
|
||||
|
||||
|
||||
|
||||
Para ver el codigo, usa el icono de codigo en la esquina superior derecha.
|
||||
|
||||
|
||||
|
||||
::: tip Explora mas herramientas
|
||||
|
||||
Ademas de z.ai, puedes probar herramientas como Google AI Studio, v0.dev, Bolt, Replit Agent y otras. Lo importante no es la marca, sino practicar el mismo ciclo:
|
||||
|
||||
1. describir requisito,
|
||||
2. probar en el navegador,
|
||||
3. corregir con una instruccion concreta,
|
||||
4. iterar.
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 Que puede y que no puede hacer la programacion conversacional
|
||||
|
||||
Un resumen practico:
|
||||
|
||||
- La IA es muy buena para construir algo "pequeno y completo" si describes bien UI e interacciones.
|
||||
- Para proyectos grandes, necesitas una vision de proceso: dividir el problema en pasos, definir entradas/salidas, y luego pedir a la IA que implemente modulos por separado.
|
||||
- "Que pueda escribirlo" no significa "que este listo para uso real". Para produccion hay que revisar arquitectura, seguridad, pruebas y calidad.
|
||||
|
||||
::: warning Guia rapida de escenarios
|
||||
|
||||
- **Prototipo / demo / herramienta interna**: excelente para que la IA haga la primera version, luego tu iteras.
|
||||
- **Producto grande para usuarios reales**: requiere inversion sostenida en ingenieria.
|
||||
- **Alta seguridad / alta regulacion (pagos, salud, riesgo)**: no se debe "generar y publicar" sin revision y pruebas estrictas.
|
||||
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Dificultad y oportunidad', description: 'Una nueva forma de crear con IA' },
|
||||
{ title: 'Exploracion rapida', description: 'Experiencia de 60 segundos' },
|
||||
{ title: 'Practica nativa', description: 'Construir Snake nativo de IA' },
|
||||
{ title: 'Extender y crear', description: 'Crear un juego propio' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Practica: hacer un Snake "nativo de IA"
|
||||
|
||||
La idea de "nativo de IA" es que el juego no solo sea un Snake tradicional. Puedes agregar una habilidad IA dentro del gameplay, por ejemplo:
|
||||
|
||||
- al comer una palabra, traducirla y generar ejemplos,
|
||||
- al comer un tema, generar una frase o un mini poema,
|
||||
- al comer un prompt, generar una imagen o un icono.
|
||||
|
||||
Lo importante es practicar el mismo patron: describir claramente y pedir a la IA que implemente, y luego iterar en base al resultado.
|
||||
|
||||
> Consejos al pedir cambios:
|
||||
>
|
||||
> 1. describe el fenomeno observable,
|
||||
> 2. explica el comportamiento esperado,
|
||||
> 3. si hay error, copia el error completo,
|
||||
> 4. pide que modifique el codigo minimo necesario.
|
||||
|
||||
Para seguir el flujo visual de la practica, veras capturas de referencia:
|
||||
|
||||
> 
|
||||
>
|
||||
> 
|
||||
>
|
||||
> 
|
||||
|
||||
|
||||
|
||||
En esta practica tambien puedes aprender un habito clave: cuando algo sale mal, no "adivines". Copia y pega el error a la IA y pide explicacion simple y una correccion concreta.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 4. Extiende: crea un mini-juego propio
|
||||
|
||||
Una vez que Snake funcione, tu objetivo no es "memorizar codigo", sino crear variaciones.
|
||||
|
||||
Algunas ideas:
|
||||
|
||||
- un juego de reaccion (click en el momento correcto),
|
||||
- un quiz corto de vocabulario,
|
||||
- un contador/temporizador con recompensas,
|
||||
- un "generador" que produce tarjetas y puntuacion.
|
||||
|
||||
Lo mas importante: define primero el objetivo y el bucle del juego (entrada -> estado -> salida) y luego pide a la IA que lo implemente.
|
||||
|
||||
|
||||
|
||||
## Tarea
|
||||
|
||||
1. Repite el juego Snake basico con tus propios colores y UI.
|
||||
2. Agrega una habilidad IA dentro del juego (traduccion, resumen, generacion de texto, etc.).
|
||||
3. Crea una variante de mini-juego (aunque sea muy simple) y asegurate de que sea jugable.
|
||||
|
||||
## Siguiente paso
|
||||
|
||||
En los siguientes capitulos conectaremos capacidades IA mas concretas (texto a texto, imagen a texto, texto a imagen) y avanzaremos hacia proyectos mas completos.
|
||||
|
||||
<RelatedArticles :articles="relatedArticles" />
|
||||
---
|
||||
title: 'Principiante 1: En la era de la IA, hablar es programar'
|
||||
description: 'Crea una serpiente AI-native con dialogo y aplica el metodo para construir tu propio mini juego o demo.'
|
||||
---
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
title: 'Pensamiento de producto y diseno de soluciones'
|
||||
description: 'Como pasar de "construir una herramienta" a "disenar un producto valioso": fuentes de ideas, descomposicion en MVP, mejora de UX y uso razonable de IA.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aprox. <strong>6 horas</strong>'
|
||||
</script>
|
||||
|
||||
# Pensamiento de producto y diseno de soluciones
|
||||
|
||||
## Introduccion del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Producto', 'Necesidades', 'Diseno de soluciones', 'Insights de usuario']" coreOutput="1 esquema completo de producto" expectedOutput="Ideas de producto ejecutables">
|
||||
|
||||
En capitulos anteriores ya aprendiste a construir prototipos con AI IDEs. Aqui cambiamos el foco de <strong>"puedo construirlo?"</strong> a <strong>"que vale la pena construir?"</strong>.
|
||||
|
||||
Vamos a trabajar un metodo repetible para:
|
||||
|
||||
1. Encontrar ideas mas confiables (no solo inspiracion).
|
||||
2. Convertir una idea en un flujo de producto construible.
|
||||
3. Pasar de "funciona" a "se usa de verdad".
|
||||
4. Usar IA donde aumenta el valor y no solo "se ve cool".
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Fuentes de ideas', description: 'Encontrar ideas confiables' },
|
||||
{ title: 'Descomposicion', description: 'Convertir idea en app construible' },
|
||||
{ title: 'Mejora', description: 'De usable a buena' },
|
||||
{ title: 'IA como amplificador', description: 'Aplicar IA donde aporta valor' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Lo que aprenderas
|
||||
|
||||
Al final deberias poder responder:
|
||||
|
||||
1. De donde salen ideas confiables?
|
||||
2. Como descomponer una idea en un MVP construible?
|
||||
3. Como evaluar y mejorar una app para que la gente la use?
|
||||
4. Donde usar IA para amplificar valor?
|
||||
5. Como conseguir los primeros usuarios reales?
|
||||
|
||||
---
|
||||
|
||||
# 1. Fuentes de ideas confiables
|
||||
|
||||
No necesitas una "idea genial". Necesitas un problema real en un escenario real.
|
||||
|
||||
## 1.1 Que es una idea (en sentido de producto)?
|
||||
|
||||
Una idea construible tiene al menos:
|
||||
|
||||
1. Un usuario objetivo claro (quien exactamente?).
|
||||
2. Un escenario concreto (cuando/donde ocurre).
|
||||
3. Una tarea concreta (que quiere lograr).
|
||||
4. Una mejora plausible frente a como se hace hoy.
|
||||
|
||||
## 1.2 Idea vs necesidad real
|
||||
|
||||
Una idea es una hipotesis. Una necesidad real es algo que el usuario ya intenta resolver (aunque sea con workarounds).
|
||||
|
||||
Regla rapida:
|
||||
|
||||
- Necesidad real: el usuario ya paga con tiempo/dinero/estres.
|
||||
- Necesidad falsa: el usuario dice "interesante", pero no cambia conducta ni paga.
|
||||
|
||||
|
||||
|
||||
## 1.3 Por que algunas ideas crecen solas
|
||||
|
||||
Cuando el valor es inmediato y el flujo es corto, la recomendacion aparece de forma natural:
|
||||
|
||||
Problema -> valor pequeno inmediato -> repeticion -> recomendacion.
|
||||
|
||||
Si el producto necesita mucha explicacion o empuje externo, suele ser senal de que el dolor no es fuerte.
|
||||
|
||||
## 1.4 Cuatro fuentes estables
|
||||
|
||||
1. Tu trabajo: procesos repetitivos, coordinacion, reportes, QA.
|
||||
2. Comunidades: preguntas repetidas y quejas recurrentes.
|
||||
3. Reviews/comentarios: fricciones y "por que esto es tan dificil?".
|
||||
4. Productos existentes: encontrar huecos (caro, complejo, poco especializado).
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 2. Descomposicion: de idea a app
|
||||
|
||||
Una idea se vuelve construible cuando se convierte en decisiones.
|
||||
|
||||
## 2.1 Minimo: usuario, escenario, flujo
|
||||
|
||||
Define:
|
||||
|
||||
1. Usuario: rol, objetivo, restricciones, presupuesto.
|
||||
2. Escenario: disparador -> pasos -> resultado.
|
||||
3. Flujo principal: 3-7 pasos que entregan valor.
|
||||
|
||||
## 2.2 Cortar alcance (MVP)
|
||||
|
||||
Un MVP no es "menos features", es "una promesa clara que se cumple".
|
||||
|
||||
Preguntas utiles:
|
||||
|
||||
- Cual es el primer minuto donde el usuario dice "esto me ahorro tiempo"?
|
||||
- Que se puede quitar sin romper el valor central?
|
||||
- Cual es la suposicion mas riesgosa? (validala primero)
|
||||
|
||||
---
|
||||
|
||||
# 3. Mejora: de usable a buena
|
||||
|
||||
Despues del MVP, el trabajo es:
|
||||
|
||||
1. Claridad: el usuario entiende el siguiente paso sin leer manual.
|
||||
2. Friccion baja: menos clicks, menos formularios, menos contexto.
|
||||
3. Confianza: datos claros, resultados explicables, defaults seguros.
|
||||
|
||||
Test simple: un usuario nuevo obtiene valor en 60 segundos?
|
||||
|
||||
---
|
||||
|
||||
# 4. IA como amplificador de valor
|
||||
|
||||
La IA aporta mas cuando:
|
||||
|
||||
1. Convierte lenguaje en estructura (texto -> tareas, notas -> plan).
|
||||
2. Resume y prioriza (mucho contenido -> accion).
|
||||
3. Personaliza (recomendaciones segun contexto).
|
||||
|
||||
Suele aportar poco cuando solo se pega un chat sin mejorar el flujo central.
|
||||
|
||||
---
|
||||
|
||||
## Output esperado
|
||||
|
||||
Un esquema de producto que incluya:
|
||||
|
||||
1. Usuario y caso de uso
|
||||
2. Problema central y coste actual
|
||||
3. Flujo principal (3-7 pasos)
|
||||
4. Alcance del MVP
|
||||
5. Plan de validacion (7 dias) y metricas
|
||||
|
||||
<RelatedArticlesSection />
|
||||
|
||||
+359
@@ -0,0 +1,359 @@
|
||||
# Comparacion de 7 herramientas de programacion con IA
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
Frente a la gran cantidad de herramientas de programacion con IA, cual es la mas adecuada para ti? Este capitulo realiza una evaluacion comparativa profunda de 7 plataformas principales de Web Vibe Coding como Lovable, Replit, Z.ai y otras, a traves de una tarea practica unificada: desarrollar un juego de "Snake + IA que escribe poesia". Compararemos desde multiples dimensiones como la amigabilidad para principiantes, la controlabilidad del codigo y la comodidad de despliegue, para ayudarte a elegir rapidamente la mejor herramienta de desarrollo asistido.
|
||||
|
||||
---
|
||||
|
||||
# 1. Construir un juego Snake con Vibe Coding: tutorial practico completo
|
||||
|
||||
Este articulo presenta una nueva practica de desarrollo de software llamada "Vibe Coding (codificacion de ambiente)", que utiliza inteligencia artificial para acelerar el proceso de construccion de aplicaciones.
|
||||
|
||||
A continuacion, presentaremos secuencialmente los conceptos centrales de Vibe Coding, explicaremos que es un AI Agent, y proporcionaremos metodos practicos para escribir prompts. Finalmente, a traves de una practica completa de construccion desde cero del juego "Snake (Serpiente)", y una comparacion detallada de multiples plataformas de Vibe Coding principales, te ayudaremos a elegir la combinacion de herramientas mas adecuada para ti.
|
||||
|
||||
## Aprenderas:
|
||||
|
||||
- **Que es Vibe Coding:** entender su definicion, flujo de trabajo y ventajas clave.
|
||||
- **El rol del AI Agent:** comprender como funciona un AI Agent y en que se diferencia de un programa tradicional.
|
||||
- **Como escribir buenos prompts:** dominar la escritura de prompts claros y especificos para obtener mejores resultados.
|
||||
- **Herramientas de Vibe Coding:** conocer un conjunto de plataformas principales de programacion y diseno con IA.
|
||||
- **Comparacion de plataformas:** evaluar y comparar las ventajas y desventajas de 7 plataformas de AI Agent desde la perspectiva de un principiante.
|
||||
- **Herramientas UI / UX:** aprender como integrar herramientas UI/UX como Figma y Mastergo en el flujo de trabajo general.
|
||||
|
||||
## 1. Introduccion
|
||||
|
||||
En las lecciones anteriores, siempre hemos usado el modelo de desarrollo fullstack de z.ai para completar tareas de programacion.
|
||||
|
||||
Sin embargo, nos hemos preguntado: su nucleo es realmente un "AI Agent" (diferente de la IA de chat comun, y mucho mas inteligente)? Esto se debe a que no solo conversa contigo, sino que es capaz de pensar (cuando le das una tarea, primero elabora un plan) y tomar acciones proactivas (como invocar busqueda web, ejecutar comandos de computadora, abrir paginas web, etc.). Lo explicaremos en detalle mas adelante.
|
||||
|
||||
## 1. Que es Vibe Coding?
|
||||
|
||||
Vibe Coding es un nuevo enfoque de desarrollo de software que utiliza IA para acelerar el proceso de desarrollo de aplicaciones. No es un reemplazo de la programacion tradicional, sino un modo de programacion mas "conversacional". Este concepto fue propuesto por el investigador de IA Andrej Karpathy: en este flujo de trabajo, los desarrolladores ya no escriben codigo linea por linea manualmente, sino que principalmente guian al AI Agent para generar, optimizar y depurar aplicaciones.
|
||||
|
||||
La idea central de Vibe Coding es pasar de **"centrado en codigo (code-first)"** a **"centrado en intenciones (intent-first)"*. Ya no necesitas concebir desde la primera linea de codigo, sino describir el resultado que deseas en lenguaje natural.
|
||||
|
||||
Un flujo de trabajo tipico de Vibe Coding es un ciclo iterativo continuo:
|
||||
|
||||
- **Describir el objetivo:** primero describe en una frase o parrafo la funcionalidad que deseas implementar, por ejemplo: "crear un juego de Snake simple con un backend en Python que pueda generar poesia."
|
||||
- **IA genera codigo:** el AI Agent analiza tus necesidades, genera una version inicial del codigo, incluyendo la estructura basica, la pagina frontend y la logica backend.
|
||||
- **Ejecutar y observar:** ejecuta el codigo generado, verifica si funciona como se espera, y descubre bugs o areas de mejora.
|
||||
- **Retroalimentar e iterar:** si hay errores o los resultados no son ideales, continua dando instrucciones en la conversacion, por ejemplo: "la serpiente se mueve muy lento, acelera la velocidad", o "ahora la API Key en el archivo `.env` no se esta leyendo correctamente, por favor arregla el codigo del backend."
|
||||
- **Repetir los pasos anteriores:** itera continuamente en el ciclo de "describir -> generar -> ejecutar -> retroalimentar" hasta que la aplicacion alcance un estado satisfactorio.
|
||||
|
||||
### Principales ventajas de Vibe Coding:
|
||||
|
||||
- **Reduccion de la barrera de entrada:** permite que disenadores, emprendedores, estudiantes y otros sin experiencia en programacion participen en el desarrollo de aplicaciones a traves del lenguaje natural.
|
||||
- **Prototipado rapido:** el tiempo desde la idea hasta el producto minimo viable (MVP) se reduce drasticamente.
|
||||
- **Mejora de eficiencia:** maneja automaticamente una gran cantidad de trabajo de codificacion repetitivo y mecanico (como codigo boilerplate), permitiendo a los desarrolladores enfocarse en el diseno de arquitectura y la abstraccion de problemas.
|
||||
- **Fomento de la experimentacion:** anima a producir primero rapidamente y luego refinar continuamente, facilitando la prueba de nuevas ideas y funcionalidades.
|
||||
|
||||
## 2. Que son las plataformas de Vibe Coding en linea (Web-based)?
|
||||
|
||||
En esta prueba practica, descubriras que las herramientas que evaluamos se dividen en dos categorias: **Web-based (plataformas en linea)** y **IDE (entorno de desarrollo local)**.
|
||||
|
||||
Aunque su nucleo es usar IA para ayudarte a escribir codigo, hay una gran diferencia en la experiencia de uso y los escenarios aplicables:
|
||||
|
||||
### Plataformas de Vibe Coding en linea (Web-based)
|
||||
|
||||
**Herramientas representativas:** Lovable, Replit, Z.ai, v0
|
||||
|
||||
Es como un apartamento hotelero "listo para vivir".
|
||||
|
||||
- **Sin configuracion de entorno:** no necesitas preocuparte por el entorno de Python, la version de Node.js, ni la instalacion de dependencias. Abres el navegador, introduces la URL y puedes empezar a codificar directamente.
|
||||
- **Vista previa y despliegue con un clic:** despues de generar el codigo, la plataforma suele mostrar automaticamente el resultado en la ventana derecha. Cuando este listo, haz clic en un boton para generar un enlace y compartirlo con tus amigos.
|
||||
- **Escenarios adecuados:**
|
||||
- **Validacion rapida de ideas (MVP):** tienes una idea en mente y quieres dedicar media hora a ver si puedes hacerla realidad.
|
||||
- **Principiantes:** no quieres que los complejos errores de entorno te frustren; solo quieres experimentar la diversion de la programacion con IA.
|
||||
- **Aplicaciones ligeras:** hacer una pagina web de herramienta simple, un pequeno juego o una pagina de presentacion personal.
|
||||
|
||||
### AI IDE (entorno de desarrollo local)
|
||||
|
||||
**Herramientas representativas:** Cursor, Trae, VS Code + plugin de IA
|
||||
|
||||
Es como una vivienda propia "completamente renovada".
|
||||
|
||||
- **Poderosas capacidades locales:** se ejecuta en tu computadora y puede acceder directamente a todos tus archivos locales, utilizando la potencia de calculo de tu equipo.
|
||||
- **Integracion sin fisuras con flujos de trabajo profesionales:** adecuado para proyectos grandes, puedes instalar libremente todo tipo de plugins, conectarte a bases de datos locales y realizar depuracion compleja.
|
||||
- **Escenarios adecuados:**
|
||||
- **Desarrollo de proyectos profesionales:** proyectos comerciales complejos que requieren mantenimiento a largo plazo.
|
||||
- **Personalizacion profunda:** necesitas control extremo sobre los detalles del codigo, o necesitas integracion profunda con flujos de trabajo locales existentes (como Git, Docker).
|
||||
- **Privacidad de datos:** el codigo permanece completamente local, mas compatible con ciertas normativas de seguridad empresarial.
|
||||
|
||||
**En resumen:** si estas empezando con la programacion con IA, o solo quieres hacer algo pequeno rapidamente, las **plataformas en linea** son un excelente punto de partida. Si eres un desarrollador profesional o tu proyecto se vuelve cada vez mas complejo, un **IDE local** te proporcionara un techo mas alto.
|
||||
|
||||
---
|
||||
|
||||
## 3. Que es un AI Agent?
|
||||
|
||||
### Que es un AI Agent?
|
||||
|
||||
Un AI Agent es un sistema de software capaz de percibir su entorno, tomar decisiones y actuar autonomamente para lograr objetivos especificos. Comparado con el software tradicional que sigue instrucciones fijas con un flujo unico, los AI Agents son mas flexibles y adaptables.
|
||||
|
||||
A continuacion, algunas caracteristicas clave que distinguen a los AI Agents de los programas tradicionales:
|
||||
|
||||
- **Autonomia (Autonomy):** los AI Agents tienen un alto grado de independencia. Los programas tradicionales suelen requerir que una persona los active paso a paso, mientras que un Agent puede decidir autonomamente su siguiente paso basandose en el objetivo.
|
||||
- **Percepcion y memoria (Perception & Memory):** el Agent recopila datos del entorno (por ejemplo, respuestas de API, datos de sensores, entrada del usuario, etc.) y retiene el contexto a traves de la "memoria", reutilizando experiencia en acciones posteriores y mejorando continuamente los resultados.
|
||||
- **Racionalidad y orientacion a objetivos (Rationality & Goal-Orientation):** el Agent analiza y planifica en torno al objetivo dado, seleccionando la secuencia de acciones mas adecuada para buscar un mayor "indicador de rendimiento".
|
||||
- **Uso de herramientas (Tool Use):** una caracteristica clave de los AI Agents modernos es la capacidad de invocar herramientas externas, sin limitarse a "generar texto". Por ejemplo, puede navegar la web, ejecutar codigo, consultar bases de datos, enviar correos electronicos, etc.; es un cerebro que "despacha herramientas".
|
||||
|
||||
Puedes entenderlo con esta analogia:
|
||||
|
||||
- Un **programa tradicional** es como una calculadora. Le das numeros y operadores, y solo ejecuta el calculo cuando presionas el boton.
|
||||
- Un **asistente de IA** es como un asistente humano. Le pides "ayudame a encontrar restaurantes cercanos", te dara resultados de busqueda y listara opciones, pero al final tu tomas la decision.
|
||||
- Un **AI Agent** es mas como un equipo de investigacion automatizado. Solo necesitas dar un objetivo de alto nivel (por ejemplo, "planificame un viaje a Japon"), y descompondra la tarea, buscara informacion en internet, reservara vuelos y hoteles (via API), organizara el itinerario, y finalmente te entregara los resultados, casi sin necesidad de que intervengas en los detalles.
|
||||
|
||||
---
|
||||
|
||||
# 2. Sobre la escritura de prompts
|
||||
|
||||
## 1. Es mejor escribir un prompt completo de una vez o dividirlo en multiples pasos?
|
||||
|
||||
Muchas personas tienen la tentacion de intentar explicar en un solo prompt "crear una aplicacion fullstack completa" de una vez. De hecho, las herramientas actuales ya son lo suficientemente potentes como para potencialmente dar un resultado decente en un intento. Pero en terminos de experiencia general y tasa de exito, dividir el trabajo en pequenos pasos e iterar por etapas suele dar mejores resultados y es menos probable que termines en un callejon sin salida de "ya no se puede modificar".
|
||||
|
||||
> **Pequeno consejo:** En lugar de esperar "hacerlo perfecto de una vez", es mejor dividir el objetivo grande en pequenas tareas ejecutables (To-do).
|
||||
> Por ejemplo, en lugar de decir directamente "build me a Snake game", dividelo en:
|
||||
> "1. Primero haz el frontend de un juego de Snake",
|
||||
> "2. Luego implementa un backend que registre puntuaciones",
|
||||
> "3. Finalmente conecta el frontend y el backend".
|
||||
> Esto permite que la IA comprenda tus necesidades con mayor precision y produzca resultados mas fiables.
|
||||
|
||||
## 2. Cuanto mas claro, mejor
|
||||
|
||||
- En Vibe Coding, los prompts que escribes son tan importantes como el codigo que escribes. Cuanto mas claro y especifico sea el prompt, mas cerca estara el resultado de lo que tienes en mente.
|
||||
- Explicar claramente los objetivos y restricciones desde el principio puede reducir la cantidad de iteraciones posteriores, lo que no solo ahorra tiempo sino tambien uso de cuotas y costos.
|
||||
|
||||
---
|
||||
|
||||
# 3. Resumen de herramientas (Vibe Coding / UIUX)
|
||||
|
||||
## 1. Plataformas de AI Agent
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| ------------------------------------------ | ------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
|
||||
## 2. Plataformas AI UIUX
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| ------------------------------------- | -------------------- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[FIgma](https://www.figma.com/)** | Web-based, PC Plugin |
|
||||
|
||||
---
|
||||
|
||||
# 4. Tutorial practico (combinacion de Vibe Coding + UI)
|
||||
|
||||
1. En la ventana de chat de la plataforma de Vibe Coding que elijas, introduce la descripcion del programa que deseas.
|
||||
Ejemplo:
|
||||
|
||||
> Por favor construye una aplicacion web simple de Snake (Serpiente) con frontend y backend.
|
||||
>
|
||||
> 1. Frontend
|
||||
>
|
||||
> - Pagina 1: pagina del juego
|
||||
> - Usa el teclado para controlar el movimiento de la serpiente.
|
||||
> - La serpiente no come comida, sino palabras en ingles.
|
||||
> - La barra lateral de la pagina muestra las palabras recolectadas y su cantidad.
|
||||
> - Al terminar el juego, las palabras recolectadas se conservan y se mantienen en la nueva partida.
|
||||
> - Pagina 2: pagina de escribir poesia (Make Poem)
|
||||
> - Muestra la misma lista de palabras que la pagina del juego (datos consistentes).
|
||||
> - Proporciona un boton para enviar las palabras actualmente recolectadas al backend para generar un poema.
|
||||
> - Despues de generar el poema, las palabras utilizadas se eliminan de la lista o se reduce su contador.
|
||||
>
|
||||
> * Anade navegacion simple para cambiar entre las paginas Game y Make Poem.
|
||||
> * Asegurate de que las palabras recolectadas sean visibles en ambas paginas.
|
||||
>
|
||||
> 2. Backend
|
||||
>
|
||||
> - Proporciona un endpoint backend que reciba las palabras recolectadas y devuelva un poema.
|
||||
> - Usa la API de DeepSeek para generar poesia.
|
||||
> - Almacena la API Key en un archivo `.env` e ignora ese archivo en `.gitignore`.
|
||||
|
||||
2. Introduce tu DeepSeek API Key. (Puedes obtenerla en [https://platform.deepseek.com/](https://platform.deepseek.com/))
|
||||
1. La API Key del LLM se usa para invocar el modelo grande en tu propio proyecto. Como es informacion sensible, no puede ser publica, por lo que debe escribirse por separado en un archivo de configuracion.
|
||||
**Por que usar un archivo `.env` y no subirlo a GitHub?**
|
||||
- El archivo `.env` se usa especificamente para almacenar **claves o contrasenas** (por ejemplo, la DeepSeek API Key).
|
||||
- Si este archivo se sube a GitHub, todo el mundo podra ver tu clave y usarla indebidamente.
|
||||
- Por seguridad, necesitamos declarar en el archivo `.gitignore` que se ignore `.env`, para que Git no lo rastree.
|
||||
- De esta forma, tu proyecto puede seguir usando estas claves normalmente en tu maquina local, pero no se filtraran en el repositorio.
|
||||
|
||||
3. Despues de ver el resultado generado, si encuentras errores o algo que quieras modificar, puedes introducir directamente tu solicitud de cambio en la ventana de chat.
|
||||
4. Si no estas satisfecho con el diseno de la pagina, tambien puedes elegir redisenar la interfaz en Figma o Mastergo, y luego retroalimentar las ideas de diseno al Agent.
|
||||
|
||||
- **Ejemplo**
|
||||
|
||||
> Por favor disena una **aplicacion web de dos paginas** llamada _Word-Snake_.
|
||||
>
|
||||
> - **Pagina Game:**
|
||||
> - La serpiente se controla con el teclado.
|
||||
> - La serpiente come palabras en ingles, no comida normal.
|
||||
> - El panel derecho muestra las palabras recolectadas y su cantidad.
|
||||
> - Al terminar el juego, el inventario de palabras no se vacia; se sigue usando en la nueva ronda.
|
||||
> - **Pagina Make Poem:**
|
||||
> - Muestra el mismo inventario de palabras compartido.
|
||||
> - El usuario selecciona algunas palabras y hace clic en el boton **Generate Poem**.
|
||||
> - Se envian estas palabras al backend, donde la API de DeepSeek genera un poema.
|
||||
> - Despues de generar el poema, se eliminan o reducen del inventario las palabras utilizadas.
|
||||
> - **Navegacion:** cambia entre las dos paginas con un Tab simple o menu superior.
|
||||
> - **Estado compartido:** asegurate de que las palabras recolectadas siempre permanezcan sincronizadas y visibles en ambas paginas.
|
||||
|
||||
- **Ejemplo de resultado**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Comparacion de plataformas de AI Agent (como elegir la mejor combinacion para proyectos simples)
|
||||
|
||||
Las diferentes plataformas de Vibe Coding tienen caracteristicas y flujos de trabajo distintos. Usamos el mismo conjunto de requisitos para un "juego de Snake con API DeepSeek" y lo probamos en multiples plataformas, evaluando sus pros y contras desde la perspectiva de un principiante. A continuacion el resumen.
|
||||
|
||||
## 1. Criterios de comparacion
|
||||
|
||||
1. **Objetivo (Goal)**
|
||||
Construir una aplicacion web de Snake (Serpiente) integrada con la API de DeepSeek.
|
||||
2. **Detalles del juego (Game Details)**
|
||||
1. El juego genera poesia a traves de la API DeepSeek LLM.
|
||||
2. La serpiente come palabras en ingles; las palabras recolectadas se conservan despues de terminar el juego y se siguen usando en la nueva partida. La misma palabra puede ser recolectada multiples veces, con conteo separado.
|
||||
3. Cuando se genera un poema, las palabras utilizadas se eliminan del inventario.
|
||||
|
||||
3. **Funciones esenciales (Must-Haves)**
|
||||
1. Una pagina frontend funcional con el juego de Snake (control por teclado, renderizado Canvas).
|
||||
2. Mecanismo de recoleccion de palabras (las palabras aparecen en el tablero; al comerlas, la lista de la barra lateral se actualiza).
|
||||
3. Persistencia del inventario de palabras entre multiples rondas de juego.
|
||||
4. Backend usando la API de DeepSeek (si no hay API Key, se puede devolver poesia simulada primero).
|
||||
5. Boton "Generar poesia": al hacer clic invoca el backend, muestra el poema y actualiza el inventario de palabras segun su uso.
|
||||
6. Soporte de `.env` para la API Key y `.gitignore` para evitar la filtracion de claves.
|
||||
|
||||
4. **Extras (Nice-to-Haves)**
|
||||
1. El usuario puede elegir que palabras usar para generar poesia.
|
||||
2. Experiencia de usuario amigable (por ejemplo, barra lateral que muestra claramente la lista de palabras, area de visualizacion de poesia con diseno razonable).
|
||||
3. Comentarios en el codigo para principiantes que expliquen la logica clave.
|
||||
|
||||
## 2. Comparacion de resultados de codificacion
|
||||
|
||||
### 1. Lovable (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** Lovable hace un buen trabajo en integracion y colaboracion. Completa automaticamente tareas de inicializacion como la conexion a la base de datos Supabase, haciendo que el proceso de configuracion del proyecto sea muy fluido. Solo necesitas describir los requisitos del proyecto, y el Agent te ayudara a conectar todo tipo de servicios y construir la estructura basica.
|
||||
- **Usuarios adecuados:** Para los principiantes que prueban Vibe Coding por primera vez, Lovable es una opcion muy amigable. Simplifica la complejidad de conectar multiples servicios, permitiendote enfocarte en los prompts y la iteracion en lugar de en la configuracion del entorno. Gracias a su alta automatizacion, puedes obtener rapidamente un prototipo funcional.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:** Relativamente caro, pero si tienes un correo universitario, puedes obtener la mitad de precio mediante la verificacion de estudiante.
|
||||
|
||||
|
||||
### 2. Cursor (IDE)
|
||||
|
||||
- **Tipo de plataforma:** Aplicacion de escritorio (PC)
|
||||
- **Caracteristicas principales y flujo de trabajo:** Cursor es un IDE propietario con capacidades de IA integradas, compatible con Windows, macOS y Linux. Incrusta funciones como generacion de codigo, reescritura inteligente y consulta de codigo directamente en el entorno de desarrollo. Comparado con las herramientas web, se asemeja mas a la experiencia de desarrollo local tradicional. Al ser un entorno local, las configuraciones varian entre computadoras, por lo que ocasionalmente pueden surgir problemas relacionados con el entorno. La ventaja es que el proyecto esta en tu maquina local, sin necesidad de descargar o configurar adicionalmente un entorno de ejecucion; Cursor te ayuda a manejar muchos de los pasos mas tediosos.
|
||||
- **Usuarios adecuados:** Para usuarios que ya tienen cierta base de programacion, Cursor es un entorno muy potente y familiar. Pero para principiantes absolutos, necesitan comprender por si mismos conceptos como la estructura del proyecto, la gestion de dependencias y la organizacion de archivos, por lo que la curva de aprendizaje es mas pronunciada. Mas adecuado para desarrolladores que quieren incorporar un asistente de IA en su flujo de codificacion tradicional.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:**
|
||||
|
||||
|
||||
### 3. Z.ai (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** El uso de Z.ai es bastante directo, pero un desafio obvio es que necesitas **copiar y pegar manualmente el codigo generado**. La plataforma en si carece de una ventana de vista previa en tiempo real, por lo que es dificil ver el resultado del codigo inmediatamente.
|
||||
- **Usuarios adecuados:** Esta plataforma requiere un uso mas "manual". La falta de automatizacion significa que debes lidiar directamente con el codigo, lo cual es en realidad una forma de entrenamiento para quienes quieren profundizar en la comprension de lo que genera la IA. Sin embargo, el copiar y pegar frecuente genera problemas de eficiencia y riesgo de errores. Mas adecuado para estudiantes que quieren ver "codigo generado por IA en su forma original", no para quienes buscan una experiencia de un solo clic.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:**
|
||||
|
||||
|
||||
### 4. Replit (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** Replit es un entorno de desarrollo y despliegue en linea todo-en-uno; puedes escribir codigo, ejecutar programas y generar URLs accesibles en linea directamente desde el navegador. Antes de empezar a codificar, te presenta un plan de accion claro; ademas proporciona un editor visual donde puedes modificar la UI directamente en la ventana de vista previa, y el codigo fuente se actualiza automaticamente. Esto te permite verificar en todo momento si el resultado de la IA cumple con lo esperado, reduciendo drasticamente la cantidad de iteraciones necesarias.
|
||||
|
||||
|
||||
|
||||
- **Usuarios adecuados:** Replit es muy amigable para principiantes. Simplifica el ciclo completo desde la codificacion hasta el despliegue, sin necesidad de configurar servidores adicionales ni servicios de hosting por tu cuenta. Las funciones de colaboracion tambien son potentes, ideales para que companeros de clase trabajen juntos en proyectos o pidan ayuda remota para revisar codigo.
|
||||
- **Proceso de prompts:** Durante la construccion, la IA no comprendio completamente los requisitos desde el principio; hubo aproximadamente 3 rondas de iteracion antes de que el resultado final alcanzara el efecto ideal.
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:**
|
||||
|
||||
|
||||
### 5. Minimax (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** Minimax suele tardar bastante en ejecutar tareas. Su proceso a menudo incluye: la IA descubre y repara errores automaticamente, por lo que todo el proceso puede ser lento e incluso un tanto laborioso. Tomando este proyecto como ejemplo, el Agent generalmente genera primero un plan detallado y luego construye paso a paso el backend, la base de datos y la logica frontend.
|
||||
- **Usuarios adecuados:** Dado que ejecuta automaticamente pruebas y repara errores, tanto el tiempo como el consumo de Token son considerables, pero puedes ver claramente como la IA identifica y resuelve problemas, lo cual es muy valioso desde una perspectiva de aprendizaje.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:** La version gratuita probablemente no pueda completar proyectos complejos de principio a fin sin problemas, por lo que se recomienda actualizar a una version de pago para asegurar que el proyecto se pueda construir completamente.
|
||||
|
||||
|
||||
### 6. Trae (IDE)
|
||||
|
||||
- **Tipo de plataforma:** Aplicacion de escritorio (PC)
|
||||
- **Caracteristicas principales y flujo de trabajo:** Como aplicacion de escritorio, Trae suele tener ventaja en rendimiento y velocidad de respuesta frente a las herramientas web. Pero requiere descarga e instalacion, lo que supone una barrera de entrada ligeramente mayor para algunos usuarios. Igualmente, al ser un entorno local, las diferencias en configuraciones de diferentes computadoras y entornos de dependencias introducen cierta incertidumbre. La ventaja es que Trae te ayuda a completar la creacion del proyecto y la configuracion de ejecucion localmente; puedes desarrollar y depurar directamente en tu maquina.
|
||||
- **Usuarios adecuados:** Mas adecuado para usuarios que planean realizar proyectos de Vibe Coding a largo plazo y desean usar una herramienta de escritorio dedicada. Para estudiantes que solo quieren "probar de vez en cuando", puede que no sea la opcion mas ligera.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:** Precio relativamente asequible; incluso la version gratuita es suficiente para completar pequenos proyectos de buena calidad.
|
||||
|
||||
|
||||
### 7. V0 (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** V0 es una herramienta enfocada en generar componentes UI de React, proporcionada por Vercel. Sobresale en generar interfaces de alta calidad aptas para produccion. Sin embargo, en uso practico, te encontraras con problemas como "dificultad para encontrar la vista de codigo" y "falta de indicaciones claras sobre donde configurar la API Key".
|
||||
- **Usuarios adecuados:** V0 es ideal para estudiantes o disenadores enfocados en frontend y diseno UI/UX. Pero no es una solucion fullstack completa; aun necesitaras usar otras plataformas para implementar la logica del backend y la integracion de APIs, por lo que si tu objetivo es "construir una aplicacion completa de forma integral", puede que no sea la mejor primera opcion.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
|
||||
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
- **Precio:** Los usuarios gratuitos pueden construir aproximadamente 4-5 proyectos simples.
|
||||
|
||||
|
||||
## 3. Tabla comparativa resumida de plataformas
|
||||
|
||||
| **Plataforma** | **Resena** | **Plataforma** | **Notas** |
|
||||
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------- |
|
||||
| **[Lovable](https://lovable.dev/)** | Muy amigable para principiantes en programacion con IA, facil de empezar y experiencia fluida; la opcion ideal para iniciarse. | Web-based | Completa automaticamente la conexion de servicios como Supabase, reduciendo costos de configuracion. |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | Adecuado para usuarios con experiencia en desarrollo; mejora drasticamente la productividad y la calidad del codigo. | PC | Requiere cierta base de programacion; en el entorno local necesitas comprender la estructura del proyecto y las dependencias. |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Mas adecuado para usuarios con base de programacion que quieren estudiar directamente los detalles del codigo generado por la IA. | Web-based | Sin ventana de vista previa, verificar resultados es mas complicado; requiere pegar codigo manualmente, crear carpetas y archivos y ejecutar el servicio manualmente. |
|
||||
| **[Replit](https://replit.com/~)** | Recomendado para usuarios que quieren convertir rapidamente ideas en servicios en linea accesibles. | Web-based | Desarrollo y despliegue en linea todo-en-uno, soporta colaboracion y proporciona un editor visual. |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Adecuado para quienes quieren ver todo el proceso de la IA detectando y reparando errores automaticamente y aprender de el, pero en general es lento y consume muchos Tokens. | Web-based | Todo el proceso es largo; la IA ejecuta multiples pruebas automaticamente y repara errores. |
|
||||
| **[Trae](https://www.trae.ai/)** | Para usuarios con experiencia en programacion que buscan la combinacion de IDE de escritorio + AI Agent; una herramienta poderosa para mejorar la eficiencia. | PC | Requiere instalacion local y configuracion del entorno, pero mejor rendimiento; adecuado para proyectos de Vibe Coding a largo plazo. |
|
||||
| **[V0](https://v0.app/)** | Optimizado para no desarrolladores que quieren crear rapidamente efectos visuales de React UI; adecuado para estudiantes orientados a frontend / diseno. | Web-based | Enfocado en generar React UI; necesita combinarse con otras plataformas para completar el backend y la construccion de la aplicacion completa. |
|
||||
---
|
||||
title: 'Comparacion de 7 herramientas de programacion con IA'
|
||||
description: 'Una evaluacion practica de plataformas Web de Vibe Coding con una tarea unificada, comparando facilidad para principiantes, control de codigo y despliegue.'
|
||||
---
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
# Disenar un sitio web con Agent de diseno y programacion
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
Este capitulo mostrara como el diseno y el desarrollo pueden colaborar perfectamente a traves de la IA. Tu asumiras el rol de product manager, dirigiendo al "Agent de diseno" para completar el diseno del logotipo, el esquema de colores y el layout de la pagina, y luego coordinando con el "Agent de programacion" para convertir los bocetos visuales en codigo ejecutable. Desde la concepcion creativa hasta la publicacion del sitio web, experimenta el flujo de desarrollo potenciado por IA de principio a fin, convirtiendo a una sola persona en todo un equipo.
|
||||
|
||||
---
|
||||
|
||||
# 1. Guia de inicio
|
||||
|
||||
## 1. Introduccion al tutorial
|
||||
|
||||
Vamos a usar un Agent de diseno de IA y un Agent de codificacion para construir un sitio web completo desde cero.
|
||||
|
||||
- **Agent de diseno**: responsable de crear el logotipo, el layout de la pagina web, el esquema de colores y otros elementos visuales
|
||||
- **Agent de codificacion**: segun los requisitos y layout que definas en los prompts, escribe el codigo real como HTML/CSS/JS, construyendo un sitio web funcional
|
||||
|
||||
## 2. Agent de diseno vs Agent de codificacion
|
||||
|
||||
- **Agent de diseno**: IA que genera imagenes, mockups de pagina o estilos de diseno basandose en los prompts que le proporcionas.
|
||||
- Mastergo
|
||||
- Lovart
|
||||
- Figma MCP
|
||||
- **Agent de codificacion**: IA que escribe el codigo real (HTML/CSS/JS, etc.) basandose en las funcionalidades y layout que solicitas en tus prompts.
|
||||
- Z.AI
|
||||
- Trae
|
||||
- Cursor
|
||||
- Lovable
|
||||
|
||||
---
|
||||
|
||||
# 2. Crear un logotipo con el Agent de diseno
|
||||
|
||||
## 1. Elementos clave a considerar al disenar un logotipo
|
||||
|
||||
El logotipo es uno de los elementos clave que determinan la primera impresion de tu sitio web. Para obtener resultados satisfactorios del Agent de diseno de IA, necesitas describir claramente en tu prompt que tipo de logotipo deseas.
|
||||
|
||||
1. **Nombre de marca / texto**
|
||||
|
||||
- El texto que debe aparecer en el logotipo (por ejemplo: titulo del sitio web, nombre de la marca, etc.).
|
||||
|
||||
2. **Estilo (estado de animo / atmosfera)**
|
||||
|
||||
- La sensacion o atmosfera general que el logotipo debe transmitir.
|
||||
- _Ejemplos: minimalista, mono, limpio, moderno, retro, futurista, etc._
|
||||
|
||||
3. **Esquema de colores** (opcional)
|
||||
|
||||
- Es preferible que los colores del logotipo coincidan con el tono general del sitio web.
|
||||
- Puedes especificar codigos hexadecimales concretos o tonos generales (frios, calidos, etc.).
|
||||
- _Ejemplos: **`#171721`** (negro), **`#FF7130`** (naranja)._
|
||||
|
||||
4. **Forma (figura / estructura)**
|
||||
|
||||
- Define si el logotipo necesita una forma o composicion especifica.
|
||||
- _Ejemplos: texto dentro de un circulo, combinacion de icono + texto, logotipo centrado en un icono, etc._
|
||||
|
||||
5. **Icono / elemento simbolico** (opcional)
|
||||
|
||||
- Graficos o simbolos que deseas que aparezcan en el logotipo.
|
||||
- _Ejemplos: icono de libro, simbolo de rayo, graficos relacionados con IA, formas geometricas abstractas, etc._
|
||||
|
||||
## 2. Escribir prompts para el diseno del logotipo
|
||||
|
||||
**Ejemplo de prompt**
|
||||
|
||||
```
|
||||
"Por favor disename un logotipo de estilo minimalista. El nombre de la marca es 'My First Website'.
|
||||
Usa negro (#171721) y naranja (#FF7130), y coloca el texto dentro de un circulo."
|
||||
```
|
||||
|
||||
```
|
||||
"Por favor disena un logotipo con el nombre de marca 'AIID'.
|
||||
El estilo general debe ser futurista, limpio y simple, con azul y blanco como colores principales.
|
||||
Combina un grafico abstracto que simbolice la IA con el texto, y exportalo como PNG con fondo transparente."
|
||||
```
|
||||
|
||||
## 3. Solicitar el diseno al Agent
|
||||
|
||||
- Introduce el prompt anterior -> compara los multiples disenos generados por el Agent.
|
||||
|
||||
|
||||
|
||||
## 4. Confirmar el logotipo final
|
||||
|
||||
- Selecciona tu version favorita entre los borradores y descargala.
|
||||
|
||||
---
|
||||
|
||||
# 3. Planificar la estructura de tu sitio web
|
||||
|
||||
## 1. Conocer las secciones basicas
|
||||
|
||||
Antes de empezar realmente a crear el sitio web, es muy importante planificar que menus (secciones) incluir. El diseno de los menus depende de lo que quieras que vean los visitantes y que acciones deseas que realicen.
|
||||
Generalmente, un sitio web esta compuesto por secciones basicas como **Home / About / Contact**.
|
||||
|
||||
## 2. Dibujar primero un esquema de estructura (opcional)
|
||||
|
||||
Puedes escribir primero un esquema simple de la estructura de menus basandote en los objetivos del sitio web.
|
||||
|
||||
### Menus basicos
|
||||
|
||||
1. **Home**
|
||||
1. La pagina principal que los visitantes ven al entrar al sitio web
|
||||
2. Suele incluir el logotipo, un area visual principal y un lema o introduccion breve
|
||||
2. **About**
|
||||
1. Presenta quien eres, o el proposito del proyecto / servicio
|
||||
2. Portafolio personal: presentacion + breve curriculum
|
||||
3. Sitio web de servicios: vision, objetivos y funcionalidades principales
|
||||
3. **Contact**
|
||||
1. Informacion de contacto, como correo electronico, numero de telefono, enlaces a redes sociales, etc.
|
||||
2. Tambien puedes anadir un formulario de contacto simple
|
||||
|
||||
### Menus opcionales
|
||||
|
||||
4. **Services / Projects**
|
||||
1. Muestra los servicios que ofreces, o tus proyectos / portafolio
|
||||
2. Generalmente presentados en formato de lista o tarjetas
|
||||
|
||||
5. **Gallery**
|
||||
1. Para mostrar imagenes, fotos o trabajos de diseno
|
||||
|
||||
6. **Blog / News**
|
||||
1. Para publicar articulos, actualizaciones o diarios
|
||||
|
||||
7. **FAQ**
|
||||
1. Recopila las preguntas frecuentes de los visitantes con sus respuestas
|
||||
|
||||
## 3. Elegir un esquema de colores (opcional)
|
||||
|
||||
Si ya tienes un logotipo, o quieres disenar el sitio web con una combinacion de colores especifica, puedes incluir directamente en tu prompt los codigos de color que deseas usar.
|
||||
|
||||
**Ejemplo:** `#171721, #872B97, #FF7130, #FF3C68`
|
||||
|
||||
Incluso si no se te ocurre un esquema de colores en este momento, puedes encontrar inspiracion a traves de sitios web de colores o buscando palabras clave.
|
||||
|
||||
- **Sitios web de referencia de colores**
|
||||
- https://colorhunt.co/
|
||||
- https://coolors.co/
|
||||
|
||||
|
||||
|
||||
- **Buscar esquemas de colores en Google por palabras clave**
|
||||
|
||||
|
||||
|
||||
## 4. Escribir el prompt para el diseno del sitio web
|
||||
|
||||
**Ejemplo de prompt**
|
||||
|
||||
```
|
||||
"Por favor disena un sitio web de una sola pagina compuesto por las secciones Home, About y Contact.
|
||||
Usa los colores #171721, #FF7130 y #FF3C68.
|
||||
El estilo general debe ser moderno y limpio."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. Disenar el sitio web con el Agent de diseno
|
||||
|
||||
## 1. Introducir el prompt -> generar el diseno
|
||||
|
||||
- Escribe en el prompt la estructura que has planificado y los colores que has seleccionado.
|
||||
|
||||
**Ejemplo de prompt en Mastergo**
|
||||
|
||||
|
||||
|
||||
## 2. Revisar el diseno y sugerir cambios
|
||||
|
||||
Puedes proporcionar retroalimentacion al Agent segun tus necesidades, por ejemplo:
|
||||
|
||||
- "Es demasiado recargado, simplifica el estilo general."
|
||||
- "Cambia la fuente."
|
||||
- "Ajusta la combinacion de colores."
|
||||
- "Elimina esta seccion de aqui."
|
||||
|
||||
|
||||
|
||||
## 3. Confirmar el diseno final
|
||||
|
||||
Cuando hayas realizado multiples rondas de modificaciones al diseno y estes satisfecho, puedes convertir este diseno en codigo, para que el Agent de codificacion pueda entenderlo y continuar trabajando.
|
||||
|
||||
La forma de convertir el diseno a codigo varia segun la plataforma, pero generalmente se hace instalando y usando ciertos plugins dentro de la plataforma de diseno.
|
||||
|
||||
**Ejemplo con Mastergo**
|
||||
|
||||
1. Abre el [sitio de plugins de Mastergo](https://mastergo.com/community/plugin) y busca **seal**.
|
||||
|
||||
|
||||
|
||||
2. Vuelve a la pagina de diseno y haz clic en el **icono de cubo (plugin)**.
|
||||
|
||||
|
||||
|
||||
3. Selecciona el area de diseno que deseas convertir a codigo y haz clic en el boton **Generate** para generar el codigo.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Construir el sitio web con el Agent de codificacion
|
||||
|
||||
## 1. Entender los conceptos basicos de HTML/CSS/JS
|
||||
|
||||
Un sitio web esta esencialmente compuesto por tres lenguajes:
|
||||
|
||||
- **HTML (HyperText Markup Language)** -> Estructura (esqueleto)
|
||||
- **CSS (Cascading Style Sheets)** -> Estilos (apariencia)
|
||||
- **JavaScript (JS)** -> Funcionalidad (interaccion)
|
||||
|
||||
Estos tres trabajan juntos para formar la pagina web completa que vemos.
|
||||
|
||||
1. **HTML (Estructura)**
|
||||
|
||||
- Define "que se muestra" en la pagina
|
||||
- Se usa para colocar elementos como texto, imagenes, botones, enlaces, etc.
|
||||
- Es como los **muros y el armazon** de un edificio
|
||||
|
||||
**Ejemplo**
|
||||
|
||||
```html
|
||||
<h1>Hola!</h1>
|
||||
<p>Este es mi primer sitio web.</p>
|
||||
<a href="contact.html">Contacto</a>
|
||||
```
|
||||
|
||||
2. **CSS (Estilos)**
|
||||
|
||||
- Decide "como se muestra el contenido"
|
||||
- Controla el tamano del texto, colores, espaciado, fondo, forma de los botones, etc.
|
||||
- Le da a HTML su "ropa" y estilo visual
|
||||
|
||||
**Ejemplo**
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: #FF7130; /* Color del texto */
|
||||
font-size: 36px; /* Tamano de fuente */
|
||||
text-align: center; /* Alineacion centrada */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #171721; /* Color de fondo */
|
||||
color: white; /* Color de texto predeterminado */
|
||||
}
|
||||
```
|
||||
|
||||
3. **JavaScript (JS) (Funcionalidad)**
|
||||
|
||||
- Permite que la pagina web interactue con el usuario
|
||||
- Puede implementar efectos dinamicos como clics de botones, menus desplegables, carruseles de imagenes, envio de formularios, etc.
|
||||
- Si HTML/CSS son el esqueleto y la apariencia estaticos, entonces JS es el **cerebro** que hace que la pagina web "cobrara vida"
|
||||
|
||||
**Ejemplo**
|
||||
|
||||
```javascript
|
||||
function showAlert() {
|
||||
alert("Se ha hecho clic en el boton!");
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<button onclick="showAlert()">Haz clic en mi</button>
|
||||
```
|
||||
|
||||
## 2. Dejar que el Agent de codificacion genere el codigo
|
||||
|
||||
**Ejemplo de prompt**
|
||||
|
||||
```
|
||||
"Por favor escribe HTML y CSS para un sitio web de una sola pagina con las secciones Home, About y Contact.
|
||||
Usa los colores #171721, #FF7130, #FF3C68.
|
||||
Fondo negro y texto blanco."
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3. Ejecutar el sitio web
|
||||
|
||||
Cuando se ha generado el codigo borrador, el Agent generalmente inicia automaticamente el proyecto y muestra la pagina del sitio web generada.
|
||||
|
||||
Si has reiniciado el Agent o la pagina del sitio web no aparece, puedes introducir un prompt como este:
|
||||
|
||||
```
|
||||
"Please activate the project"
|
||||
```
|
||||
|
||||
Para que el Agent reinicie el proyecto y abra la pagina de vista previa, facilitandote ver el efecto actual.
|
||||
|
||||
## 4. Realizar modificaciones simples
|
||||
|
||||
Puedes seguir ajustando el borrador mediante lenguaje natural, por ejemplo:
|
||||
|
||||
- "Haz el boton mas grande."
|
||||
- "La fuente mas gruesa."
|
||||
|
||||
|
||||
|
||||
## 5. Modificar el contenido del texto del sitio web
|
||||
|
||||
El sitio web de la version inicial generada por el Agent generalmente incluye algo de texto de marcador de posicion generado automaticamente. Para que se acerque mas a tu escenario real, puedes preparar el contenido real de antemano y luego pedirle al Agent que lo reemplace.
|
||||
|
||||
**Ejemplo de aplicacion**: actualizar la pagina About del sitio web AIID
|
||||
|
||||
1. Primero escribe el contenido que deseas mostrar en la pagina About. Para facilitar la comprension del Agent, puedes guardar el contenido en formato Markdown.
|
||||
|
||||
|
||||
|
||||
2. Luego dile al Agent en la conversacion que aplique el contenido del archivo a la pagina especificada.
|
||||
|
||||
|
||||
|
||||
3. Revisa la version actualizada despues de aplicar el contenido.
|
||||
|
||||
|
||||
|
||||
## 6. Insertar imagenes
|
||||
|
||||
Si deseas anadir imagenes especificas (por ejemplo, logotipo, imagen de fondo, etc.), primero sube las imagenes a la carpeta del proyecto y luego indica en el prompt en que posicion de la pagina deseas usarlas.
|
||||
|
||||
- **Ejemplo:**
|
||||
|
||||
|
||||
|
||||
- **Resultado:**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 6. Integrar diseno y codigo
|
||||
|
||||
## 1. Integrar los archivos de diseno con el codigo del sitio web (opcional)
|
||||
|
||||
Cuando hayas descargado los archivos de codigo del Agent de diseno, puedes moverlos al directorio del proyecto actual y luego pedirle al Agent de codificacion que te ayude a fusionar este codigo de diseno con el proyecto existente.
|
||||
|
||||
- **Ejemplo:**
|
||||
|
||||
|
||||
|
||||
- **Resultado:**
|
||||
|
||||
|
||||
---
|
||||
title: 'Construir un sitio con agentes de diseno y programacion'
|
||||
description: 'Del concepto al lanzamiento: coordina un agente de diseno para el visual y un agente de codigo para convertirlo en un sitio funcionando con un flujo reutilizable.'
|
||||
---
|
||||
@@ -0,0 +1,325 @@
|
||||
---
|
||||
title: 'Qué hacer cuando encuentras errores al escribir código - Guía práctica para preguntar a la IA con capturas de pantalla'
|
||||
description: 'Aprende a preguntar eficientemente a la IA para resolver diversos errores de desarrollo, domina el flujo estándar de capturas de pantalla, descripción y localización de problemas, y convierte a la IA en tu asistente de depuración.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>30 minutos</strong>'
|
||||
</script>
|
||||
|
||||
# Qué hacer cuando encuentras errores al escribir código
|
||||
|
||||
## Resumen del capítulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Técnicas de depuración', 'Colaboración con IA', 'Resolución de problemas', 'Herramientas de desarrollo']" coreOutput="Un flujo estandarizado de resolución de errores" expectedOutput="Poder resolver independientemente el 90% de los errores comunes">
|
||||
|
||||
En la era de la IA, la forma de resolver errores ha cambiado.
|
||||
|
||||
No necesitas memorizar todos los tipos de errores, no necesitas ser un experto en depuración, ni siquiera necesitas entender qué significa el error.
|
||||
|
||||
<strong>Solo necesitas aprender una cosa: cómo preguntar a la IA.</strong>
|
||||
|
||||
Este capítulo te enseñará un flujo de resolución <strong>de lo simple a lo avanzado</strong>:
|
||||
|
||||
1. <strong>Paso 1: Pregunta directamente</strong>: Describe el síntoma + captura de pantalla, una sola frase
|
||||
2. <strong>Paso 2: Complementa información</strong>: Si no se puede resolver, abre F12 y añade información clave
|
||||
|
||||
Después de dominar este flujo, <strong>podrás resolver el 90% de los errores por tu cuenta</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Nota
|
||||
Todos los métodos de este capítulo se basan en la experiencia real de uso de AI IDEs como Cursor/Trae/Claude, y pueden aplicarse directamente al desarrollo diario.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Preguntar directamente', description: 'Describe el síntoma + captura de pantalla' },
|
||||
{ title: 'Complementar información', description: 'Abre F12 para localizar el problema' },
|
||||
{ title: 'Iterar hasta resolver', description: 'Hasta que el problema se resuelva' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Método central: pregunta a la IA con capturas de pantalla
|
||||
|
||||
::: warning ¿Por qué es importante este capítulo?
|
||||
|
||||
La primera reacción de muchos principiantes al encontrar errores es:
|
||||
- Entrar en pánico y empezar a modificar código al azar
|
||||
- Pasar media hora buscando "cómo solucionar el error xxx"
|
||||
- Intentar entender qué significa el error por sí mismos
|
||||
- Depurar solo hasta altas horas de la noche
|
||||
|
||||
<strong>Todo esto es perder el tiempo.</strong>
|
||||
|
||||
En la era de la IA, la depuración se ha convertido en algo muy simple:
|
||||
|
||||
```
|
||||
Ver error → Captura de pantalla → Pregunta a la IA → Haz lo que dice la IA
|
||||
```
|
||||
|
||||
No necesitas entender el error, no necesitas saber depurar, ni siquiera necesitas saber dónde está el problema.
|
||||
|
||||
<strong>Solo necesitas aprender cómo preguntar.</strong>
|
||||
|
||||
:::
|
||||
|
||||
### 1.1 La forma más simple de preguntar
|
||||
|
||||
No necesitas plantillas complejas, elige entre dos métodos:
|
||||
|
||||
**Método 1: Describe el síntoma**
|
||||
|
||||
Formato: qué hiciste, qué apareció ahora
|
||||
|
||||
```
|
||||
Acabo de modificar el código de la página de login y ahora la página está en blanco, ¿qué hago?
|
||||
```
|
||||
|
||||
**Método 2: Captura de pantalla**
|
||||
|
||||
Haz una captura de pantalla directamente de la página actual o del mensaje de error
|
||||
|
||||
```
|
||||
[captura de pantalla]
|
||||
|
||||
¿Cómo soluciono este error?
|
||||
```
|
||||
|
||||
**El mejor método: Descripción + captura de pantalla**
|
||||
|
||||
```
|
||||
Acabo de modificar el código de la página de login y ahora la página está en blanco.
|
||||
|
||||
[captura de pantalla]
|
||||
|
||||
¿Qué hago?
|
||||
```
|
||||
|
||||
**Recuerda: describe claramente el contexto, añade una captura de pantalla, y la IA podrá ayudarte más rápido.**
|
||||
|
||||
### 1.2 Cómo explicar el problema claramente
|
||||
|
||||
Muchos principiantes saben que deben preguntar, pero no saben cómo expresarse. En realidad, solo necesitas explicar tres cosas:
|
||||
|
||||
**1. Qué acabas de hacer**
|
||||
|
||||
```
|
||||
Acabo de hacer clic en el botón guardar
|
||||
Acabo de modificar el código de la página de login
|
||||
Acabo de actualizar la página
|
||||
```
|
||||
|
||||
**2. Qué ves ahora**
|
||||
|
||||
```
|
||||
Ahora la página está en blanco
|
||||
Ahora el botón no responde al hacer clic
|
||||
Ahora muestra un mensaje de error
|
||||
```
|
||||
|
||||
**3. Qué efecto quieres lograr**
|
||||
|
||||
```
|
||||
Quiero que los datos se guarden correctamente
|
||||
Quiero que la página se muestre normalmente
|
||||
Quiero que aparezca un aviso después de hacer clic en el botón
|
||||
```
|
||||
|
||||
**Ejemplo completo:**
|
||||
|
||||
```
|
||||
Acabo de hacer clic en el botón guardar, y ahora la página muestra un error de "error al guardar".
|
||||
|
||||
[captura de pantalla]
|
||||
|
||||
Quiero que los datos del formulario se guarden correctamente en la base de datos, ¿qué debo hacer?
|
||||
```
|
||||
|
||||
**Principios clave:**
|
||||
- Describe en lenguaje llano, sin terminología técnica
|
||||
- Sigue el orden cronológico: qué hiciste primero, qué pasó después
|
||||
- Expresa tu expectativa para que la IA sepa qué quieres
|
||||
|
||||
## 2. Paso 1: Describe el síntoma directamente
|
||||
|
||||
Cuando encuentres un problema, <strong>no te apresures a abrir F12</strong>. Primero describe el síntoma, haz una captura de pantalla de la página actual y pásasela a la IA.
|
||||
|
||||
Muchas veces, la IA puede dar una solución directamente al ver la captura de pantalla.
|
||||
|
||||
### 2.1 Cómo describir síntomas comunes
|
||||
|
||||
::: tip Simplemente describe
|
||||
|
||||
**Página en blanco**
|
||||
```
|
||||
La página se abre en blanco, ¿qué hago?
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
**El botón no responde al hacer clic**
|
||||
```
|
||||
Al hacer clic en este botón no pasa nada, ayúdame a revisar.
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
**Los datos no se guardan**
|
||||
```
|
||||
Hice clic en guardar, pero los datos no se guardaron, ¿qué hago?
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
**El estilo no se muestra correctamente**
|
||||
```
|
||||
El botón está desalineado, ¿cómo lo ajusto?
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
**Error en la API**
|
||||
```
|
||||
La llamada a la API da error, ayúdame a revisar.
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 Si la IA lo resuelve directamente
|
||||
|
||||
¡Felicidades, problema resuelto! Simplemente haz las modificaciones que indica la IA.
|
||||
|
||||
### 2.3 Si la IA dice "necesito más información"
|
||||
|
||||
Entonces es cuando necesitas abrir F12 y complementar información clave. Sigue leyendo.
|
||||
|
||||
## 3. Paso 2: Complementa información clave
|
||||
|
||||
Cuando la IA dice que necesita más información, según el tipo de problema, abre F12 y captura el contenido correspondiente.
|
||||
|
||||
### 3.1 Cuándo necesitas complementar información
|
||||
|
||||
La IA podría responder así:
|
||||
- "Por favor, abre la Console a ver si hay errores"
|
||||
- "Haz una captura de pantalla del panel Network"
|
||||
- "Necesito ver el mensaje de error específico"
|
||||
|
||||
En ese caso, sigue las indicaciones de abajo para complementar las capturas.
|
||||
|
||||
### 3.2 Complementar información de Console (página en blanco/errores)
|
||||
|
||||
::: tip Pasos
|
||||
|
||||
**Paso 1: Presiona F12 para abrir las herramientas de desarrollo**
|
||||
|
||||
En Mac es `Cmd+Option+I`, o haz clic derecho en la página y selecciona "Inspeccionar".
|
||||
|
||||
**Paso 2: Cambia a la pestaña Console**
|
||||
|
||||
**Paso 3: Haz una captura de pantalla de los errores en rojo**
|
||||
|
||||
**Paso 4: Envíalo a la IA**
|
||||
|
||||
```
|
||||
Los errores de Console son los siguientes:
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.3 Complementar información de Network (problemas de datos/errores de API)
|
||||
|
||||
::: tip Pasos
|
||||
|
||||
**Paso 1: Presiona F12 para abrir las herramientas de desarrollo**
|
||||
|
||||
**Paso 2: Cambia a la pestaña Network**
|
||||
|
||||
**Paso 3: Repite la operación** (haz clic en guardar/actualiza la página)
|
||||
|
||||
**Paso 4: Encuentra la petición correspondiente y haz una captura de pantalla**
|
||||
|
||||
- Mira la URL y el código de estado
|
||||
- Mira el Payload (parámetros enviados)
|
||||
- Mira el Response (resultado devuelto)
|
||||
|
||||
**Paso 5: Envíalo a la IA**
|
||||
|
||||
```
|
||||
La información de Network es la siguiente:
|
||||
|
||||
Petición: [captura 1]
|
||||
Parámetros: [captura 2]
|
||||
Respuesta: [captura 3]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.4 Complementar información de Elements (problemas de estilos)
|
||||
|
||||
::: tip Pasos
|
||||
|
||||
**Paso 1: Clic derecho en el elemento → "Inspeccionar"**
|
||||
|
||||
Las herramientas de desarrollo se posicionarán automáticamente en ese elemento.
|
||||
|
||||
**Paso 2: Haz una captura de pantalla del panel Styles**
|
||||
|
||||
**Paso 3: Envíalo a la IA**
|
||||
|
||||
```
|
||||
Los estilos del elemento son los siguientes:
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 4. Paso 3: Itera hasta resolver
|
||||
|
||||
### 4.1 Lo que NO debes hacer
|
||||
|
||||
Estas acciones harán que pierdas tiempo:
|
||||
|
||||
Entrar en pánico al ver un error y empezar a modificar código al azar
|
||||
Pasar media hora buscando soluciones de errores
|
||||
Intentar entender el significado de cada error por tu cuenta
|
||||
Depurar solo hasta altas horas de la noche
|
||||
|
||||
### 4.2 Lo que SÍ debes hacer
|
||||
|
||||
Sigue este flujo:
|
||||
|
||||
Primero describe el síntoma y haz una captura de pantalla para preguntar
|
||||
Cuando la IA diga que necesita más información, abre F12 y complementa
|
||||
Modifica el código según las sugerencias
|
||||
Después de modificar, prueba; si el problema persiste, sigue haciendo capturas y preguntando
|
||||
|
||||
## 5. Resumen: Flujo completo
|
||||
|
||||
```
|
||||
Encuentras un problema
|
||||
↓
|
||||
Describe el síntoma directamente + captura de pantalla
|
||||
↓
|
||||
Pásalo a la IA: "¿Qué hago?"
|
||||
↓
|
||||
¿La IA lo resolvió directamente?
|
||||
↓ Sí
|
||||
Haz lo que dice la IA
|
||||
↓
|
||||
Prueba si se resolvió
|
||||
↓
|
||||
↓ No / La IA necesita más información
|
||||
Abre F12 y complementa información clave
|
||||
↓
|
||||
Envíalo de nuevo a la IA
|
||||
↓
|
||||
Repite hasta resolver
|
||||
```
|
||||
@@ -0,0 +1,642 @@
|
||||
---
|
||||
title: 'Referencia de inspiracion para escenarios de consumo B2C'
|
||||
description: 'Una coleccion de direcciones creativas de aplicacion de modelos LLM en escenarios de consumo B2C, cubriendo estilo de vida, compania emocional, entretenimiento y mas.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'aprox. <strong>4 horas</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// Pool de temas por escenario: énfasis en sensación, ambiente y sugestión psicológica
|
||||
const topicPool = {
|
||||
'lifestyle': [
|
||||
{ title: 'Asistente de despertar con ritual matutino', desc: 'Genera rituales matutinos según clima, agenda y ánimo para empezar bien cada día' },
|
||||
{ title: 'Creador de ambiente para vivir solo', desc: 'Diseña ambientes domésticos para quienes viven solos, con sugerencias de luz, música y aromas' },
|
||||
{ title: 'Generador de planes reparadores de fin de semana en casa', desc: 'Recomienda la combinación perfecta según el ánimo: película + snacks + ambientación' },
|
||||
{ title: 'Radio calmante antes de dormir', desc: 'Genera historias suaves y meditaciones guiadas como una radio privada para conciliar el sueño' },
|
||||
{ title: 'Capturador de inspiración estética cotidiana', desc: 'Descubre belleza en lo cotidiano y genera sugerencias estéticas con sentido de ritual' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'Confidente nocturno', desc: 'Un espacio emocional disponible 24 horas, sin juicio, para recibir cualquier preocupación' },
|
||||
{ title: 'Acompañante para sanar una ruptura', desc: 'Ofrece compañía amable, consejos de recuperación y salida emocional durante una ruptura' },
|
||||
{ title: 'Coach de respiración contra la ansiedad', desc: 'Percibe la ansiedad y guía ejercicios de respiración y mindfulness' },
|
||||
{ title: 'Mentor para reconstruir la confianza', desc: 'Ayuda a reconstruir identidad y valor personal con diálogo positivo y sugestión psicológica' },
|
||||
{ title: 'Interpretación inteligente del diario emocional', desc: 'Analiza diarios emocionales, encuentra patrones y ofrece ideas y consejos cálidos' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'DM inmersivo para juegos de misterio', desc: 'Actúa como anfitrión, crea suspense y hace avanzar la trama' },
|
||||
{ title: 'NPC con alma en juegos de mundo abierto', desc: 'NPC con personalidad que recuerda historias del jugador y genera vínculos emocionales reales' },
|
||||
{ title: 'Generación de podcasts personalizados', desc: 'Genera podcasts exclusivos según intereses, con naturalidad de conversación entre amigos' },
|
||||
{ title: 'Equipo de ambiente para concierto virtual', desc: 'Crea sensación de directo en conciertos online con interacción, apoyo y ambiente en tiempo real' },
|
||||
{ title: 'Compañero de cocreación de novela interactiva', desc: 'Crea historias junto con lectores; cada elección cambia el rumbo del mundo' }
|
||||
],
|
||||
'growth': [
|
||||
{ title: 'Testigo del crecimiento personal', desc: 'Registra la trayectoria de crecimiento y ofrece ánimo y revisión en hitos importantes' },
|
||||
{ title: 'Coach gamificado de hábitos', desc: 'Convierte la formación de hábitos en una aventura divertida' },
|
||||
{ title: 'Emparejador de compañeros para aprender habilidades', desc: 'Encuentra compañeros afines para supervisarse y compartir avances' },
|
||||
{ title: 'Descubridor diario de pequeñas alegrías', desc: 'Ayuda a descubrir pequeños momentos bellos y cultivar gratitud y optimismo' },
|
||||
{ title: 'Simulador de experiencias de vida', desc: 'Simula decisiones vitales y explora posibilidades de vidas paralelas' }
|
||||
],
|
||||
'social': [
|
||||
{ title: 'Generador de temas rompehielos', desc: 'Ofrece temas interesantes en situaciones sociales para reducir incomodidad y acercar personas' },
|
||||
{ title: 'Redactor de ambiente para publicaciones sociales', desc: 'Genera textos con estilo según fotos y estado de ánimo' },
|
||||
{ title: 'Planificador de ambiente para citas', desc: 'Diseña una experiencia completa de cita: lugar, conversación y sorpresa' },
|
||||
{ title: 'Animador de reuniones remotas', desc: 'Activa reuniones online con juegos e interacción guiada' },
|
||||
{ title: 'Asistente de gestión de energía social', desc: 'Ayuda a personas introvertidas a gestionar energía y encontrar un ritmo social cómodo' }
|
||||
],
|
||||
'creative': [
|
||||
{ title: 'Kit de emergencia contra el bloqueo creativo', desc: 'Aporta chispas inesperadas cuando aparece el bloqueo creativo' },
|
||||
{ title: 'Guía de exploración del estilo personal', desc: 'Ayuda a descubrir un estilo propio, desde la ropa hasta la expresión' },
|
||||
{ title: 'Asesor estético para journaling y diarios', desc: 'Sugiere maquetación, paletas y contenido creativo para diarios' },
|
||||
{ title: 'Guía de composición y ambiente fotográfico', desc: 'Ofrece consejos de foto y edición según escena y sensación buscada' },
|
||||
{ title: 'Emparejador de música y estado de ánimo', desc: 'Recomienda la combinación musical perfecta según ánimo y contexto' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'Guía para paseos urbanos', desc: 'Explora la ciudad como una persona local y descubre lugares ocultos' },
|
||||
{ title: 'Generador de diario emocional de viaje', desc: 'Convierte fotos y emociones de viaje en relatos y recuerdos bellos' },
|
||||
{ title: 'Acompañante para viajar en solitario', desc: 'Ofrece compañía, consejos y seguridad para viajar solo' },
|
||||
{ title: 'Vista previa del ambiente del destino', desc: 'Permite sentir el destino antes de salir y entrar en ambiente' },
|
||||
{ title: 'Guía de ambiente para fotografía de viaje', desc: 'Ayuda a tomar fotos con historia según escena y luz' }
|
||||
],
|
||||
'health': [
|
||||
{ title: 'Activador de motivación deportiva', desc: 'Da el empujón justo cuando no apetece moverse' },
|
||||
{ title: 'Cocina de inspiración saludable', desc: 'Genera recetas saludables y reparadoras según ánimo e ingredientes' },
|
||||
{ title: 'Optimizador de ambiente para dormir mejor', desc: 'Crea un entorno de sueño de calidad desde lo ambiental hasta lo psicológico' },
|
||||
{ title: 'Guía de conciencia corporal', desc: 'Guía la atención hacia señales del cuerpo y fortalece la conexión cuerpo-mente' },
|
||||
{ title: 'Recordatorio de autocuidado', desc: 'Recuerda detenerse y cuidarse en medio del ajetreo' }
|
||||
],
|
||||
'learning': [
|
||||
{ title: 'Guía gamificada de exploración del conocimiento', desc: 'Convierte el aprendizaje aburrido en una aventura de exploración' },
|
||||
{ title: 'Compañero situacional para aprender idiomas', desc: 'Interpreta roles distintos para aprender idioma de forma natural en diálogos' },
|
||||
{ title: 'Asistente para satisfacer la curiosidad', desc: 'Responde ideas curiosas y alimenta la curiosidad por el mundo' },
|
||||
{ title: 'Inspirador de notas de lectura', desc: 'Ayuda a ordenar reflexiones de lectura y encontrar nuevos ángulos' },
|
||||
{ title: 'Creador de ambiente para compartir conocimiento', desc: 'Convierte lo aprendido en contenido interesante para compartir' }
|
||||
],
|
||||
'relationship': [
|
||||
{ title: 'Coach de comunicación para relaciones íntimas', desc: 'Ayuda a expresar emociones difíciles y mejorar relaciones cercanas' },
|
||||
{ title: 'Asistente de cuidado familiar', desc: 'Recuerda cuidar a la familia y ofrece sugerencias de interacción cálida' },
|
||||
{ title: 'Creador de ambiente para mantener amistades', desc: 'Ayuda a sostener amistades a distancia y crear temas comunes' },
|
||||
{ title: 'Planificador de confesiones y sorpresas', desc: 'Diseña sorpresas y momentos románticos memorables para personas importantes' },
|
||||
{ title: 'Guía para suavizar conflictos', desc: 'Ofrece consejos y frases para aliviar tensiones relacionales' }
|
||||
],
|
||||
'pet': [
|
||||
{ title: 'Diario antropomórfico de mascotas', desc: 'Genera diarios desde la perspectiva de la mascota y registra momentos cálidos' },
|
||||
{ title: 'Intérprete del comportamiento animal', desc: 'Interpreta lenguaje conductual y profundiza el vínculo con la mascota' },
|
||||
{ title: 'Planificador de tiempo de calidad con mascotas', desc: 'Diseña actividades creativas para interactuar y fortalecer el afecto' },
|
||||
{ title: 'Generador de historias conmemorativas de mascotas', desc: 'Convierte fotos y recuerdos de la mascota en historias cálidas' },
|
||||
{ title: 'Guía tranquila para nuevos cuidadores', desc: 'Ofrece compañía y orientación amable a nuevos dueños de mascotas' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'Asistente de conciencia emocional del consumo', desc: 'Detecta emociones detrás de compras impulsivas y construye una visión saludable del consumo' },
|
||||
{ title: 'Motivación visual para metas de ahorro', desc: 'Convierte metas de ahorro en progreso visual hacia sueños' },
|
||||
{ title: 'Aprendizaje ligero de finanzas personales', desc: 'Enseña finanzas de manera ligera y entretenida' },
|
||||
{ title: 'Aliviador de ansiedad financiera', desc: 'Ofrece apoyo emocional y consejos prácticos ante presión financiera' },
|
||||
{ title: 'Juego de inversión de bajo monto', desc: 'Permite experimentar la inversión de forma gamificada y con menor barrera de entrada' }
|
||||
],
|
||||
'career': [
|
||||
{ title: 'Acompañante para la confusión profesional', desc: 'Escucha, explora y orienta durante etapas de duda profesional' },
|
||||
{ title: 'Activador de sentido de logro laboral', desc: 'Ayuda a descubrir valor y sentido en el trabajo y reavivar entusiasmo' },
|
||||
{ title: 'Asistente de ambiente social en el trabajo', desc: 'Propone temas ligeros y consejos de interacción para el entorno laboral' },
|
||||
{ title: 'Generador de inspiración para proyectos paralelos', desc: 'Activa ideas de side projects según intereses y habilidades' },
|
||||
{ title: 'Estación de confianza antes de entrevistas', desc: 'Ofrece preparación psicológica y ánimo antes de entrevistas' }
|
||||
],
|
||||
'home': [
|
||||
{ title: 'Diseñador de ambiente para el hogar', desc: 'Diseña ambientes domésticos según estado de ánimo y estación' },
|
||||
{ title: 'Guía de transformación estacional del hogar', desc: 'Renueva la decoración por temporada para mantener frescura' },
|
||||
{ title: 'Magia para espacios pequeños', desc: 'Hace que los espacios pequeños se sientan cómodos y cálidos' },
|
||||
{ title: 'Creador de rituales domésticos', desc: 'Crea rituales para actividades cotidianas del hogar' },
|
||||
{ title: 'Acompañamiento psicológico para decluttering', desc: 'Ofrece apoyo psicológico y consejos de decisión al ordenar objetos' }
|
||||
],
|
||||
'food': [
|
||||
{ title: 'Cocina reparadora para comer a solas', desc: 'Diseña comidas sencillas y reconfortantes para quienes viven solos' },
|
||||
{ title: 'Diseño de ambiente para mesas festivas', desc: 'Diseña mesas con ritual para días especiales' },
|
||||
{ title: 'Emparejador de cocina y estado de ánimo', desc: 'Recomienda alimentos y preparaciones según el ánimo actual' },
|
||||
{ title: 'Generador de confianza para principiantes en cocina', desc: 'Ofrece ánimo cálido y recetas sencillas a quienes empiezan desde cero' },
|
||||
{ title: 'Guía de ambiente para fotografía gastronómica', desc: 'Hace que la comida casera también se vea apetecible en fotos' }
|
||||
],
|
||||
'fashion': [
|
||||
{ title: 'Mood board del outfit de hoy', desc: 'Genera inspiración de vestimenta según clima, ocasión y ánimo' },
|
||||
{ title: 'Estilista de armario cápsula', desc: 'Crea infinitas combinaciones con prendas limitadas' },
|
||||
{ title: 'Viaje de exploración del estilo personal', desc: 'Ayuda a descubrir y construir un estilo personal único' },
|
||||
{ title: 'Creativo para reinventar ropa antigua', desc: 'Da nueva inspiración para combinar ropa antigua' },
|
||||
{ title: 'Asesor de look para ocasiones especiales', desc: 'Diseña looks que den confianza para momentos importantes' }
|
||||
]
|
||||
}
|
||||
|
||||
// Mapa predefinido de recomendaciones según ambiente y sensación
|
||||
const recommendationMap = {
|
||||
// Ambiente: reparador
|
||||
'healing': {
|
||||
'relax': ['emotion', 'lifestyle', 'health', 'home'],
|
||||
'inspire': ['creative', 'growth', 'learning', 'entertainment'],
|
||||
'connect': ['relationship', 'social', 'pet', 'emotion'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Ambiente: crecimiento
|
||||
'growth': {
|
||||
'relax': ['growth', 'learning', 'creative', 'health'],
|
||||
'inspire': ['career', 'learning', 'creative', 'growth'],
|
||||
'connect': ['social', 'relationship', 'career', 'learning'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Ambiente: social
|
||||
'social': {
|
||||
'relax': ['social', 'pet', 'food', 'home'],
|
||||
'inspire': ['social', 'creative', 'entertainment', 'travel'],
|
||||
'connect': ['relationship', 'social', 'pet', 'travel'],
|
||||
'escape': ['social', 'travel', 'entertainment', 'creative']
|
||||
},
|
||||
// Ambiente: exploración
|
||||
'explore': {
|
||||
'relax': ['travel', 'creative', 'lifestyle', 'food'],
|
||||
'inspire': ['travel', 'creative', 'learning', 'entertainment'],
|
||||
'connect': ['travel', 'social', 'relationship', 'pet'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Ambiente: cotidiano
|
||||
'daily': {
|
||||
'relax': ['lifestyle', 'home', 'health', 'emotion'],
|
||||
'inspire': ['creative', 'food', 'fashion', 'home'],
|
||||
'connect': ['relationship', 'social', 'pet', 'lifestyle'],
|
||||
'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
|
||||
}
|
||||
}
|
||||
|
||||
const vibeOptions = [
|
||||
{ label: 'Reparador', value: 'healing', desc: 'Cálido, calmante, sanador' },
|
||||
{ label: 'Crecimiento', value: 'growth', desc: 'Progreso, avance, transformación' },
|
||||
{ label: 'Social', value: 'social', desc: 'Conexión, compartir, interacción' },
|
||||
{ label: 'Exploración', value: 'explore', desc: 'Curiosidad, aventura, descubrimiento' },
|
||||
{ label: 'Cotidiano', value: 'daily', desc: 'Sencillo, real, presente' }
|
||||
]
|
||||
|
||||
const feelingOptions = [
|
||||
{ label: 'Quiero relajarme', value: 'relax', desc: 'Aliviar presión, despejar la mente' },
|
||||
{ label: 'Busco inspiración', value: 'inspire', desc: 'Activar creatividad, encontrar ideas' },
|
||||
{ label: 'Deseo conexión', value: 'connect', desc: 'Conectar con personas, resonar emocionalmente' },
|
||||
{ label: 'Escapar por un momento', value: 'escape', desc: 'Salir de la realidad, vivir inmersión' }
|
||||
]
|
||||
|
||||
const scenarios = [
|
||||
{ key: 'lifestyle', name: 'Estilo de vida', anchor: '#_1-estilo-de-vida' },
|
||||
{ key: 'emotion', name: 'Acompañamiento emocional', anchor: '#_2-acompañamiento-emocional' },
|
||||
{ key: 'entertainment', name: 'Entretenimiento y ocio', anchor: '#_3-entretenimiento-y-ocio' },
|
||||
{ key: 'growth', name: 'Crecimiento personal', anchor: '#_4-crecimiento-personal' },
|
||||
{ key: 'social', name: 'Interacción social', anchor: '#_5-interacción-social' },
|
||||
{ key: 'creative', name: 'Expresión creativa', anchor: '#_6-expresión-creativa' },
|
||||
{ key: 'travel', name: 'Exploración de viajes', anchor: '#_7-exploración-de-viajes' },
|
||||
{ key: 'health', name: 'Salud física y mental', anchor: '#_8-salud-física-y-mental' },
|
||||
{ key: 'learning', name: 'Exploración del conocimiento', anchor: '#_9-exploración-del-conocimiento' },
|
||||
{ key: 'relationship', name: 'Gestión de relaciones', anchor: '#_10-gestión-de-relaciones' },
|
||||
{ key: 'pet', name: 'Acompañamiento de mascotas', anchor: '#_11-acompañamiento-de-mascotas' },
|
||||
{ key: 'finance', name: 'Salud financiera', anchor: '#_12-salud-financiera' },
|
||||
{ key: 'career', name: 'Desarrollo profesional', anchor: '#_13-desarrollo-profesional' },
|
||||
{ key: 'home', name: 'Espacio del hogar', anchor: '#_14-espacio-del-hogar' },
|
||||
{ key: 'food', name: 'Cocina y gastronomía', anchor: '#_15-cocina-y-gastronomía' },
|
||||
{ key: 'fashion', name: 'Estilo y vestimenta', anchor: '#_16-estilo-y-vestimenta' }
|
||||
]
|
||||
|
||||
// Calcula recomendaciones tomando elementos aleatorios del pool de temas
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!vibePoint.value || !feeling.value) return []
|
||||
|
||||
const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
|
||||
const topics = []
|
||||
|
||||
// Toma aleatoriamente 1-2 temas de cada escenario recomendado
|
||||
keys.forEach(key => {
|
||||
const scenario = scenarios.find(item => item.key === key)
|
||||
const scenarioTopics = topicPool[key] || []
|
||||
|
||||
if (scenario && scenarioTopics.length > 0) {
|
||||
// Toma aleatoriamente 1-2 temas
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
scenarioKey: key,
|
||||
scenarioName: scenario.name,
|
||||
scenarioAnchor: scenario.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Orden aleatorio y límite total
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// Obtiene la descripción de la selección actual
|
||||
const currentSelection = computed(() => {
|
||||
const vibe = vibeOptions.find(i => i.value === vibePoint.value)
|
||||
const feel = feelingOptions.find(p => p.value === feeling.value)
|
||||
return {
|
||||
vibe: vibe?.label || '',
|
||||
feeling: feel?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// Retrasa el desplazamiento para asegurar que el DOM esté actualizado
|
||||
setTimeout(() => {
|
||||
// Intenta buscar por ID (soporta varios formatos)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// Si no se encuentra, prueba otros formatos posibles
|
||||
if (!element) {
|
||||
// Intenta quitar el prefijo de guion bajo
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// Si aún no se encuentra, busca por texto del encabezado
|
||||
if (!element) {
|
||||
// Extrae el nombre del escenario desde el ancla
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// Coincidencia exacta o parcial
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// Resalta el bloque de destino
|
||||
element.style.backgroundColor = '#fdf2f8'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
vibePoint.value = ''
|
||||
feeling.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# Referencia de inspiración para escenarios de consumo B2C
|
||||
|
||||
## Introducción del capítulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Aplicaciones B2C', 'Estilo de vida', 'Experiencia emocional', 'Creación de ambiente']" coreOutput="Descubrir más de 15 inspiraciones de escenarios de vida" expectedOutput="Encontrar una dirección de producto que emocione a los usuarios">
|
||||
|
||||
Este documento resume <strong>direcciones creativas de aplicación de modelos LLM en escenarios de consumo B2C</strong>. A diferencia de los productos B2B, que se centran en eficiencia y puntos de dolor, los productos B2C se enfocan más en <strong>crear sensaciones, sugestiones psicológicas y ambiente</strong>, para que el usuario obtenga resonancia emocional y una experiencia agradable.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Selección rápida de ambiente
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Encuentra la inspiración que te toca</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Elige el ambiente que quieres y tu sensación actual. El sistema recomendará escenarios relacionados; haz clic en una etiqueta para saltar a la sección correspondiente.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="vibePoint" placeholder="Elige tipo de ambiente" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in vibeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="feeling" placeholder="Elige tu sensación actual" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in feelingOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
|
||||
Escenarios recomendados para {{ currentSelection.vibe }} × {{ currentSelection.feeling }}:
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<el-tag
|
||||
v-for="topic in recommendationTopics"
|
||||
:key="topic.title"
|
||||
type="danger"
|
||||
effect="light"
|
||||
style="cursor: pointer; margin-bottom: 4px;"
|
||||
@click="scrollToAnchor(topic.scenarioAnchor)"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
|
||||
Elegir de nuevo
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
---
|
||||
|
||||
## 1. Estilo de vida
|
||||
|
||||
> 💡 **Idea central**: convertir la rutina cotidiana en una experiencia con rituales y crear belleza en los detalles
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Asistente de despertar con ritual matutino | Integra API de clima y datos de calendario; un LLM genera planes matutinos personalizados; reproduce música a medida con altavoces inteligentes y enciende las luces gradualmente |
|
||||
| 2 | Creador de ambiente para vivir solo | Se conecta a dispositivos de hogar inteligente (luces, audio, difusor); el LLM ajusta parámetros según la hora y el estado de ánimo; aprende preferencias para optimizar continuamente |
|
||||
| 3 | Generador de planes reparadores para quedarse en casa el fin de semana | Se conecta a APIs de streaming para obtener listas de contenido y combina historial de preferencias para proponer película + comida + ambientación |
|
||||
| 4 | Radio calmante antes de dormir | Usa TTS para generar historias suaves, mezcla ruido blanco y reduce el volumen gradualmente; ajusta el contenido según datos de sueño |
|
||||
| 5 | Capturador de inspiración estética cotidiana | Analiza fotos del entorno mediante reconocimiento de imagen, genera sugerencias estéticas con LLM y recomienda contenido al estilo Pinterest/Xiaohongshu |
|
||||
|
||||
---
|
||||
|
||||
## 2. Acompañamiento emocional
|
||||
|
||||
> 💡 **Idea central**: aceptación y compañía incondicionales, como un contenedor amable para las emociones
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Confidente nocturno | Cifrado de extremo a extremo para proteger la privacidad; análisis emocional con LLM; memoria de largo plazo para guardar historias del usuario y acompañamiento en diálogos continuos |
|
||||
| 2 | Acompañante para sanar una ruptura | Algoritmo de identificación de etapas emocionales; apoyo por fases (desahogo → descarga → reconstrucción); recuperación RAG sobre una base de conocimiento psicológica |
|
||||
| 3 | Coach de respiración contra la ansiedad | Entrada de datos de biosensores (ritmo cardiaco/respiración), monitoreo en tiempo real del nivel de ansiedad, guía de respiración por voz y relajación muscular progresiva |
|
||||
| 4 | Mentor para reconstruir la confianza | Marco conversacional de psicología positiva; registro y retroalimentación sobre pequeños logros; técnicas de reestructuración cognitiva para cambiar el diálogo interno negativo |
|
||||
| 5 | Interpretación inteligente del diario emocional | Modelo NLP de reconocimiento emocional, análisis de series temporales para detectar patrones; visualización del mapa emocional y alertas predictivas |
|
||||
|
||||
---
|
||||
|
||||
## 3. Entretenimiento y ocio
|
||||
|
||||
> 💡 **Idea central**: crear experiencias inmersivas para que el entretenimiento sea un refugio emocional
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | DM inmersivo para juegos de misterio | El LLM genera ramificaciones de trama en tiempo real, usa síntesis de voz para interpretar NPC, ajusta dificultad y ritmo según la reacción de los jugadores; renderizado de escenas AR/VR |
|
||||
| 2 | NPC con alma en juegos de mundo abierto | Base de datos de memoria a largo plazo para historial de interacción; diálogos personalizados con LLM; computación afectiva para respuestas emocionales creíbles |
|
||||
| 3 | Generación de podcasts personalizados | Crea contenido exclusivo según el grafo de intereses del usuario; TTS clona voces preferidas; interacción en tiempo real para responder preguntas de oyentes |
|
||||
| 4 | Equipo de ambiente para concierto virtual | Renderizado de avatares, interacción en tiempo real con mensajes, varitas luminosas y objetos de apoyo virtuales; audio espacial para sensación de presencia |
|
||||
| 5 | Compañero de cocreación de novela interactiva | El LLM genera trama en tiempo real; las elecciones del usuario cambian la historia; múltiples finales y relaciones dinámicas entre personajes |
|
||||
|
||||
---
|
||||
|
||||
## 4. Crecimiento personal
|
||||
|
||||
> 💡 **Idea central**: crecer no es una penitencia, sino un viaje interesante de autodescubrimiento
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Testigo del crecimiento personal | Línea de tiempo visual para mostrar el progreso; marcado automático de hitos; comparativas de "mi yo de antes" frente a "mi yo actual" |
|
||||
| 2 | Coach gamificado de hábitos | Mecánicas de juego (experiencia, niveles, insignias), clasificaciones sociales y coach de IA con rol narrativo, por ejemplo "mentor de aventuras" |
|
||||
| 3 | Emparejador de compañeros para aprender habilidades | Algoritmo de matching por intereses y metas de aprendizaje, comunidades de grupos de estudio y mecanismo de registro con supervisión mutua |
|
||||
| 4 | Descubridor diario de pequeñas alegrías | Reconocimiento de imágenes para encontrar momentos bonitos; guía de gratitude journal; revisión semanal de momentos positivos |
|
||||
| 5 | Simulador de experiencias de vida | Simula resultados de decisiones con tramas ramificadas, compara vidas paralelas y visualiza consecuencias |
|
||||
|
||||
---
|
||||
|
||||
## 5. Interacción social
|
||||
|
||||
> 💡 **Idea central**: hacer que socializar sea ligero y natural, encontrando formas cómodas de conexión
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Generador de temas rompehielos | Recomendación inteligente de temas según ocasión y participantes; análisis de conversación en tiempo real para sugerir continuidad; rescate en momentos incómodos |
|
||||
| 2 | Redactor de ambiente para publicaciones sociales | Análisis de imágenes, textos en varios estilos con LLM (artístico/humorístico/profundo); recomendación inteligente de emojis y maquetación |
|
||||
| 3 | Planificador de ambiente para citas | Genera planes de cita según intereses de ambas partes; recomienda restaurantes/actividades y temas de conversación; alertas de clima y tráfico |
|
||||
| 4 | Animador de reuniones remotas | Biblioteca de juegos online, generador de actividades rompehielos, ruleta de temas; fondos virtuales y filtros para reforzar el ambiente |
|
||||
| 5 | Asistente de gestión de energía social | Evalúa el desgaste tras actividades sociales, sugiere recuperación (actividades en solitario) y planifica inteligentemente el calendario social |
|
||||
|
||||
---
|
||||
|
||||
## 6. Expresión creativa
|
||||
|
||||
> 💡 **Idea central**: todas las personas tienen creatividad; solo necesita despertarse
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Kit de emergencia contra el bloqueo creativo | Algoritmo de asociaciones entre dominios, generación de estímulos aleatorios, biblioteca de prompts creativos y herramienta de expansión tipo mapa mental |
|
||||
| 2 | Guía de exploración del estilo personal | Análisis de imagen para reconocer el estilo actual; recomendaciones de tendencias; prueba virtual de ropa/maquillaje; línea de evolución del estilo |
|
||||
| 3 | Asesor estético para journaling y diarios | Recomendación de plantillas de maquetación, generación de paletas, sugerencias decorativas, reconocimiento de escritura manual y embellecimiento de contenido |
|
||||
| 4 | Guía de composición y ambiente fotográfico | Reconocimiento de escena, sugerencias de composición, filtros recomendados, ajuste inteligente de parámetros de edición y ruta de aprendizaje fotográfico |
|
||||
| 5 | Emparejador de música y estado de ánimo | Análisis emocional de música, detección del estado de ánimo, listas personalizadas e historias/contexto de las canciones |
|
||||
|
||||
---
|
||||
|
||||
## 7. Exploración de viajes
|
||||
|
||||
> 💡 **Idea central**: viajar no es solo ver paisajes, sino sentir distintas formas de vida
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Guía para paseos urbanos | Agrega contenido de expertos locales, recomienda lugares poco conocidos, ofrece navegación AR, traducción en tiempo real y explicación por voz |
|
||||
| 2 | Generador de diario emocional de viaje | Clasifica y selecciona fotos automáticamente, genera relatos de viaje con LLM, marca ubicaciones en una línea de tiempo y crea videos con un clic |
|
||||
| 3 | Acompañante para viajar en solitario | Compartición de ubicación en tiempo real, alertas de seguridad, contactos de emergencia locales, guía de IA por voz y comunidad para viajeros solos |
|
||||
| 4 | Vista previa del ambiente del destino | Panoramas VR/360°, simulación de sonidos y aromas locales, contexto cultural y experiencia virtual de "probar vivir allí" |
|
||||
| 5 | Guía de ambiente para fotografía de viaje | Recordatorios de hora dorada, líneas de composición, puntos fotográficos locales y sugerencias de color grading |
|
||||
|
||||
---
|
||||
|
||||
## 8. Salud física y mental
|
||||
|
||||
> 💡 **Idea central**: la salud no es una meta, sino una forma amable de cuidarse
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Activador de motivación deportiva | Recomienda tipos de ejercicio según el estado del usuario, ofrece microejercicios de 5 minutos, retos gamificados y registro social de actividad |
|
||||
| 2 | Cocina de inspiración saludable | Reconocimiento de ingredientes en la nevera, recetas personalizadas, análisis nutricional y guía de cocina paso a paso |
|
||||
| 3 | Optimizador de ambiente para dormir mejor | Analiza datos de sueño, genera rituales nocturnos, sugiere mejoras ambientales (temperatura/humedad/luz) y ofrece despertar inteligente |
|
||||
| 4 | Guía de conciencia corporal | Meditación de escaneo corporal, relación entre emociones y partes del cuerpo, ejercicios de conexión cuerpo-mente y visualización de biofeedback |
|
||||
| 5 | Recordatorio de autocuidado | Monitorea intensidad de trabajo, recuerda descansos, sugiere microcuidados (beber agua/estirar/respirar) y registra autocuidado |
|
||||
|
||||
---
|
||||
|
||||
## 9. Exploración del conocimiento
|
||||
|
||||
> 💡 **Idea central**: aprender es una aventura interminable, y la curiosidad es la mejor maestra
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Guía gamificada de exploración del conocimiento | Visualiza mapas de conceptos, rutas de aprendizaje por niveles, sistema de insignias y mentor de IA con rol narrativo |
|
||||
| 2 | Compañero situacional para aprender idiomas | El LLM interpreta distintos roles en conversaciones, corrige pronunciación, explica contexto cultural y simula situaciones inmersivas |
|
||||
| 3 | Asistente para satisfacer la curiosidad | Conexión a Wikipedia/grafos de conocimiento, explicación simple de conceptos complejos, recomendaciones relacionadas y registro de curiosidades |
|
||||
| 4 | Inspirador de notas de lectura | Analiza libros, extrae y relaciona ideas, recomienda ángulos de reflexión, plantillas y embellecimiento de notas |
|
||||
| 5 | Creador de ambiente para compartir conocimiento | Genera tarjetas de conocimiento, optimiza copy para compartir, mejora visuales y ofrece retroalimentación de datos sociales |
|
||||
|
||||
---
|
||||
|
||||
## 10. Gestión de relaciones
|
||||
|
||||
> 💡 **Idea central**: las buenas relaciones requieren atención, y atenderlas no tiene por qué ser complicado
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Coach de comunicación para relaciones íntimas | Genera plantillas de expresión emocional, guía comunicación no violenta, ofrece frases para resolver conflictos y evalúa salud relacional |
|
||||
| 2 | Asistente de cuidado familiar | Recordatorios de fechas importantes (cumpleaños/aniversarios), sugerencias de mensajes afectivos, actividades familiares y creación de álbum familiar |
|
||||
| 3 | Creador de ambiente para mantener amistades | Registro de interacciones con amigos, temas comunes recomendados, organización de reuniones remotas y generación de línea de tiempo de recuerdos |
|
||||
| 4 | Planificador de confesiones y sorpresas | Genera planes personalizados de sorpresa, recomienda regalos, sugiere frases románticas, cronograma y recordatorios |
|
||||
| 5 | Guía para suavizar conflictos | Frases para bajar la intensidad emocional, guía para ponerse en el lugar del otro, pasos de reconciliación y seguimiento de reparación |
|
||||
|
||||
---
|
||||
|
||||
## 11. Acompañamiento de mascotas
|
||||
|
||||
> 💡 **Idea central**: las mascotas son familia, y su compañía merece ser registrada y valorada
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Diario antropomórfico de mascotas | Analiza comportamiento, genera diarios en primera persona, añade imágenes automáticamente y crea un "muro social" para la mascota |
|
||||
| 2 | Intérprete del comportamiento animal | Analiza videos de comportamiento, alerta sobre salud, ofrece consejos de entrenamiento y base de conocimiento por raza |
|
||||
| 3 | Planificador de tiempo de calidad con mascotas | Recomienda actividades, tutoriales de juguetes DIY, lugares pet-friendly y matching social para mascotas |
|
||||
| 4 | Generador de historias conmemorativas de mascotas | Selecciona fotos y videos, genera historias en línea de tiempo, añade música y crea álbumes/videos conmemorativos automáticamente |
|
||||
| 5 | Guía tranquila para nuevos cuidadores | Guía de cuidado por etapas, respuestas a problemas frecuentes, manejo de emergencias y comunidad de apoyo para principiantes |
|
||||
|
||||
---
|
||||
|
||||
## 12. Salud financiera
|
||||
|
||||
> 💡 **Idea central**: la libertad financiera no es el objetivo; la salud financiera sí
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Asistente de conciencia emocional del consumo | Analiza registros de gasto, relaciona emociones y consumo, alerta sobre compras impulsivas y propone satisfacciones alternativas |
|
||||
| 2 | Motivación visual para metas de ahorro | Visualiza progreso, renderiza escenas de sueños, celebra hitos y gamifica el hábito de ahorrar |
|
||||
| 3 | Aprendizaje ligero de finanzas personales | Entrega conocimiento fragmentado, casos situacionales, preguntas interactivas, pruebas y certificados |
|
||||
| 4 | Aliviador de ansiedad financiera | Evalúa salud financiera, ofrece técnicas de gestión del estrés, planes de pequeños pasos y apoyo psicológico financiero |
|
||||
| 5 | Juego de inversión de bajo monto | Simulación de inversión virtual, educación de riesgos, juego de portafolio y guía hacia inversión real de bajo monto |
|
||||
|
||||
---
|
||||
|
||||
## 13. Desarrollo profesional
|
||||
|
||||
> 💡 **Idea central**: la carrera profesional no es una vía fija, sino un territorio abierto para explorar
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Acompañante para la confusión profesional | Evaluación de intereses, inventario de habilidades, recomendaciones de información sectorial y conversaciones con mentor profesional |
|
||||
| 2 | Activador de sentido de logro laboral | Registro de resultados, extracción de valor, visualización de logros y recopilación de feedback positivo de colegas/clientes |
|
||||
| 3 | Asistente de ambiente social en el trabajo | Recomendación de temas profesionales, técnicas de networking, eventos del sector y optimización de contenido en LinkedIn |
|
||||
| 4 | Generador de inspiración para proyectos paralelos | Matching entre habilidades, intereses y demanda de mercado; casos de side projects, guía de inicio y comunidad |
|
||||
| 5 | Estación de confianza antes de entrevistas | Entrevistas simuladas, preparación de preguntas frecuentes, técnicas de confianza y sugerencias de imagen |
|
||||
|
||||
---
|
||||
|
||||
## 14. Espacio del hogar
|
||||
|
||||
> 💡 **Idea central**: el hogar no es solo un lugar donde vivir, sino un refugio para la mente
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Diseñador de ambiente para el hogar | Analiza fotos del espacio, recomienda estilos, muebles/decoración y previsualización AR |
|
||||
| 2 | Guía de transformación estacional del hogar | Recomienda temas por temporada, organización y exhibición, decoración festiva y listas de compra |
|
||||
| 3 | Magia para espacios pequeños | Algoritmos de optimización espacial, muebles multifuncionales, técnicas de orden y trucos de ampliación visual |
|
||||
| 4 | Creador de rituales domésticos | Diseño de rituales cotidianos (mañana/noche/fin de semana), recordatorios de ejecución y feedback sobre efecto |
|
||||
| 5 | Acompañamiento psicológico para decluttering | Evalúa valor emocional de objetos, guía pasos de descarte, ofrece apoyo psicológico y recomienda canales de donación/reciclaje |
|
||||
|
||||
---
|
||||
|
||||
## 15. Cocina y gastronomía
|
||||
|
||||
> 💡 **Idea central**: la comida es el lenguaje del amor, y cocinar es una forma de expresarlo
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Cocina reparadora para comer a solas | Reconocimiento de ingredientes en la nevera, recetas sencillas, guía paso a paso y estética de emplatado individual |
|
||||
| 2 | Diseño de ambiente para mesas festivas | Menús temáticos, propuestas de montaje de mesa, técnicas de ambientación y optimización de experiencia de invitados |
|
||||
| 3 | Emparejador de cocina y estado de ánimo | Algoritmo emoción-comida, recetas para regulación emocional, recomendación de comfort food y guía terapéutica de cocina |
|
||||
| 4 | Generador de confianza para principiantes en cocina | Recetas ultrafáciles, técnicas de rescate ante errores, frases de confianza y progresión gradual de dificultad |
|
||||
| 5 | Guía de ambiente para fotografía gastronómica | Consejos de emplatado, uso de luz natural, ángulos de captura, filtros y sugerencias de postproducción |
|
||||
|
||||
---
|
||||
|
||||
## 16. Estilo y vestimenta
|
||||
|
||||
> 💡 **Idea central**: vestirse es autoexpresión, y el estilo es la manifestación externa de lo interior
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Mood board del outfit de hoy | Recomendaciones combinando clima, ocasión y estado de ánimo; prueba virtual, inspiración de conjuntos y gestión del armario |
|
||||
| 2 | Estilista de armario cápsula | Inventario del armario, combinaciones de prendas, planes de múltiples usos y sugerencias de compra para cubrir vacíos |
|
||||
| 3 | Viaje de exploración del estilo personal | Test de estilo, recomendación de referentes, ruta de evolución y construcción de confianza |
|
||||
| 4 | Creativo para reinventar ropa antigua | Inspiración para transformar ropa, nuevas combinaciones, detalles con accesorios y moda sostenible |
|
||||
| 5 | Asesor de look para ocasiones especiales | Interpretación del dress code, generación de propuestas, consejos de maquillaje/peinado y coordinación general |
|
||||
|
||||
---
|
||||
|
||||
## Principios centrales para diseñar productos B2C
|
||||
|
||||
### 1. De "función" a "sensación"
|
||||
|
||||
Los productos B2B se preguntan "qué problema resuelve esta función"; los productos B2C se preguntan "qué sensación aporta esta función".
|
||||
|
||||
| Pensamiento B2B | Pensamiento B2C |
|
||||
|---------|---------|
|
||||
| Mejorar la eficiencia | Ahorrar tiempo para hacer lo que gusta |
|
||||
| Reducir costes | Hacer que cada euro valga la pena |
|
||||
| Resolver puntos de dolor | Crear experiencias agradables |
|
||||
| Funcionalidad completa | Sensación bien lograda |
|
||||
|
||||
### 2. Tres niveles para crear ambiente
|
||||
|
||||
**Nivel sensorial**: diseño visual, auditivo y táctil
|
||||
- Colores cálidos
|
||||
- Sonidos relajantes
|
||||
- Animaciones fluidas
|
||||
|
||||
**Nivel emocional**: resonancia y guía emocional
|
||||
- Comprender el estado de ánimo del usuario
|
||||
- Ofrecer apoyo emocional
|
||||
- Crear emociones positivas
|
||||
|
||||
**Nivel de significado**: reconocimiento de valor y pertenencia
|
||||
- Hacer que el usuario se sienta comprendido
|
||||
- Crear sentido de pertenencia
|
||||
- Dar significado a la acción
|
||||
|
||||
### 3. El poder de la sugestión psicológica
|
||||
|
||||
El copy y el diseño de un producto B2C siempre transmiten sugestiones psicológicas:
|
||||
|
||||
- **Sugestión positiva**: "ya lo estás haciendo bien", "ve despacio, no pasa nada"
|
||||
- **Sugestión de pertenencia**: "muchas personas sienten lo mismo", "no estás solo"
|
||||
- **Sugestión de crecimiento**: "cada intento es progreso", "estás mejorando"
|
||||
|
||||
### 4. Ayudar al usuario a ser una mejor versión de sí mismo
|
||||
|
||||
Los mejores productos B2C no cambian al usuario; le ayudan a convertirse en la persona que quiere ser.
|
||||
|
||||
- No es "deberías...", sino "puedes..."
|
||||
- No es "tienes que...", sino "si quieres..."
|
||||
- No es "aún no eres suficiente...", sino "ya has..."
|
||||
|
||||
---
|
||||
|
||||
> 🌟 **Recuerda**: los usuarios B2C no compran funciones, sino sensaciones; no compran herramientas, sino compañía; no compran servicios, sino comprensión.
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,544 @@
|
||||
---
|
||||
title: 'Modelo Double Diamond: primero haz lo correcto, luego hazlo bien'
|
||||
description: 'Comprende las cuatro etapas de Discover, Define, Develop, Deliver para evitar crear prototipos antes de entender bien el problema.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>1.5 horas</strong>'
|
||||
</script>
|
||||
|
||||
# Modelo Double Diamond: primero haz lo correcto, luego hazlo bien
|
||||
|
||||
<a id="top-dd"></a>
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Double Diamond', 'Pensamiento de diseno', 'Analisis de necesidades', 'Diseno de soluciones']"
|
||||
coreOutput="1 definicion de problema mas clara y 1 punto de entrada de validacion mas razonable"
|
||||
expectedOutput="Dejar de precipitarse a dibujar prototipos, sabiendo primero pensar claramente en el problema y luego comparar soluciones"
|
||||
>
|
||||
|
||||
Muchas personas, la primera vez que hacen un producto, caen en la trampa mas facil: no es que "no se esfuercen lo suficiente", sino que entran demasiado rapido en la solucion.
|
||||
|
||||
Apenas les viene una direccion a la mente, ya estan pensando en como dibujar la pagina, donde poner los botones, si conectar IA, si hacer login y registro, con que herramienta hacer el prototipo. Despues de un rato de trabajo, descubren que el problema mas fundamental no se ha pensado claramente: el usuario realmente tiene este punto de dolor? Vale la pena resolver este problema ahora? Crees que estas avanzando en el proyecto, pero en realidad solo estas acelerando en la direccion equivocada.
|
||||
|
||||
El modelo Double Diamond existe precisamente para evitar esta situacion.
|
||||
|
||||
Su recordatorio mas valioso es: **"hacer lo correcto" y "hacerlo bien" son dos etapas completamente diferentes.** Si aun no has aclarado el problema y te precipitas a hacer prototipos, normalmente solo haras la direccion equivocada mas completa.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimo
|
||||
**Objetivo**: Despues de leer, sabras mejor cuando hacer productos, cuando pensar primero en el problema y cuando empezar a pensar en soluciones y prototipos, evitando precipitarte en la direccion equivocada desde el principio.
|
||||
|
||||
**Accion**: Sigue los cuatro pasos `Discover -> Define -> Develop -> Deliver`, haciendo solo lo que corresponde a la etapa actual en cada paso.
|
||||
|
||||
**Resultado**: Obtendras una definicion de problema mas clara, varias soluciones comparables y una version minima verificable.
|
||||
|
||||
**Enlaces rapidos**: [Que es el Double Diamond](#dd-what) · [Primer diamante](#dd-first) · [Como te ayuda la IA](#dd-ai)
|
||||
:::
|
||||
|
||||
## Aprenderas lo siguiente
|
||||
|
||||
1. Que es el modelo Double Diamond, y por que es adecuado para personas sin experiencia al hacer productos
|
||||
2. Que hacen las cuatro etapas Discover, Define, Develop y Deliver respectivamente
|
||||
3. Como distinguir entre "ahora debo seguir divergiendo" y "ahora debo empezar a converger"
|
||||
4. Como usar el modelo Double Diamond en productos de IA, diseno de prototipos y validacion de necesidades
|
||||
|
||||
<a id="dd-what"></a>
|
||||
## [1. Que es exactamente el modelo Double Diamond](#top-dd)
|
||||
|
||||
El modelo Double Diamond es un marco clasico de proceso de diseno promovido por el **Design Council** del Reino Unido. Representa un proceso completo de diseno e innovacion como dos formas de diamante consecutivas.
|
||||
|
||||
La razon de ser "diamantes" es que cada diamante contiene dos acciones opuestas pero igualmente importantes:
|
||||
|
||||
- **Divergencia**: primero abrir el campo de vision, ver mas posibilidades
|
||||
- **Convergencia**: luego reducir el alcance, tomar decisiones y priorizar
|
||||
|
||||
Todo el proceso tiene cuatro pasos:
|
||||
|
||||
1. **Discover**: entender ampliamente a los usuarios, problemas, entorno y mercado
|
||||
2. **Define**: extraer de la gran cantidad de informacion el problema central que realmente vale la pena resolver
|
||||
3. **Develop**: explorar multiples soluciones alrededor del problema central
|
||||
4. **Deliver**: filtrar, prototipar, probar y entregar la solucion mas adecuada
|
||||
|
||||
Si comprimes estos cuatro pasos en una frase facil de recordar, seria:
|
||||
|
||||
- **Primer diamante**: primero aclarar que problema resolver exactamente
|
||||
- **Segundo diamante**: luego decidir con que solucion resolverlo
|
||||
|
||||
Que es exactamente lo que dijiste muy bien:
|
||||
|
||||
- **Primer diamante: hacer lo correcto**
|
||||
- **Segundo diamante: hacerlo bien**
|
||||
|
||||
## 2. Por que el modelo Double Diamond es especialmente adecuado para principiantes
|
||||
|
||||
El ritmo mas comun de los principiantes al hacer productos suele ser:
|
||||
|
||||
- Se les ocurre una idea
|
||||
- Les parece que esta direccion es genial
|
||||
- Empiezan inmediatamente a dibujar prototipos
|
||||
- Haciendo y haciendo, descubren que las funciones son cada vez mas
|
||||
- Al final no saben que problema estan resolviendo exactamente
|
||||
|
||||
El valor del modelo Double Diamond no esta en complicar el proceso, sino en **obligarte a separar "entender el problema" y "disenar la solucion".**
|
||||
|
||||
Esto suena muy comun, pero en realidad es muy importante. Porque muchos productos fracasados no es que la ejecucion no fuera seria, sino:
|
||||
|
||||
- Eligieron el problema equivocado
|
||||
- Malentendieron al usuario
|
||||
- Se bloquearon demasiado pronto en una solucion
|
||||
- Gastaron mucho tiempo en pulir detalles sin validar la direccion
|
||||
|
||||
El modelo Double Diamond te esta recordando constantemente:
|
||||
|
||||
- No porque una idea te parezca facil, asumas que el problema ya esta confirmado
|
||||
- No porque una solucion pueda implementarse, asumas que vale la pena hacerla
|
||||
- No porque un prototipo parezca completo, asumas que los usuarios realmente lo necesitaran
|
||||
|
||||
<a id="dd-first"></a>
|
||||
## [3. Primer diamante: hacer lo correcto](#top-dd)
|
||||
|
||||
El primer diamante se centra en **el problema en si**, no en la solucion.
|
||||
|
||||
Puedes entenderlo como una frase: **no te precipites, primero averigua si realmente vale la pena hacerlo.**
|
||||
|
||||
### 3.1 Discover: primero abre el espacio del problema
|
||||
|
||||
La tarea central de la fase Discover es **investigar ampliamente, no llegar rapido a conclusiones.**
|
||||
|
||||
Lo que normalmente se hace en este paso incluye:
|
||||
|
||||
- Ver como los usuarios actuan en escenarios reales
|
||||
- Entrevistar a usuarios potenciales, entender cuando fue la ultima vez que encontraron el problema
|
||||
- Observar como se las arreglan actualmente
|
||||
- Ver como manejan la competencia y las soluciones alternativas
|
||||
- Recoger informacion de mercado, procesos, restricciones y relaciones aguas arriba/aguas abajo
|
||||
|
||||
Muchas personas confunden Discover con "ver mas informacion". Pero lo mas critico es: **tienes que entender a las personas y los escenarios, no solo buscar un monton de informacion.**
|
||||
|
||||
Por ejemplo, si quieres hacer una herramienta de "IA que ayuda a organizar actas de reuniones", en la fase Discover deberias prestar mas atencion a:
|
||||
|
||||
- Despues de la reunion, donde duele mas exactamente al usuario
|
||||
- Es dificil tomar notas, organizarlas o sincronizarlas
|
||||
- Ahora escriben ellos mismos, le piden al becario, escuchan la grabacion, o simplemente no organizan
|
||||
- Que escenarios de reunion necesitan mas actas y cuales no las necesitan en absoluto
|
||||
|
||||
El objetivo mas importante de este paso no es llegar a una respuesta, sino **no asumir demasiado pronto que ya conoces la respuesta.**
|
||||
|
||||
### 3.2 Define: extraer el problema central de un monton de informacion
|
||||
|
||||
Si Discover abre el campo de vision, Define empieza a cerrarlo.
|
||||
|
||||
Lo que hay que hacer en la fase Define no es mantener todas las observaciones, sino preguntar:
|
||||
|
||||
- Cual es el problema que realmente merece la pena resolver primero
|
||||
- Que problema aparece con mas frecuencia, es el mas doloroso y el mas valioso
|
||||
- En que escenario unico debemos centrarnos en la primera version
|
||||
|
||||
El nucleo de este paso es converger un tema amplio en una definicion de problema clara.
|
||||
|
||||
Por ejemplo, al principio dices:
|
||||
|
||||
> Quiero hacer una herramienta con IA para mejorar la eficiencia de las reuniones.
|
||||
|
||||
En la fase Define, una mejor expresion podria ser:
|
||||
|
||||
> Primero resolvamos el problema de que los equipos de proyecto, despues de reuniones de colaboracion de 30 a 60 minutos, no pueden producir en 10 minutos un acta con tareas pendientes, responsables y fechas limite.
|
||||
|
||||
En este punto el problema empieza a aclararse:
|
||||
|
||||
- Quien es el usuario
|
||||
- Cual es el escenario
|
||||
- Cual es el punto de bloqueo
|
||||
- Cual es el criterio de exito
|
||||
|
||||
La esencia de Define es **converger de "hay muchos problemas" a "que problema resolver primero esta vez".**
|
||||
|
||||
## 4. Segundo diamante: hacerlo bien
|
||||
|
||||
Cuando completas el primer diamante, solo entonces es realmente apropiado entrar en el segundo. Porque ahora no estas resolviendo una direccion vaga, sino un problema concreto que ha sido convergido.
|
||||
|
||||
### 4.1 Develop: diverge soluciones alrededor del problema central
|
||||
|
||||
El foco de la fase Develop es **explorar multiples soluciones posibles alrededor del mismo problema.**
|
||||
|
||||
Nota, la divergencia aqui es diferente de la fase Discover.
|
||||
|
||||
- La divergencia de Discover explora el espacio de problemas
|
||||
- La divergencia de Develop explora el espacio de soluciones
|
||||
|
||||
Por ejemplo, en el caso de las actas de reuniones, al llegar a la fase Develop, puedes empezar a pensar:
|
||||
|
||||
- Hacer una herramienta web o un plugin de reuniones
|
||||
- Procesar despues de subir la grabacion o registrar en tiempo real
|
||||
- Solo hacer resumenes o enfocarse en extraer tareas pendientes
|
||||
- Enfatizar la eficiencia individual o la sincronizacion del equipo
|
||||
- Dar al usuario libertad de edicion o producir directamente plantillas estructuradas
|
||||
|
||||
Este paso es ideal para brainstorming y para abrir las soluciones con el equipo.
|
||||
|
||||
Pero hay un requisito previo: **todas las soluciones deben servir al mismo problema ya definido.**
|
||||
Si el problema no esta claramente definido, Develop facilmente se convierte de nuevo en funciones volando en todas direcciones.
|
||||
|
||||
### 4.2 Deliver: elegir la solucion, hacer prototipos, probar y entregar
|
||||
|
||||
La fase Deliver es la fase de convergencia del segundo diamante.
|
||||
|
||||
Lo que debes hacer aqui no es seguir pensando mas, sino empezar a juzgar:
|
||||
|
||||
- Que solucion es mas adecuada para la etapa actual
|
||||
- Que version es la mas pequena pero mas util
|
||||
- Que funciones deben hacerse primero y cuales pueden esperar
|
||||
- Como hacer prototipos, pruebas y validacion a pequena escala
|
||||
|
||||
Muchas personas piensan que Deliver equivale a "lanzamiento". Pero su significado mas preciso es: **convertir una solucion en algo que se pueda probar, verificar e iterar.**
|
||||
|
||||
Puede ser:
|
||||
|
||||
- Un diagrama de flujo de baja fidelidad
|
||||
- Un prototipo en Figma
|
||||
- Un MVP funcional
|
||||
- Una prueba de usuario a pequena escala
|
||||
- Una version iterada despues de retroalimentacion real
|
||||
|
||||
El punto de Deliver no es "entrega perfecta", sino **poner la solucion en un entorno real para verificarla lo antes posible.**
|
||||
|
||||
## 5. Una tabla de comparacion facil de recordar
|
||||
|
||||
Si siempre te confundes con las cuatro etapas, puedes recordar directamente esta version:
|
||||
|
||||
| Etapa | Que estas haciendo | Palabras clave | Productos comunes |
|
||||
| --- | --- | --- | --- |
|
||||
| Discover | Entender el problema | Investigacion, observacion, entrevistas, recopilar informacion | Insights de usuarios, notas de escenario, lista de problemas |
|
||||
| Define | Definir el problema | Extraer, enfocar, priorizar, reescribir el problema | Definicion del problema, prioridades, punto de entrada MVP |
|
||||
| Develop | Explorar soluciones | Brainstorming, comparacion, cocreacion, conceptos de prototipo | Lista de soluciones, bocetos de flujo, direccion del prototipo |
|
||||
| Deliver | Verificar soluciones | Prototipos, pruebas, iteracion, entrega | Prototipos, retroalimentacion de pruebas, version optimizada |
|
||||
|
||||
Comprimiendolo aun mas:
|
||||
|
||||
- **Discover / Define**: resolver "hacer lo correcto"
|
||||
- **Develop / Deliver**: resolver "hacerlo bien"
|
||||
|
||||
## 6. Los errores mas comunes con el modelo Double Diamond
|
||||
|
||||
### 6.1 Pasar directamente a Deliver sin Discover
|
||||
|
||||
Este es el mas comun. Muchas personas apenas tienen una idea y ya estan dibujando prototipos, escribiendo PRDs, conectando modelos, haciendo paginas.
|
||||
|
||||
El problema no es que no trabajes en serio, sino que puede que ni siquiera hayas confirmado si el problema vale la pena resolver.
|
||||
|
||||
### 6.2 Discover mucho tiempo, pero nunca llegar a Define
|
||||
|
||||
Otro extremo es investigar continuamente, leer informacion constantemente, hacer entrevistas sin parar, pero sin atreverse a converger.
|
||||
|
||||
El Double Diamond no es para que diverjas infinitamente, sino para recordarte: despues de la divergencia debes entrar en la evaluacion y priorizacion.
|
||||
|
||||
### 6.3 Despues de Define, cambiar el problema a escondidas
|
||||
|
||||
Muchos equipos, al llegar a Develop, modifican la definicion del problema para adaptarse a una solucion que es mas facil de implementar.
|
||||
|
||||
Esto es peligroso. Porque puede que no estes resolviendo el problema, sino buscando justificaciones para la solucion que te gusta.
|
||||
|
||||
### 6.4 Confundir Deliver con "lanzamiento completo"
|
||||
|
||||
Deliver no significa que debas completar todo el producto para considerar que ha terminado. Muchas veces, un prototipo que se puede probar o una ronda de pruebas con usuarios reales ya es un buen deliver.
|
||||
|
||||
## 7. Como usar el modelo Double Diamond en productos de IA
|
||||
|
||||
Los productos de IA son especialmente propensos a caer en la trampa de "las capacidades primero", porque las capacidades del modelo parecen demasiado atractivas. Querras pensar directamente en:
|
||||
|
||||
- Deberia conectar multimodalidad?
|
||||
- Deberia hacer un Agent?
|
||||
- Deberia anadir workflows?
|
||||
- Deberia conectar voz, imagen, busqueda en la web?
|
||||
|
||||
Pero el modelo Double Diamond te obliga a preguntar primero:
|
||||
|
||||
- En que paso exactamente el usuario esta bloqueado
|
||||
- Este bloqueo requiere SI o SI IA?
|
||||
- Sin IA, cual es exactamente la mayor debilidad del metodo actual
|
||||
- Despues de anadir IA, cual es el progreso mas importante
|
||||
|
||||
Esto te ayuda a evitar una situacion comun: **capacidades fuertes, valor debil.**
|
||||
|
||||
Una secuencia practica es:
|
||||
|
||||
1. En la fase Discover, observar como los usuarios manejan las tareas actualmente
|
||||
2. En la fase Define, escribir el escenario mas doloroso como una definicion de problema clara
|
||||
3. En la fase Develop, comparar que capacidades de IA sirven mejor a este problema
|
||||
4. En la fase Deliver, hacer una version minima para que usuarios reales la prueben
|
||||
|
||||
## 8. Una plantilla Double Diamond que puedes usar directamente
|
||||
|
||||
Si estas haciendo tu propio producto, puedes seguir esta secuencia:
|
||||
|
||||
### Discover
|
||||
|
||||
- Quien es el usuario que he observado?
|
||||
- Cuando fue la ultima vez que encontraron este problema?
|
||||
- Como lo resuelven ahora?
|
||||
- Cual es la parte mas molesta, lenta o que menos confianza les da?
|
||||
|
||||
### Define
|
||||
|
||||
- De todos estos problemas, cual merece la pena resolver primero?
|
||||
- Que escenario es el mas frecuente o critico?
|
||||
- A quien serviremos primero en la primera version, y que problema resolveremos?
|
||||
- Despues de resolverlo exitosamente, como cambiara el estado del usuario?
|
||||
|
||||
### Develop
|
||||
|
||||
- Para este problema, que soluciones posibles hay?
|
||||
- Que soluciones son las mas ligeras, rapidas y faciles de verificar?
|
||||
- Que es imprescindible y que puede esperar?
|
||||
|
||||
### Deliver
|
||||
|
||||
- Cual es lo minimo que podemos entregar para verificar esta direccion?
|
||||
- Es un diagrama de flujo, un prototipo o un MVP?
|
||||
- A quien necesitamos pedir que pruebe?
|
||||
- Despues de la prueba, como decidimos si continuar, modificar o abandonar?
|
||||
|
||||
## 9. Un ejemplo que incluso un principiante puede entender
|
||||
|
||||
Supongamos que quieres hacer una herramienta de IA para "ayudar a universitarios a preparar su curriculum de busqueda de empleo".
|
||||
|
||||
Muchas personas entrarian directamente en el segundo diamante, pensando:
|
||||
|
||||
- Deberia hacer embellecimiento con un clic?
|
||||
- Deberia hacer reescritura inteligente?
|
||||
- Deberia hacer matching automatico con la descripcion del puesto?
|
||||
- Deberia generar una presentacion personal?
|
||||
|
||||
Pero siguiendo el modelo Double Diamond, un mejor proceso seria:
|
||||
|
||||
### Primer diamante
|
||||
|
||||
**Discover**
|
||||
|
||||
- Hablar con graduados recientes sobre cuando fue la ultima vez que modificaron su curriculum
|
||||
- Ver como pasan de un curriculum viejo a una nueva version
|
||||
- Entender si lo que mas les frustra es "no saber escribir", "no saber modificar" o "no saber juzgar si esta bien"
|
||||
|
||||
**Define**
|
||||
|
||||
- Finalmente converger en un problema mas concreto:
|
||||
- No es "los universitarios no saben hacer curriculums"
|
||||
- Sino "los estudiantes que envian su primera candidatura de practica tienen dificultades para reescribir sus experiencias existentes de forma adaptada al puesto, por lo que retrasan el envio"
|
||||
|
||||
### Segundo diamante
|
||||
|
||||
**Develop**
|
||||
|
||||
- Pensar varias soluciones: biblioteca de plantillas, reescritura con IA, comparacion con el puesto, puntuacion del curriculum, referencia de casos
|
||||
|
||||
**Deliver**
|
||||
|
||||
- La primera version solo hace "reescribir los bullet points de experiencias segun la descripcion del puesto"
|
||||
- Probar con 5 estudiantes, ver si enviaran su primera version mas rapido
|
||||
|
||||
Descubriras que, una vez que el primer diamante se hace solidamente, el segundo diamante se vuelve mucho mas claro.
|
||||
|
||||
## 10. Resumen
|
||||
|
||||
Lo mas poderoso del modelo Double Diamond es que te ayuda a descomponer una masa confusa en cuatro acciones mas claras:
|
||||
|
||||
- Primero diverge para entender el problema
|
||||
- Luego converge para definir el problema
|
||||
- Luego diverge para explorar soluciones
|
||||
- Finalmente converge para entregar la solucion
|
||||
|
||||
No te hace mas lento, sino que te hace **evitar muchos desvios que parecen ocupados pero van en la direccion equivocada.**
|
||||
|
||||
Especialmente en la era de la IA, donde hacer cosas se vuelve cada vez mas rapido, el modelo Double Diamond se vuelve aun mas importante. Porque cuando "hacerlo" es cada vez mas facil, la capacidad verdaderamente escasa se convierte en: **estas resolviendo un problema que vale la pena resolver, y lo estas haciendo de la forma adecuada.**
|
||||
|
||||
Recuerda solo esta frase:
|
||||
|
||||
**Primero haz lo correcto, luego hazlo bien.**
|
||||
|
||||
<a id="dd-ai"></a>
|
||||
## [11. Como usar la IA para recorrer el proceso Double Diamond](#top-dd)
|
||||
|
||||
El modelo Double Diamond en si no es una herramienta de IA, pero la IA es muy adecuada para actuar como "acelerador" en las cuatro etapas. La clave no es que la IA tome decisiones por ti, sino que te ayude a expandir tu campo de vision, organizar informacion, comparar soluciones y generar materiales de validacion.
|
||||
|
||||
### 11.1 En la fase Discover, usar la IA para hacer una primera preparacion de informacion
|
||||
|
||||
Antes de las entrevistas e investigacion formales, puedes pedir a la IA que haga un barrido ligero de problemas, como:
|
||||
|
||||
- Que soluciones alternativas comunes existen en el mercado
|
||||
- De que se quejan mas los usuarios en comunidades publicas
|
||||
- En que escenarios y grupos de personas es mas frecuente este problema
|
||||
- Que suelen ignorar los productos existentes
|
||||
|
||||
Este paso no puede sustituir la investigacion real, pero es ideal para construir rapidamente un mapa de problemas.
|
||||
|
||||
Una entrada simple para principiantes podria ser:
|
||||
|
||||
```text
|
||||
Quiero hacer una herramienta para ayudar a universitarios a modificar su curriculum.
|
||||
No me des ideas de funciones todavia, primero ayudame a ver que problemas encuentra mas a menudo la gente con este tema.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Mapa inicial de problemas:
|
||||
|
||||
1. No saber que experiencias incluir
|
||||
2. No saber como adaptar el curriculum a cada puesto
|
||||
3. Modificar muchas versiones sin certeza de si esta bien
|
||||
4. Necesitar que alguien lo revise, pero no querer molestar siempre
|
||||
5. Por la incertidumbre, posponer continuamente el envio
|
||||
```
|
||||
|
||||
La funcion de este tipo de resultado no es sacar conclusiones por ti, sino ayudarte a entrar mas rapido en Discover.
|
||||
|
||||
### 11.2 En la fase Define, dejar que la IA te ayude a converger la definicion del problema
|
||||
|
||||
Despues de recoger mucha informacion, lo mas dificil para mucha gente es comprimir el problema en una frase verdaderamente clara. Puedes pasar tus notas de investigacion a la IA y pedirle que las comprima en varias definiciones de problema candidatas:
|
||||
|
||||
```text
|
||||
A continuacion estan los comentarios de usuarios y notas de investigacion que he recogido en la fase Discover:
|
||||
[pega el contenido]
|
||||
|
||||
Por favor ayudame a hacer tres cosas:
|
||||
1. Identificar los patrones de problemas que aparecen con mas frecuencia
|
||||
2. Organizar 3 problemas que merezca la pena priorizar, segun frecuencia, intensidad de dolor y verificabilidad
|
||||
3. Escribir cada problema como una definicion concreta en una frase
|
||||
```
|
||||
|
||||
Asi te sera mas facil entrar en Define, en lugar de quedarte atrapado en "hay muchos problemas".
|
||||
|
||||
Puedes incluso hacer la entrada muy simple:
|
||||
|
||||
```text
|
||||
Los problemas que he recogido son:
|
||||
1. La gente no sabe que poner en el curriculum
|
||||
2. La gente no sabe como modificarlo
|
||||
3. La gente siempre siente que no esta bien modificado y no se atreve a enviarlo
|
||||
|
||||
Ayudame a ver, cual problema es mas adecuado para resolver primero en la primera version.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Problema sugerido para priorizar:
|
||||
|
||||
"Los estudiantes que envian su primera candidatura de practica no estan seguros de si su curriculum ha alcanzado el nivel necesario para enviar, por lo que lo modifican repetidamente y retrasan el envio."
|
||||
|
||||
Razones:
|
||||
1. Este problema es mas concreto
|
||||
2. Puede explicar el comportamiento de procrastinacion
|
||||
3. Es mas facil disenar una version pequena para verificar
|
||||
```
|
||||
|
||||
Este tipo de resultado es muy util porque te ayuda a converger de un monton de problemas vagos a una definicion mas como un punto de partida para un MVP.
|
||||
|
||||
### 11.3 En la fase Develop, usar la IA para diverger multiples soluciones
|
||||
|
||||
Muchas personas, una vez definido el problema, se fijan solo en la primera solucion que les viene a la mente. La IA es ideal en este paso para forzarte a diverger:
|
||||
|
||||
```text
|
||||
Ya he definido un problema central: [tu definicion del problema]
|
||||
Por favor no me des una respuesta final directamente, sino que propongas 2-3 direcciones de solucion desde cada uno de estos angulos:
|
||||
1. El MVP mas ligero
|
||||
2. La solucion mas adecuada para verificar la necesidad
|
||||
3. La solucion mas adecuada para mejorar la experiencia
|
||||
4. Una solucion que no dependa de IA
|
||||
5. Una solucion que dependa de IA
|
||||
Finalmente, compara las ventajas, riesgos y costos de verificacion de cada solucion.
|
||||
```
|
||||
|
||||
Asi no te ataras demasiado pronto a una unica solucion.
|
||||
|
||||
Una entrada simple podria ser:
|
||||
|
||||
```text
|
||||
Mi definicion de problema ahora es:
|
||||
"Los universitarios no estan seguros de si su curriculum ya se puede enviar, por lo que siguen posponiendo el envio."
|
||||
|
||||
Por favor ayudame a pensar en 4 soluciones diferentes, no me des solo una.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Solucion 1: Checklist de "preparacion para enviar" del curriculum
|
||||
Solucion 2: Reescritura adaptada segun la descripcion del puesto
|
||||
Solucion 3: Subir el curriculum y recibir alertas de riesgo
|
||||
Solucion 4: Proporcionar comparacion con casos excelentes para ayudar al usuario a juzgar la distancia
|
||||
```
|
||||
|
||||
En este punto te sera mas facil entrar en "comparar soluciones", en lugar de fijarte solo en la reescritura con IA desde el principio.
|
||||
|
||||
### 11.4 En la fase Deliver, usar la IA para generar textos de prototipos y materiales de prueba
|
||||
|
||||
Cuando entras en la fase Deliver, la IA es muy adecuada para acelerar estos trabajos:
|
||||
|
||||
- Generar textos de pagina para prototipos de baja fidelidad
|
||||
- Organizar un guion de prueba de usuario
|
||||
- Generar multiples versiones comparables de titulos, botones y descripciones
|
||||
- Organizar la retroalimentacion y la lista de problemas despues de las pruebas
|
||||
|
||||
Por ejemplo, puedes pedir a la IA que genere un guion de prueba de usuario de 20 minutos, o que te ayude a resumir la retroalimentacion de 5 usuarios en criterios de "continuar / modificar direccion / pausar".
|
||||
|
||||
Una entrada minima podria ser:
|
||||
|
||||
```text
|
||||
He hecho un prototipo muy simple:
|
||||
el usuario sube su curriculum y el sistema le indica que partes aun no estan listas para enviar.
|
||||
|
||||
Por favor ayudame a generar un guion de prueba de usuario de 15 minutos.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Guion de prueba de 15 minutos:
|
||||
|
||||
1. Primero pedir al usuario que describa su ultima experiencia enviando un curriculum
|
||||
2. Dejar que el usuario complete independientemente la subida del curriculum
|
||||
3. Observar si entiende los resultados de la retroalimentacion
|
||||
4. Preguntar: de estas indicaciones, cuales son las mas utiles y cuales te confunden
|
||||
5. Preguntar: antes del proximo envio, te gustaria usar esto de nuevo?
|
||||
```
|
||||
|
||||
Este tipo de resultado es muy practico porque te ayuda a pasar de "ya termine el prototipo" a "como lo pruebo ahora".
|
||||
|
||||
### 11.5 Dejar que la IA actue como "guardian de etapas"
|
||||
|
||||
El problema mas comun del modelo Double Diamond es que la gente se salta etapas. Puedes pedir directamente a la IA que actue como guardian, recordandote en que etapa estas realmente:
|
||||
|
||||
```text
|
||||
Por favor actua como coach de proceso de producto.
|
||||
A continuacion esta el estado actual de mi proyecto: [tu descripcion]
|
||||
Por favor juzga en que etapa estoy mas: Discover, Define, Develop o Deliver.
|
||||
Y dime:
|
||||
1. Me he saltado demasiado pronto a la siguiente etapa?
|
||||
2. Cual es la accion mas importante que debo completar en la etapa actual?
|
||||
3. Que cosas no debo hacer ahora?
|
||||
```
|
||||
|
||||
Esto es especialmente util para principiantes, porque es facil "empezar a dibujar prototipos antes de haber aclarado el problema".
|
||||
|
||||
## 📚 Tareas
|
||||
|
||||
Por favor completa las siguientes tareas basandote en el contenido anterior:
|
||||
|
||||
1. Elige una idea de producto que quieras hacer recientemente, y escribe un borrador de sus cuatro pasos: Discover, Define, Develop, Deliver
|
||||
2. En la fase Define, obligate a comprimir el problema en una frase concreta
|
||||
3. En la fase Develop, lista al menos 3 soluciones diferentes, en lugar de fijarte solo en la primera que se te ocurra
|
||||
4. En la fase Deliver, escribe una version minima de verificacion que puedas entregar en una semana
|
||||
|
||||
## Lectura adicional
|
||||
|
||||
Este articulo se basa principalmente en los materiales oficiales del Design Council sobre el Double Diamond, adecuados para seguir profundizando:
|
||||
|
||||
- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
|
||||
- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
|
||||
- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'De donde sacar ideas: 3 fuentes de referencia mas adecuadas para principiantes'
|
||||
description: 'Articulo introductorio de ideas de producto para lectores sin experiencia. Lista sitios web, fuentes de tendencias y listas de VC para encontrar direcciones especificas.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>1.5 horas</strong>'
|
||||
</script>
|
||||
|
||||
# De donde sacar ideas: 3 fuentes de referencia mas adecuadas para principiantes
|
||||
|
||||
<a id="top-idea-sources"></a>
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Buscar ideas', 'Direccion de producto', 'Descubrimiento de necesidades', 'Observacion de la industria']"
|
||||
coreOutput="1 direccion de producto mas concreta y que valga la pena investigar"
|
||||
expectedOutput="Saber donde buscar, como analizar y que mirar primero, sin quedarse solo con ideas vagas como 'AI + cierto sector'"
|
||||
>
|
||||
|
||||
Muchas personas se quedan atascadas en el primer paso, no porque no tengan ninguna inspiracion, sino porque despues de ver mucho contenido, lo que les queda en la cabeza son palabras grandes:
|
||||
|
||||
- AI for education
|
||||
- AI for healthcare
|
||||
- AI for finance
|
||||
- AI agent for business
|
||||
|
||||
Todas estas aun no son ideas. Solo te dicen que "la direccion es muy grande", pero no te dicen:
|
||||
|
||||
- Quien las usa
|
||||
- En que escenario se usan
|
||||
- Como se las arreglan ahora
|
||||
- Que paso vale la pena atacar primero
|
||||
|
||||
Este articulo no habla de metodologias abstractas, directamente te ofrece un conjunto de fuentes mas utiles.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimo
|
||||
**Objetivo**: Despues de leer, sabras a donde ir cuando no tengas ideas, cuales enlaces son buenos para ver "necesidades concretas", cuales para ver "tendencias" y cuales para ver "negocios reales".
|
||||
|
||||
**Accion**: Primero revisa una ronda de listas de ideas, luego una ronda de pequenos productos que ya generan dinero, despues mira tendencias y fuentes mas orientadas a negocios, y finalmente quedate con 1 direccion que estes dispuesto a seguir investigando.
|
||||
|
||||
**Resultado**: Obtendras 1 direccion mas concreta y que valga la pena verificar, en lugar de quedarte con palabras grandes.
|
||||
|
||||
**Enlaces rapidos**: [Lista de aplicaciones de referencia](#idea-apps) · [Fuentes de tendencias](#idea-trends) · [Fuentes mas orientadas a negocios](#idea-business) · [Fuentes de VC / aceleradoras](#idea-vc) · [Camino mas corto](#idea-path) · [Como te ayuda la IA](#idea-ai)
|
||||
:::
|
||||
|
||||
## Aprenderas lo siguiente
|
||||
|
||||
1. Que sitios web son adecuados para buscar ideas directamente
|
||||
2. Que sitios web son adecuados para ver pequenos productos que ya generan dinero
|
||||
3. Que fuentes son adecuadas para ver tendencias y cambios en la industria
|
||||
4. Que fuentes estan mas cerca de negocios reales y pagos reales
|
||||
5. Un camino minimo adecuado para personas sin experiencia
|
||||
|
||||
<a id="idea-apps"></a>
|
||||
## [1. Lista de aplicaciones de referencia: primero mira lo que otros ya estan haciendo](#top-idea-sources)
|
||||
|
||||
Este es el mejor punto de partida para principiantes, porque es lo mas concreto.
|
||||
|
||||
### Primer nivel: abres y ya tienes una lista de ideas, solo elige
|
||||
|
||||
- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
El uso principal de este subreddit es: usuarios reales publican directamente "Ojala alguien hiciera un XX". Cada post suele ser una necesidad de producto concreta, con algo de descripcion del escenario. Entra y ordena por `Top -> Past Month` o `Top -> Past Year`, en 20 minutos puedes escanear un lote de necesidades reales.
|
||||
- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
Similar al anterior, pero mas orientado a software / Apps. El formato comun de los posts es "Necesito una aplicacion que pueda hacer XX", con mayor granularidad, muchos son nichos pequenos y atractivos.
|
||||
- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
Mas completo que los dos anteriores. Muchos posts no son solo una necesidad de una linea, sino que incluyen un poco de analisis de mercado, modelo de negocio y por que vale la pena hacerlo ahora.
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
Publica semanalmente ideas de startup no validadas. Los campos comunes incluyen usuario objetivo, forma de monetizacion y enfoque de validacion inicial. Formato uniforme, ideal para escaneo rapido.
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
Usa IA para generar ideas de startup, puedes seguir navegando. La calidad es variable, pero es muy util para estimular la inspiracion cuando "no tienes ninguna sensacion", y luego profundizar por tu cuenta en escenarios mas especificos.
|
||||
|
||||
### Segundo nivel: mira los pequenos productos rentables que otros ya hacen, e infiere ideas
|
||||
|
||||
La logica de este tipo de plataformas es: otros ya han validado la necesidad, e incluso ya estan ganando dinero. Tu los miras no para copiar, sino para ver "que problemas pequenos ya tienen clientes dispuestos a pagar".
|
||||
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
Recopila muchos casos reales de pequenos negocios, generalmente con entrevistas a fundadores, datos de ingresos y proceso de inicio. Enfocate en los pequenos productos con ingresos mensuales de 10 mil a 100 mil dolares; suelen ser mas de nicho y mas cercanos a la escala de productos que una persona comun puede entender.
|
||||
- [Indie Hackers — Products](https://www.indiehackers.com/products)
|
||||
Donde los desarrolladores independientes muestran sus productos; muchos publican sus ingresos y crecimiento. Ordena por ingresos y mira que problemas concretos resuelven los productos que ganan de miles a decenas de miles de dolares al mes.
|
||||
- [MicroConf Blog](https://microconf.com/blog)
|
||||
Orientado a Micro SaaS. Ideal para ver cortes de productos "suficientemente pequenos, pero donde alguien esta dispuesto a pagar".
|
||||
- [1000 Tools](https://1000.tools/)
|
||||
Sitio de agregacion de herramientas de IA. Ideal para ver que categorias ya tienen competidores, pero con calidad mediocre, o que direcciones aun no estan bien cubiertas en ciertos mercados verticales.
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
Mira los tipos de productos que aparecen repetidamente. No te fijes solo en el numero uno, enfocate en que categorias tienen actividad continua pero aun sin un ganador claro.
|
||||
- [BetaList](https://betalist.com/)
|
||||
Ideal para ver productos en etapa temprana y equipos que aun estan probando direcciones.
|
||||
|
||||
### Al mirar productos, no mires solo el producto en si; mira tambien las malas resenas y los "servicios de reemplazo"
|
||||
|
||||
- [G2](https://www.g2.com/)
|
||||
Modo de uso: mira las resenas de 1 y 2 estrellas. Las malas resenas suelen esconder "que parte del producto existente no esta bien hecha".
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
Modo de uso: similar a G2, ideal para ver quejas reales sobre productos SaaS.
|
||||
- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhubajie
|
||||
Modo de uso: busca "hacer por ti", "organizar por ti", "transcribir por ti". Si cierto servicio manual se vende bien, detras suele haber un proceso repetible y susceptible de ser convertido en producto.
|
||||
|
||||
La senal de juicio es simple:
|
||||
|
||||
- Los usuarios ya se estan quejando de las herramientas existentes
|
||||
- Los usuarios ya estan pagando para que alguien haga el trabajo por ellos
|
||||
- Los usuarios ya estan invirtiendo mucho trabajo manual y tiempo en este proceso
|
||||
|
||||
### Cuarto nivel: mira videos, hay quien directamente te desglosa ideas
|
||||
|
||||
Si no te gusta navegar foros ni rankings, y prefieres "alguien que me desglose las ideas", entonces los videos y podcasts tambien son muy utiles.
|
||||
|
||||
- Busca `Greg Isenberg startup ideas`
|
||||
Ideal para ver a alguien desglosando directamente 2 o 3 ideas concretas, incluyendo tamano de mercado, analisis de competencia y punto de entrada.
|
||||
- Busca `My First Million podcast`
|
||||
Los dos presentadores suelen dedicar episodios enteros a hacer brainstorming de ideas de negocio; alta densidad y a menudo surgen nichos muy concretos.
|
||||
- Busca `YC startup ideas` o `Michael Seibel startup ideas`
|
||||
Adecuado para principiantes, contenido directo, muchos explican explicitamente como elegir una direccion.
|
||||
|
||||
<a id="idea-trends"></a>
|
||||
## [2. Fuentes de tendencias: mira que direcciones estan emergiendo](#top-idea-sources)
|
||||
|
||||
La funcion de los sitios de tendencias no es darte ideas directamente, sino ayudarte a juzgar: si cierta direccion esta ganando traccion y si vale la pena seguir investigando.
|
||||
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
Usa datos para rastrear temas y categorias de productos que crecen rapidamente pero que aun no han entrado en el mainstream. Ideal para ver direcciones "que estan emergiendo pero que aun no estan especialmente saturadas".
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
Busca palabras clave, mira la linea de tendencias del ultimo ano, y luego revisa las "consultas relacionadas" con "terminos en alza".
|
||||
- [Glimpse](https://meetglimpse.com/)
|
||||
Similar a Google Trends.
|
||||
- Paginas de resumenes de informes de la industria
|
||||
Adecuadas cuando ya tienes una direccion y quieres ver rapidamente su posicion en la industria.
|
||||
- Contenido de tendencias de McKinsey / BCG / Gartner
|
||||
Mas orientado a la perspectiva empresarial y de grandes industrias; adecuado para B2B, industria y sectores tradicionales.
|
||||
- [State of AI Report](https://www.stateof.ai/)
|
||||
Si tu direccion esta relacionada con la tecnologia de IA en si, este tipo de informes anuales son ideales para construir una vision general.
|
||||
|
||||
Al mirar tendencias, enfocate solo en tres cosas:
|
||||
|
||||
- Si el termino esta en calentamiento continuo
|
||||
- En que escenario concreto se enmarca
|
||||
- Quien seria el primero en invertir tiempo, costos de cambio o presupuesto en ello
|
||||
|
||||
<a id="idea-business"></a>
|
||||
## [3. Fuentes mas orientadas a negocios: mira quien esta gastando dinero, quien se esta quejando, quien esta vendiendo servicios manuales](#top-idea-sources)
|
||||
|
||||
Si lo que buscas no es una direccion que "suena genial", sino una mas cercana a "negocios reales", entonces debes mirar fuentes mas proximas a los flujos de trabajo.
|
||||
|
||||
### Mira quien esta gastando dinero real en que
|
||||
|
||||
- [China Government Procurement Network](https://www.ccgp.gov.cn/)
|
||||
Modo de uso: busca terminos como "construccion inteligente", "sistema de gestion de laboratorio", "recopilacion de datos", "gestion de clinicas", "sistema de presupuestos", y mira los presupuestos, requisitos tecnicos y escenarios de uso.
|
||||
- Centros de transaccion de recursos publicos de cada provincia y ciudad
|
||||
Modo de uso: mira que sistemas estan comprando realmente los gobiernos locales y las empresas publicas.
|
||||
- Bibiao / Qianlima / Biaoshitong
|
||||
Modo de uso: mira las necesidades de compra del lado empresarial y los tipos de sistemas de alta frecuencia.
|
||||
|
||||
La senal fuerte de estas fuentes es: no se esta hablando del futuro, sino exponiendo "hoy alguien ya esta dispuesto a pagar por esto".
|
||||
|
||||
### Mira quien se esta quejando de que
|
||||
|
||||
- Manufactura: comunidades de maquinaria, foros de control industrial
|
||||
- Salud: Dingxiangyuan, Yimaitong
|
||||
- Construccion / Ingenieria: Tumuzai Xianxi, Glodon Community
|
||||
- Finanzas / Contabilidad: Foro de China Accounting Vision
|
||||
- Comercio exterior: Fubu Foreign Trade Forum, Mikiquan
|
||||
- Hosteleria / Retail: Zhiye Canyin Wang, Lianshang Wang Forum
|
||||
- [Reddit](https://www.reddit.com/) en secciones verticales: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
|
||||
- [V2EX](https://www.v2ex.com/)
|
||||
- Jike
|
||||
- Xiaohongshu
|
||||
|
||||
Al buscar, no busques solo "AI" o "innovacion"; es mas efectivo buscar:
|
||||
|
||||
- demasiado engorroso
|
||||
- hay alguna mejor manera
|
||||
- recomienden herramientas
|
||||
- ya no puedo gestionarlo con Excel
|
||||
- I wish there was
|
||||
- is there a tool for
|
||||
- I hate
|
||||
|
||||
### Mira quien esta vendiendo servicios manuales repetitivos
|
||||
|
||||
- [Fiverr](https://www.fiverr.com/)
|
||||
- [Upwork](https://www.upwork.com/)
|
||||
- Zhubajie Wang
|
||||
- Taobao
|
||||
- Xianyu
|
||||
|
||||
Si ves que estos servicios se venden bien, vale la pena investigar mas:
|
||||
|
||||
- Te organizan los presupuestos en PDF a Excel
|
||||
- Te organizan masivamente los datos de clientes
|
||||
- Te revisan el CV / redactan textos / hacen transcripciones / archivan documentos
|
||||
|
||||
Detras de estos servicios normalmente no hay necesidades de un solo uso, sino flujos de trabajo que se repiten.
|
||||
|
||||
### Mira flujos de trabajo completos, no solo listas de ideas
|
||||
|
||||
A veces el metodo mas directo es elegir una industria, revisar todo el proceso y encontrar los pasos que aun dependen de WeChat, Excel, papel y lapiz, o telefono.
|
||||
|
||||
- Comercio exterior: buscar proveedores, solicitar cotizaciones, comparar precios, hacer presupuestos, enviar a clientes, hacer seguimiento de respuestas, organizar inspecciones, reservar transporte, despacho de aduanas.
|
||||
Corte digno de analizar: organizar presupuestos de proveedores en presupuestos para clientes.
|
||||
- Clinicas dentales: recepcion, radiografias, lectura de radiografias, comunicacion del plan, seguimiento, tratamiento, revisita.
|
||||
Corte digno de analizar: explicar el plan al paciente y hacer seguimiento continuo.
|
||||
- Obras de construccion: inspeccion, fotos, envio al grupo, elaboracion de informes, entrega al cliente.
|
||||
Corte digno de analizar: de fotos en sitio a informes de cumplimiento.
|
||||
|
||||
<a id="idea-vc"></a>
|
||||
## [4. Fuentes de VC / aceleradoras: mira "hacia donde sopla la corriente"](#top-idea-sources)
|
||||
|
||||
Este tipo de fuentes son adecuadas para encontrar direcciones generales, no para reemplazar directamente la validacion.
|
||||
|
||||
- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
Modo de uso: ideal para encontrar cortes, porque a menudo dice directamente "queremos ver a alguien haciendo esto".
|
||||
- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
Modo de uso: mas orientado a grandes tendencias y evaluacion de sectores, ideal para construir sensibilidad a la industria.
|
||||
- [NFX](https://www.nfx.com/)
|
||||
Modo de uso: ideal para escanear rapidamente un conjunto de temas de startup.
|
||||
- [Sequoia Capital](https://www.sequoiacap.com/article/)
|
||||
Modo de uso: no necesariamente lista ideas directamente, pero a menudo habla sobre ciertos tipos de cambios de plataforma y oportunidades.
|
||||
- [First Round Review](https://review.firstround.com/)
|
||||
Modo de uso: ideal para profundizar en una direccion; no necesariamente es una lista de ideas, pero la calidad de los articulos suele ser muy alta.
|
||||
|
||||
Ventajas de este tipo de fuentes:
|
||||
|
||||
- Pueden decirte que direcciones futuras valen la pena explorar
|
||||
- Pueden decirte que sectores probablemente seguiran recibiendo impulso
|
||||
- Pueden hacerte entrar rapidamente en el lenguaje de un sector
|
||||
|
||||
Limitaciones de este tipo de fuentes:
|
||||
|
||||
- Suele ser desde la perspectiva de inversores
|
||||
- No necesariamente te dice que rol es el que mas sufre
|
||||
- No necesariamente te dice que paso del proceso es el mas bloqueado
|
||||
- No necesariamente te dice quien ya esta pagando por esto hoy
|
||||
|
||||
Por lo tanto, un mejor uso es: primero usa estas fuentes para encontrar una direccion, y luego vuelve a los productos de referencia, foros de la industria, informacion de compras y flujos de trabajo reales para encontrar cortes mas especificos.
|
||||
|
||||
<a id="idea-path"></a>
|
||||
## [5. El camino mas corto para quienes "no tienen ideas y solo saben hacer asistentes"]( #top-idea-sources)
|
||||
|
||||
Si solo quieres seguir un camino minimo, puedes hacerlo asi:
|
||||
|
||||
1. Primer paso, 30 minutos.
|
||||
Abre [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/), ordena por `Top -> Past Year`, escanea rapidamente 50 posts y guarda todas las direcciones que pienses "esto creo que podria hacerlo".
|
||||
2. Segundo paso, 30 minutos.
|
||||
Abre [Starter Story](https://www.starterstory.com/) o [Indie Hackers Products](https://www.indiehackers.com/products), ordena por ingresos, mira los productos de ingresos medios, no solo los mas exitosos. Encuentra direcciones relacionadas con el primer paso y mira especificamente a quien venden y que paso resuelven.
|
||||
3. Tercer paso, 20 minutos.
|
||||
Ve a [Google Trends](https://trends.google.com/) y busca palabras clave relacionadas, mira si la tendencia esta creciendo, y luego revisa los "terminos en alza" en "consultas relacionadas".
|
||||
4. Cuarto paso, 20 minutos.
|
||||
Ve a G2 / Capterra / foros de la industria / plataformas de licitacion / Fiverr y similares, y mira en esta direccion que es exactamente lo que mas molesta hoy y donde aun se depende del trabajo manual.
|
||||
|
||||
Despues de ver todo, te basta con poder expresar claramente esta frase:
|
||||
|
||||
- Cierta tipo de persona, en cierto escenario, esta bloqueada por cierto paso del proceso, y actualmente depende principalmente de cierto metodo torpe para sobrevivir.
|
||||
|
||||
<a id="idea-ai"></a>
|
||||
## [6. Como te ayuda la IA](#top-idea-sources)
|
||||
|
||||
El foco de este articulo no es la IA, pero la IA es muy util para organizar.
|
||||
|
||||
Los usos mas practicos son solo dos:
|
||||
|
||||
- Pega a la IA los enlaces, titulos de posts y palabras textuales de usuarios que has encontrado, y dejala que te los clasifique en "publico / escenario / punto de dolor / solucion alternativa".
|
||||
- Deja que la IA te ayude a condensar un monton de informacion dispersa en 3 direcciones candidatas, en lugar de seguir divergiendo en 50 funcionalidades.
|
||||
|
||||
Puedes preguntar directamente asi:
|
||||
|
||||
```text
|
||||
He encontrado estas fuentes recientemente:
|
||||
1. [pega titulo o cita textual]
|
||||
2. [pega titulo o cita textual]
|
||||
3. [pega titulo o cita textual]
|
||||
|
||||
Por favor no me des una lista de funcionalidades.
|
||||
Por favor haz solo tres cosas:
|
||||
1. Clasifica por publico y escenario
|
||||
2. Identifica los pasos problematicos que se repiten
|
||||
3. Ayudame a organizarlo en 3 direcciones candidatas mas concretas
|
||||
```
|
||||
|
||||
## Lectura adicional
|
||||
|
||||
- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
- [NFX](https://www.nfx.com/)
|
||||
- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
- [Indie Hackers - Products](https://www.indiehackers.com/products)
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
- [BetaList](https://betalist.com/)
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
- [G2](https://www.g2.com/)
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
@@ -0,0 +1,765 @@
|
||||
---
|
||||
title: 'Referencia de escenarios de aplicación industrial B2B'
|
||||
description: 'Este documento recopila las aplicaciones prácticas de los modelos LLM en escenarios empresariales B2B, incluyendo áreas como la industria manufacturera, servicio al cliente inteligente, educación, programación inteligente, salud, ciberseguridad, gestión financiera, servicios empresariales y más, sirviendo como referencia para desarrolladores de aplicaciones de IA orientadas a clientes empresariales.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'Aprox. <strong>6 horas</strong>'
|
||||
|
||||
const interestPoint = ref('')
|
||||
const purpose = ref('')
|
||||
|
||||
// Grupo de temas por industria
|
||||
const topicPool = {
|
||||
'manufacturing': [
|
||||
{ title: 'Plataforma de diseño asistido por IA para exteriores de autobuses de nueva energía', desc: 'Diseño conceptual de exteriores basado en modelos de generación de imágenes' },
|
||||
{ title: 'Asistente inteligente de diseño y revisión de planos técnicos', desc: 'Construcción de una base de conocimiento de normativas de diseño empresarial mediante tecnología RAG' },
|
||||
{ title: 'Generación y gestión automatizada de documentación técnica', desc: 'Generación automática de especificaciones de productos y manuales de operación basada en LLM' },
|
||||
{ title: 'Asistente de generación automática de informes de inspección de equipos de producción', desc: 'Descripción por voz del estado del equipo, generación estructurada de informes de inspección' },
|
||||
{ title: 'Asistente de preguntas y respuestas sobre diagnóstico de fallos en equipos industriales', desc: 'Construcción de una base de conocimiento vectorial basada en casos históricos de fallos' }
|
||||
],
|
||||
'customer-service': [
|
||||
{ title: 'Sistema de respuesta automática y generación de tickets de servicio al cliente multicanal inteligente', desc: 'Integración de mensajes multicanal, LLM comprende la intención y genera respuestas' },
|
||||
{ title: 'Asistente de prospección y seguimiento de clientes potenciales', desc: 'Análisis de registros de conversaciones históricas para identificar clientes con alta intención de compra' },
|
||||
{ title: 'Sistema inteligente de búsqueda y respuestas del conocimiento interno empresarial', desc: 'Construcción de una base de conocimiento vectorial basada en documentos internos' },
|
||||
{ title: 'Herramienta de resumen inteligente de conversaciones y generación de tickets de servicio', desc: 'Generación automática de resúmenes de sesión y extracción de información clave' },
|
||||
{ title: 'Sistema de base de conocimiento de guiones de ventas destacados del servicio al cliente', desc: 'Análisis de casos exitosos para extraer plantillas de guiones ganadores' }
|
||||
],
|
||||
'education': [
|
||||
{ title: 'Sistema de planificación de rutas de aprendizaje de idiomas personalizado y tutoría inteligente', desc: 'Evaluación del nivel del aprendiz, planificación de tareas de estudio diarias' },
|
||||
{ title: 'Plataforma de elaboración automatizada de planes de clase y recomendación de recursos educativos', desc: 'Generación de estructura de planes de clase según el programa de estudios' },
|
||||
{ title: 'Sistema de corrección automatizada de tareas y análisis diagnóstico del rendimiento', desc: 'Corrección automática de preguntas subjetivas y generación de sugerencias de corrección' },
|
||||
{ title: 'Construcción de modelos de competencias laborales y mapas de aprendizaje', desc: 'Análisis de descripciones de puestos para extraer requisitos de competencias' },
|
||||
{ title: 'Práctica conversacional individualizada de idiomas extranjeros en escenarios simulados', desc: 'LLM asume diferentes roles para practicar conversaciones orales' }
|
||||
],
|
||||
'programming': [
|
||||
{ title: 'Asistente de autocompletado de código inteligente y reparación automática de bugs', desc: 'Plugin de IDE que ofrece sugerencias de autocompletado en tiempo real' },
|
||||
{ title: 'Plataforma de construcción de aplicaciones low-code y automatización de flujos', desc: 'Descripción de requisitos en lenguaje natural, conversión a configuración low-code' },
|
||||
{ title: 'Sistema de generación de casos de prueba unitarios', desc: 'Análisis AST del código fuente, generación de casos de prueba con condiciones límite' },
|
||||
{ title: 'Herramienta de análisis inteligente de código y migración entre lenguajes', desc: 'Análisis de la calidad del código y sugerencias de optimización' },
|
||||
{ title: 'Herramienta de generación automática de código de interfaz de usuario (UI)', desc: 'Reconocimiento de imágenes de diseño, generación de CSS responsivo' }
|
||||
],
|
||||
'healthcare': [
|
||||
{ title: 'Asistente inteligente de interpretación de informes de análisis clínicos', desc: 'OCR identifica indicadores clave, interpretación de valores anómalos' },
|
||||
{ title: 'Experto en consultas de salud basado en tecnología de búsqueda de conocimiento', desc: 'Construcción de un grafo de conocimiento médico, búsqueda RAG para generar respuestas' },
|
||||
{ title: 'Plataforma de análisis de decisión de datos de investigación clínica', desc: 'Integración de datos EMR, asistencia en la generación de código de análisis estadístico' },
|
||||
{ title: 'Herramienta de generación automática de informes de imágenes médicas', desc: 'Descripción de características de imágenes, generación automática de informes estructurados' },
|
||||
{ title: 'Asistente inteligente de recordatorio de medicación para enfermedades crónicas', desc: 'Generación de recordatorios de medicación personalizados, verificación de contraindicaciones' }
|
||||
],
|
||||
'security': [
|
||||
{ title: 'Motor de detección y reparación de vulnerabilidades de seguridad en código', desc: 'Escaneo SAST del código, análisis de principios de vulnerabilidad' },
|
||||
{ title: 'Sistema inteligente de identificación e interceptación de correos de phishing generados por IA', desc: 'Análisis del contenido del correo, identificación de correos de phishing generados por IA' },
|
||||
{ title: 'Asistente de generación automática de informes diarios de operaciones de seguridad', desc: 'Resumen de registros, extracción automática de eventos clave' },
|
||||
{ title: 'Asistente de generación inteligente de informes de pruebas de penetración', desc: 'Generación automática de informes basada en descripciones de vulnerabilidades' },
|
||||
{ title: 'Asistente de consulta y análisis inteligente de inteligencia sobre amenazas', desc: 'Conexión con múltiples fuentes de inteligencia sobre amenazas, interpretación del contenido' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'Asistente de generación inteligente de informes de debida diligencia crediticia', desc: 'Entrada de datos financieros, generación automática de informes de debida diligencia crediticia' },
|
||||
{ title: 'Asesor inteligente de gestión de patrimonio bancario privado', desc: 'Análisis del perfil de riesgo del cliente, generación de recomendaciones de asignación de activos' },
|
||||
{ title: 'Asistente de generación inteligente y verificación de cumplimiento de prospectos de IPO', desc: 'Plantillas modulares, llenado automático de descripciones del negocio' },
|
||||
{ title: 'Sistema de generación automática de informes financieros y alerta de anomalías operativas', desc: 'Generación automática de análisis financiero y discusión de la dirección' },
|
||||
{ title: 'Entrenador de guiones de venta inteligente para agentes de seguros', desc: 'Simulación de conversaciones, evaluación de la conformidad y persuasión de los guiones' }
|
||||
],
|
||||
'enterprise': [
|
||||
{ title: 'Plataforma de revisión de cumplimiento y sugerencias de modificación de contratos empresariales en todo su ciclo de vida', desc: 'Comparación de cláusulas con bases de datos normativas, generación de informes de cumplimiento' },
|
||||
{ title: 'Transcripción por voz de reuniones de ventas y recomendación de guiones', desc: 'Transcripción ASR, análisis de conversaciones y recomendación de guiones ganadores' },
|
||||
{ title: 'Sistema inteligente de generación y diseño de contenido de marketing', desc: 'Generación de textos de marketing y extracción de puntos de venta' },
|
||||
{ title: 'Plataforma de análisis de publicidad de la competencia', desc: 'Recopilación de anuncios de la competencia, análisis de estrategias de publicación' },
|
||||
{ title: 'Sistema de análisis inteligente de temas populares y recomendación de contenido', desc: 'Análisis de tendencias populares y recomendación de ángulos temáticos' }
|
||||
],
|
||||
'content': [
|
||||
{ title: 'Plataforma de asistencia creativa para contenido de cine y televisión y novelas', desc: 'Proporciona sinopsis, desarrollo de personajes, generación de diálogos' },
|
||||
{ title: 'Asistente de redacción inteligente de historias de marca y artículos de relaciones públicas', desc: 'Entrada de palabras clave de marca, generación de textos en múltiples estilos' },
|
||||
{ title: 'Sistema de gestión de transmisión en vivo e interacción de avatares digitales virtuales', desc: 'Imagen digital + voz TTS + diálogo LLM' },
|
||||
{ title: 'Generación de guiones de videos cortos y edición inteligente', desc: 'Generación de guiones y storyboards de videos cortos' },
|
||||
{ title: 'Sistema inteligente de generación y diseño de contenido de marketing', desc: 'Generación de textos de marketing y extracción de puntos de venta' }
|
||||
],
|
||||
'government': [
|
||||
{ title: 'Sistema de navegación por voz inteligente y despacho automático de la línea de servicio ciudadano 12345', desc: 'Reconocimiento de voz, comprensión de solicitudes y despacho inteligente' },
|
||||
{ title: 'Robot de guía inteligente y respuestas sobre políticas para oficinas de servicios gubernamentales', desc: 'Búsqueda RAG en base de conocimiento gubernamental' },
|
||||
{ title: 'Plataforma de emparejamiento inteligente y envío preciso de políticas de beneficio empresarial', desc: 'Perfil empresarial con emparejamiento automático de políticas aplicables' },
|
||||
{ title: 'Asistente de pre-revisión inteligente y verificación de cumplimiento de materiales administrativos', desc: 'Reconocimiento OCR y extracción de información clave' },
|
||||
{ title: 'Plataforma de identificación inteligente y gestión de despacho de eventos urbanos en cuadrícula', desc: 'Identificación del tipo de evento y despacho' }
|
||||
],
|
||||
'legal': [
|
||||
{ title: 'Agent de detección de riesgos y vulnerabilidades en contratos con un clic', desc: 'Identificación de problemas potenciales comparando con listas de verificación de riesgos' },
|
||||
{ title: 'Asesor de evaluación inteligente por IA de la tasa de éxito en casos similares', desc: 'Extracción de características del caso, búsqueda y emparejamiento de casos similares' },
|
||||
{ title: 'Radar de monitoreo en tiempo real de cambios legislativos y análisis de impacto empresarial', desc: 'Análisis del contenido modificado y evaluación del impacto empresarial' },
|
||||
{ title: 'Herramienta de redacción automática AIGC de cartas de abogado', desc: 'Entrada de declaración de hechos, generación de cartas de abogado estandarizadas' },
|
||||
{ title: 'Plugin de explicación en lenguaje sencillo de cláusulas legales complejas', desc: 'Generación de explicaciones fáciles de entender' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'Generador de itinerarios automáticos basado en AIGC para viajeros perezosos', desc: 'Generación de planes de itinerario diario' },
|
||||
{ title: 'Robot de predicción de tendencias de precios de vuelos y hoteles y bloqueo automático de precios bajos', desc: 'Modelo ML de predicción de tendencias de precios' },
|
||||
{ title: 'Sistema de pre-revisión inteligente de documentos de visa y asistencia de llenado automatizado', desc: 'Verificación de integridad de información mediante OCR' },
|
||||
{ title: 'Asistente de traducción por voz en tiempo real y traducción visual de menús para viajes al extranjero', desc: 'Traducción de voz sin conexión, OCR de imágenes de menús' },
|
||||
{ title: 'Asistente de generación automática de diarios de viaje ilustrados y textos para redes sociales', desc: 'Extracción de información de fotos, generación de textos de diarios de viaje' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'Compañero virtual de compañía profunda 24 horas basado en modelos LLM', desc: 'Sistema de memoria que almacena el historial de conversaciones' },
|
||||
{ title: 'Asesor de IA de reconocimiento emocional multimodal y orientación psicológica', desc: 'Análisis de tono de voz + reconocimiento de emociones en texto' },
|
||||
{ title: 'Avatar digital de entrenamiento cognitivo y recuperación de memorias para personas con Alzheimer', desc: 'Juegos cognitivos de entrenamiento, fotografías antiguas que activan recuerdos' },
|
||||
{ title: 'Entrenador de práctica social simulada con AIGC para personas con ansiedad social', desc: 'Simulación de escenarios sociales virtuales' },
|
||||
{ title: 'Asistente de monitoreo del estado de ánimo las 24 horas y motivación emocional positiva con IA', desc: 'Análisis de tendencias emocionales y generación de contenido motivacional' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'Motor de toma de decisiones autónoma para NPC de juegos de mundo abierto impulsado por LLM', desc: 'Árbol de comportamiento del NPC integrado con toma de decisiones LLM' },
|
||||
{ title: 'Herramienta de deducción de tramas AIGC y asistencia de control de DM para juegos de misterio inmersivos', desc: 'Las elecciones de los jugadores activan ramas de la historia' },
|
||||
{ title: 'Modificador generativo de finales de novelas interactivas', desc: 'Las elecciones del lector influyen en la dirección de la trama' },
|
||||
{ title: 'Análisis visual CV y comentarista inteligente por IA de partidas de esports', desc: 'Análisis en tiempo real de la pantalla del juego' },
|
||||
{ title: 'Sistema de generación automática de audiolibros con síntesis TTS multicolor', desc: 'Asignación de personajes del texto, generación de voces personalizadas' }
|
||||
],
|
||||
'ecommerce': [
|
||||
{ title: 'Herramienta de producción masiva de páginas de detalles de productos AIGC con alta tasa de conversión', desc: 'Generación de textos de puntos de venta y descripciones de escenarios' },
|
||||
{ title: 'Fábrica de generación de videos de prueba de vestir y exhibición de modelos virtuales con IA', desc: 'Generación de efectos de prueba de vestir en modelos virtuales' },
|
||||
{ title: 'Asistente de traducción y pulido localizado multilingüe con LLM para comercio electrónico transfronterizo', desc: 'Traducción multilingüe de descripciones de productos' },
|
||||
{ title: 'Sistema de transmisión en vivo con avatares digitales AIGC las 24 horas', desc: 'Imagen digital + generación de guiones en tiempo real' },
|
||||
{ title: 'Motor de análisis de tendencias de mercado por IA y predicción de productos exitosos', desc: 'Análisis de tendencias populares, recomendaciones de selección de productos' }
|
||||
],
|
||||
'energy': [
|
||||
{ title: 'Asesor de análisis del comportamiento de consumo eléctrico doméstico y estrategias de ahorro energético con IA', desc: 'Análisis de patrones de consumo, generación de recomendaciones de ahorro' },
|
||||
{ title: 'Sistema de reconocimiento visual CV por dron de defectos en paneles fotovoltaicos', desc: 'Inspección con dron, análisis de imágenes termoinfrarrojas' },
|
||||
{ title: 'Agente de predicción de tendencias de precios de mercado eléctrico al contado y estrategia automática de ganancias con IA', desc: 'Modelo de predicción de precios, generación de estrategias' },
|
||||
{ title: 'Asistente de cálculo automático de emisiones de carbono en toda la cadena empresarial y generación de informes ESG con IA', desc: 'Cálculo de factores de emisión de carbono, generación de informes ESG' },
|
||||
{ title: 'Sistema de predicción de carga ante clima extremo y comando de despacho de emergencia de la red eléctrica con IA', desc: 'Modelo de predicción de carga, generación de estrategias de despacho' }
|
||||
],
|
||||
'av-media': [
|
||||
{ title: 'Herramienta de identificación por IA de fragmentos destacados y edición automática de videos cortos a partir de videos largos', desc: 'Análisis del contenido del video, identificación de fotogramas clave' },
|
||||
{ title: 'Asistente de separación inteligente de ruido de fondo y mejora de voz por IA en video', desc: 'Modelo de separación de audio, eliminación de ruido de fondo' },
|
||||
{ title: 'Estación de trabajo de restauración 4K y colorización inteligente por IA de material audiovisual antiguo', desc: 'Modelo de superresolución de video, colorización automática por IA' },
|
||||
{ title: 'Sistema de doblaje TTS de texto a voz de nivel realista y control emocional', desc: 'Modelo TTS multicolor, control emocional' },
|
||||
{ title: 'Asistente de transcripción inteligente por IA y extracción de tareas pendientes de grabaciones de reuniones', desc: 'Separación y transcripción de voz en reuniones multilingües' }
|
||||
],
|
||||
'ai-marketing': [
|
||||
{ title: 'Motor de redacción automática AIGC de textos virales para Xiaohongshu (RED)', desc: 'Generación de textos de recomendación, optimización de emoji' },
|
||||
{ title: 'Herramienta de diseño inteligente de pósters de marketing y adaptación a múltiples tamaños', desc: 'Emparejamiento inteligente de plantillas de pósters' },
|
||||
{ title: 'Plataforma de generación creativa AIGC de LOGO de marca y construcción del sistema de identidad visual (VI)', desc: 'Generación creativa de LOGO, generación de normativas VI' },
|
||||
{ title: 'Asistente de seguimiento de tendencias populares por IA y generación creativa de marketing oportunista', desc: 'Análisis de ángulos de marketing, generación de propuestas creativas' },
|
||||
{ title: 'Asistente de generación creativa AIGC de guiones de videos cortos y guía de storyboards', desc: 'Generación de guiones y storyboards, sugerencias de filmación' }
|
||||
],
|
||||
'data-intelligence': [
|
||||
{ title: 'Herramienta de generación automática de sentencias SQL a partir de lenguaje natural', desc: 'Conversión de consultas en lenguaje natural a SQL' },
|
||||
{ title: 'Sistema inteligente de inventario y clasificación de activos de datos empresariales', desc: 'Recopilación de metadatos, clasificación automática' },
|
||||
{ title: 'Motor de detección automática de anomalías de calidad de datos y sugerencias de reparación', desc: 'Motor de reglas + modelos ML para detección de anomalías' },
|
||||
{ title: 'Asistente de generación inteligente de informes y configuración de visualización', desc: 'Generación conversacional de configuraciones de informes' },
|
||||
{ title: 'Asistente inteligente de preguntas y respuestas sobre definiciones de indicadores de datos', desc: 'Construcción de base de conocimiento basada en documentos de definición de indicadores' }
|
||||
]
|
||||
}
|
||||
|
||||
// Tabla de mapeo predefinida de recomendaciones
|
||||
const recommendationMap = {
|
||||
// Punto de interés: Contenido creativo
|
||||
'creative-content': {
|
||||
'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
|
||||
'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
|
||||
'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
|
||||
'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
|
||||
},
|
||||
// Punto de interés: Servicios técnicos
|
||||
'tech-service': {
|
||||
'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
|
||||
'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
|
||||
'improve-experience': ['customer-service', 'enterprise', 'programming'],
|
||||
'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
|
||||
},
|
||||
// Punto de interés: Inteligencia de datos
|
||||
'data-intel': {
|
||||
'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
|
||||
'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
|
||||
'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
|
||||
'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
|
||||
},
|
||||
// Punto de interés: Servicio al usuario
|
||||
'user-service': {
|
||||
'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
|
||||
'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
|
||||
'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
|
||||
'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
|
||||
},
|
||||
// Punto de interés: Soluciones sectoriales
|
||||
'industry-solution': {
|
||||
'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
|
||||
'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
|
||||
'improve-experience': ['healthcare', 'education', 'government', 'travel'],
|
||||
'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
|
||||
}
|
||||
}
|
||||
|
||||
const interestOptions = [
|
||||
{ label: 'Generación de contenido creativo', value: 'creative-content', desc: 'Textos, imágenes, videos y otros contenidos creativos' },
|
||||
{ label: 'Herramientas de servicios técnicos', value: 'tech-service', desc: 'Herramientas de desarrollo, automatización, asistencia de código' },
|
||||
{ label: 'Análisis de inteligencia de datos', value: 'data-intel', desc: 'Análisis de datos, predicción, toma de decisiones inteligente' },
|
||||
{ label: 'Experiencia de servicio al usuario', value: 'user-service', desc: 'Atención al cliente, marketing, experiencia de usuario' },
|
||||
{ label: 'Soluciones sectoriales', value: 'industry-solution', desc: 'Aplicaciones profundas en industrias específicas' }
|
||||
]
|
||||
|
||||
const purposeOptions = [
|
||||
{ label: 'Mejorar la eficiencia', value: 'increase-efficiency', desc: 'Automatización, aceleración de procesos' },
|
||||
{ label: 'Reducir costos', value: 'reduce-cost', desc: 'Reducción de personal, optimización de recursos' },
|
||||
{ label: 'Mejorar la experiencia', value: 'improve-experience', desc: 'Satisfacción del usuario, calidad del servicio' },
|
||||
{ label: 'Innovación empresarial', value: 'innovate-business', desc: 'Nuevos productos, nuevos modelos' }
|
||||
]
|
||||
|
||||
const industries = [
|
||||
{ key: 'manufacturing', name: 'Industria manufacturera', anchor: '#_1-industria-manufacturera' },
|
||||
{ key: 'customer-service', name: 'Servicio al cliente inteligente', anchor: '#_2-servicio-al-cliente-inteligente' },
|
||||
{ key: 'education', name: 'Sector educativo', anchor: '#_3-sector-educativo' },
|
||||
{ key: 'programming', name: 'Programación inteligente', anchor: '#_4-programación-inteligente' },
|
||||
{ key: 'healthcare', name: 'Sector salud', anchor: '#_5-sector-salud' },
|
||||
{ key: 'security', name: 'Ciberseguridad', anchor: '#_6-ciberseguridad' },
|
||||
{ key: 'finance', name: 'Gestión financiera, seguros y banca', anchor: '#_7-gestión-financiera-seguros-y-banca' },
|
||||
{ key: 'enterprise', name: 'Servicios empresariales', anchor: '#_8-servicios-empresariales' },
|
||||
{ key: 'content', name: 'Producción y gestión de contenido', anchor: '#_9-producción-y-gestión-de-contenido' },
|
||||
{ key: 'government', name: 'Administración pública inteligente', anchor: '#_10-administración-pública-inteligente' },
|
||||
{ key: 'legal', name: 'Asuntos legales y gestión de contratos', anchor: '#_11-asuntos-legales-y-gestión-de-contratos' },
|
||||
{ key: 'travel', name: 'Turismo y servicios de viaje', anchor: '#_12-turismo-y-servicios-de-viaje' },
|
||||
{ key: 'emotion', name: 'Acompañamiento emocional', anchor: '#_13-acompañamiento-emocional' },
|
||||
{ key: 'entertainment', name: 'Entretenimiento y ocio', anchor: '#_14-entretenimiento-y-ocio' },
|
||||
{ key: 'ecommerce', name: 'Servicios de comercio electrónico', anchor: '#_15-servicios-de-comercio-electrónico' },
|
||||
{ key: 'energy', name: 'Energía', anchor: '#_16-energía' },
|
||||
{ key: 'av-media', name: 'Audio y video', anchor: '#_17-audio-y-video' },
|
||||
{ key: 'ai-marketing', name: 'Marketing con IA', anchor: '#_18-marketing-con-ia' },
|
||||
{ key: 'data-intelligence', name: 'Inteligencia de datos', anchor: '#_19-inteligencia-de-datos' }
|
||||
]
|
||||
|
||||
// Calcular resultados de recomendación - extracción aleatoria del grupo de temas
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!interestPoint.value || !purpose.value) return []
|
||||
|
||||
const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
|
||||
const topics = []
|
||||
|
||||
// Extraer 1-2 temas aleatoriamente de cada industria recomendada
|
||||
keys.forEach(key => {
|
||||
const industry = industries.find(item => item.key === key)
|
||||
const industryTopics = topicPool[key] || []
|
||||
|
||||
if (industry && industryTopics.length > 0) {
|
||||
// Extraer 1-2 temas aleatoriamente
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
industryKey: key,
|
||||
industryName: industry.name,
|
||||
industryAnchor: industry.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Ordenar aleatoriamente y limitar el total
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// Obtener descripción de la selección actual
|
||||
const currentSelection = computed(() => {
|
||||
const interest = interestOptions.find(i => i.value === interestPoint.value)
|
||||
const pur = purposeOptions.find(p => p.value === purpose.value)
|
||||
return {
|
||||
interest: interest?.label || '',
|
||||
purpose: pur?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// Retraso del desplazamiento para asegurar la actualización del DOM
|
||||
setTimeout(() => {
|
||||
// Intentar encontrar por ID (soporta múltiples formatos)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// Si no se encuentra, intentar otros formatos de ID posibles
|
||||
if (!element) {
|
||||
// Intentar quitar el prefijo de guion bajo
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// Si aún no se encuentra, buscar por texto del título
|
||||
if (!element) {
|
||||
// Extraer el nombre de la industria del ancla
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// Coincidencia exacta o por inclusión
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// Resaltar la sección de destino
|
||||
element.style.backgroundColor = '#f0f9ff'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
interestPoint.value = ''
|
||||
purpose.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# Referencia de escenarios de aplicación industrial B2B
|
||||
|
||||
## Guía del capítulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Aplicaciones B2B', 'Aplicaciones industriales', 'Escenarios de IA', 'Referencia de implementación', 'Soluciones sectoriales']" coreOutput="Conocer más de 15 escenarios de aplicación B2B por industria" expectedOutput="Encontrar la dirección de proyecto adecuada para clientes empresariales">
|
||||
|
||||
Este documento recopila las <strong>aplicaciones prácticas de los modelos LLM en escenarios empresariales B2B</strong>. A diferencia del enfoque B2C centrado en la experiencia del usuario y las emociones, los productos B2B se centran más en <strong>resolver necesidades reales del negocio, mejorar la eficiencia y reducir costos</strong>. Cada escenario cuenta con <strong>viabilidad real de implementación</strong>, abarcando desde el <strong>análisis de requisitos hasta la implementación técnica</strong>, sirviendo como referencia para desarrolladores de aplicaciones de IA orientadas a clientes empresariales.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Selección rápida de dirección sectorial
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Encuentra el escenario de aplicación adecuado para ti</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Selecciona tu área de interés y el objetivo que deseas alcanzar. El sistema recomendará escenarios sectoriales relevantes. Haz clic en las etiquetas para saltar al capítulo correspondiente.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="interestPoint" placeholder="Seleccionar área de interés" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in interestOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="purpose" placeholder="Seleccionar objetivo" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in purposeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- Visualización de resultados de recomendación - formato de tabla -->
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
|
||||
Se recomiendan {{ recommendationTopics.length }} escenarios de aplicación para ti
|
||||
<span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
|
||||
({{ currentSelection.interest }} + {{ currentSelection.purpose }})
|
||||
</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="recommendationTopics"
|
||||
style="width: 100%; cursor: pointer;"
|
||||
@row-click="(row) => scrollToAnchor(row.industryAnchor)"
|
||||
highlight-current-row>
|
||||
<el-table-column prop="title" label="Escenario de aplicación" min-width="300">
|
||||
<template #default="scope">
|
||||
<div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="industryName" label="Industria" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px; font-size: 12px; color: #909399;">
|
||||
Haz clic en cualquier fila de la tabla para saltar al capítulo de la industria correspondiente
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensaje cuando la selección está incompleta -->
|
||||
<div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
|
||||
<span v-if="!interestPoint && !purpose">Selecciona un área de interés y un objetivo</span>
|
||||
<span v-else-if="!interestPoint">Selecciona un área de interés</span>
|
||||
<span v-else>Selecciona un objetivo</span>
|
||||
</div>
|
||||
|
||||
<!-- Botón de restablecimiento -->
|
||||
<div v-if="interestPoint || purpose" style="margin-top: 12px;">
|
||||
<el-button size="small" @click="resetSelection">Restablecer selección</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## Introducción rápida a las industrias
|
||||
|
||||
### Tecnologías principales
|
||||
|
||||
En el desarrollo de aplicaciones de IA, las direcciones tecnológicas comunes incluyen:
|
||||
|
||||
1. **LLM (Grandes modelos de lenguaje)**: Especializados en procesar tareas de lenguaje natural, como diálogo, generación de texto, resumen, traducción, etc., adecuados para construir aplicaciones de atención al cliente inteligente, creación de contenido, preguntas y respuestas de conocimiento.
|
||||
2. **VLM (Modelos de lenguaje visual)**: Combinan comprensión visual y capacidades lingüísticas, permitiendo descripción de imágenes, preguntas y respuestas visuales, generación de contenido multimodal, etc., aplicables a escenarios como análisis de imágenes médicas, control de calidad industrial y diseño creativo.
|
||||
3. **GenAI (IA generativa)**: Incluye generación de texto, generación de imágenes (como Stable Diffusion, DALL·E), generación de video, etc., capaz de generar contenido creativo rápidamente, aplicable a áreas como diseño asistido, producción de materiales de marketing y educación.
|
||||
|
||||
### Estrategia de selección
|
||||
|
||||
Los aprendices pueden elegir la dirección de aplicación adecuada según las siguientes dimensiones:
|
||||
|
||||
1. **Orientación por interés**: Priorizar la industria o dirección tecnológica que más les interese para mantener la motivación de aprendizaje. Por ejemplo:
|
||||
- Interés en diseño creativo: probar aplicaciones de producción de contenido o diseño industrial
|
||||
- Interés en desafíos técnicos: probar aplicaciones en ciberseguridad o sector salud
|
||||
- Interés en impacto social: probar aplicaciones en administración pública inteligente o educación
|
||||
|
||||
2. **Adaptación sectorial**: Combinar el trasfondo sectorial propio o las ventajas de recursos para elegir escenarios:
|
||||
- Profesionales de la industria manufacturera: considerar primero aplicaciones de fabricación industrial o servicios empresariales
|
||||
- Educadores: priorizar aplicaciones del sector educativo o producción de contenido
|
||||
- Profesionales de la salud: explorar aplicaciones del sector salud o gestión de la salud
|
||||
|
||||
3. **Dificultad técnica**: Elegir el nivel adecuado de complejidad según la base técnica propia:
|
||||
- Nivel inicial: servicio al cliente inteligente, creación de contenido, sistemas simples de preguntas y respuestas
|
||||
- Nivel intermedio: control de calidad industrial, análisis de imágenes médicas, asistente de código inteligente
|
||||
- Nivel profesional: control de riesgos financieros, ciberseguridad, aplicaciones multimodales complejas
|
||||
|
||||
## 1. Industria manufacturera
|
||||
|
||||
Los escenarios de la industria manufacturera se centran principalmente en tres direcciones: asistencia al diseño, optimización de la producción y mantenimiento inteligente. Las aplicaciones comunes incluyen la utilización de IA para asistir el diseño de productos, la revisión automatizada de planos, la generación inteligente de documentación técnica, el diagnóstico de fallos en equipos industriales, etc., capaces de mejorar significativamente la eficiencia del diseño y reducir los costos de mantenimiento.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Plataforma de diseño asistido por IA para exteriores de autobuses de nueva energía | Diseño conceptual de exteriores basado en modelos de generación de imágenes, combinado con LLM para verificación de normativas de diseño e iteración creativa; integración de renderizado 3D con Three.js |
|
||||
| 2 | Asistente inteligente de diseño y revisión de planos técnicos | Construcción de una base de conocimiento de normativas de diseño empresarial mediante tecnología RAG, DALL·E genera imágenes de referencia para facilitar la comprensión; integración con API de CAD para análisis automatizado de planos |
|
||||
| 3 | Generación y gestión automatizada de documentación técnica | Generación automática de especificaciones de productos y manuales de operación a partir de la base de datos del producto mediante LLM, ChromaDB almacena documentos históricos para búsqueda inteligente |
|
||||
| 4 | Asistente de generación automática de informes de inspección de equipos de producción | El personal de inspección describe el estado del equipo por voz, LLM genera informes de inspección estructurados; asociación automática con registros históricos de fallos |
|
||||
| 5 | Sistema inteligente de despacho y planificación de rutas para carretillas elevadoras en fábrica | LLM analiza tareas de pedidos y ubicaciones del almacén, combinado con API de mapas para generar el plan de despacho óptimo |
|
||||
| 6 | Almacén de datos basado en recuperación de información LLM | Tecnología Text-to-SQL para convertir lenguaje natural en consultas a bases de datos, Superset para visualización de resultados; Doris o ClickHouse como motor OLAP |
|
||||
| 7 | Asistente de preguntas y respuestas sobre diagnóstico de fallos en equipos industriales | Construcción de una base de conocimiento vectorial basada en casos históricos de fallos, LLM proporciona recomendaciones de diagnóstico y soluciones según la descripción del fallo |
|
||||
| 8 | Generación inteligente de informes de control de calidad y clasificación de defectos en producción | OCR identifica defectos en fotografías de control de calidad, LLM genera informes de control de calidad estructurados; clasificación automática de tipos y gravedad de defectos |
|
||||
| 9 | Asistente inteligente de inventario y generación de informes de recuento | Ingreso de datos de recuento, LLM compara automáticamente con el inventario del sistema y genera informe de diferencias; alerta de inventario anómalo |
|
||||
| 10 | Sistema inteligente de preguntas y respuestas sobre optimización de procesos de producción | Construcción de base de conocimiento RAG basada en documentos de procesos de producción, LLM proporciona recomendaciones de optimización según problemas de producción |
|
||||
|
||||
## 2. Servicio al cliente inteligente
|
||||
|
||||
Los escenarios de servicio al cliente inteligente se centran en la mejora de la eficiencia del servicio al cliente y la optimización de la experiencia del usuario. Las aplicaciones típicas abarcan la integración multicanal, la generación de respuestas inteligentes, el análisis de emociones de los clientes, el procesamiento automatizado de tickets, etc., ayudando a las empresas a lograr servicio al cliente 24/7.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Sistema de respuesta automática y generación de tickets de servicio al cliente multicanal inteligente | Integración de mensajes de múltiples canales (WeChat, APP, sitio web, etc.), LLM comprende la intención y genera respuestas creando tickets automáticamente; uso de LangChain para construir el flujo de conversación, MySQL para almacenar datos de tickets |
|
||||
| 2 | Asistente de prospección y seguimiento de clientes potenciales | LLM analiza registros históricos de conversaciones de servicio al cliente, identifica características de clientes con alta intención de compra y los puntúa; sistema de recomendación combinado con algoritmos de filtrado colaborativo |
|
||||
| 3 | Sistema inteligente de búsqueda y respuestas del conocimiento interno empresarial | Construcción de base de conocimiento vectorial basada en Confluence y documentos internos, LLM combinado con tecnología RAG para generar respuestas |
|
||||
| 4 | Sistema de encuestas de satisfacción del cliente y gestión de mejora del servicio | LLM analiza automáticamente el contenido de las conversaciones de servicio al cliente para clasificación de sentimientos y puntuación de satisfacción; informes BI muestran los resultados del análisis |
|
||||
| 5 | Herramienta de resumen inteligente de conversaciones y generación de tickets de servicio | Tras finalizar la conversación, LLM genera automáticamente un resumen de la sesión y extrae información clave; llenado automático de campos del ticket |
|
||||
| 6 | Asistente de detección automática de conformidad de guiones de servicio al cliente | El agente ingresa el contenido de respuesta, LLM detecta en tiempo real la conformidad del guion y palabras sensibles; proporciona sugerencias de modificación |
|
||||
| 7 | Herramienta de resumen automático y clasificación de tickets de servicio al cliente | LLM genera resúmenes y clasificación automática de etiquetas a partir de registros de conversaciones largas; Elasticsearch soporta búsqueda de texto completo en tickets |
|
||||
| 8 | Herramienta de monitoreo de emociones del cliente y alerta de anomalías | Análisis en tiempo real de características de tono de voz y emociones en texto, LLM identifica emociones anómalas y activa alertas; notificaciones de alerta por WebSocket |
|
||||
| 9 | Sistema de base de conocimiento de guiones ganadores del servicio al cliente | LLM analiza casos de conversación excelentes de agentes, extrae plantillas de guiones ganadores; sistema de recomendación sugiere guiones en tiempo real según el contexto de la conversación |
|
||||
| 10 | Asistente de análisis de contenido de llamadas salientes y control de calidad | Tras la transcripción de grabaciones de llamadas salientes, LLM analiza el contenido de la conversación para extraer información clave; generación automática de informes de control de calidad y sugerencias de mejora |
|
||||
|
||||
## 3. Sector educativo
|
||||
|
||||
Los escenarios del sector educativo buscan lograr una enseñanza personalizada y una gestión educativa inteligente. Las aplicaciones centrales incluyen planificación inteligente de rutas de aprendizaje, corrección automatizada de tareas, generación de planes de clase, análisis del rendimiento académico, etc., promoviendo la optimización de la asignación de recursos educativos y la enseñanza adaptada a las capacidades de cada estudiante.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Sistema de planificación de rutas de aprendizaje de idiomas personalizado y tutoría inteligente | LLM evalúa el nivel actual del aprendiz, planifica tareas de estudio diarias según los objetivos de aprendizaje; algoritmo de recomendación combinado con grafo de conocimiento para recomendar recursos de aprendizaje |
|
||||
| 2 | Plataforma de elaboración automatizada de planes de clase y recomendación de recursos educativos | LLM genera la estructura del plan de clase y el diseño didáctico según el programa de estudios; base de conocimiento vectorial almacena planes de clase y materiales de calidad, soportando búsqueda por palabras clave y recomendaciones similares |
|
||||
| 3 | Sistema de corrección automatizada de tareas y análisis diagnóstico del rendimiento | LLM corrige automáticamente preguntas subjetivas y genera sugerencias de corrección, el grafo de conocimiento identifica los puntos débiles de conocimiento del estudiante |
|
||||
| 4 | Construcción de modelos de competencias laborales y mapas de aprendizaje | LLM analiza las descripciones de puestos para extraer requisitos de competencias, construyendo perfiles de competencias laborales; generación de mapas de aprendizaje personalizados según las brechas identificadas |
|
||||
| 5 | Sistema de construcción del currículo escolar y herramientas de elaboración de materiales didácticos | LLM analiza las características de la escuela y las necesidades de los estudiantes, genera la estructura del currículo escolar; integración con API de generación de PPT para crear automáticamente materiales |
|
||||
| 6 | Práctica conversacional individualizada de idiomas extranjeros en escenarios simulados | LLM asume diferentes roles para practicar conversaciones orales, ASR reconoce la pronunciación y la puntúa; TTS genera ejemplos de pronunciación estándar |
|
||||
| 7 | Plataforma de recomendación basada en big data para selección de carreras universitarias y orientación profesional | LLM analiza información del estudiante como puntuaciones, clasificaciones e intereses, combinado con datos de admisión para recomendar universidades y carreras |
|
||||
| 8 | Asistente de programación para niños | LLM explica la lógica del código y proporciona orientación de programación, soportando alternancia entre lenguajes por bloques y Python |
|
||||
| 9 | Herramienta de generación automática de mapas mentales de conceptos y recomendación de rutas de aprendizaje | Ingreso del tema del curso, LLM genera automáticamente mapas mentales de conceptos; recomendación del siguiente contenido de estudio según el progreso |
|
||||
| 10 | Motor de calificación y corrección automatizada de redacciones en chino e inglés | LLM califica desde múltiples dimensiones (temática, estructura, lenguaje, diversidad) y genera comentarios; comparación con redacciones modelo destacadas |
|
||||
|
||||
## 4. Programación inteligente
|
||||
|
||||
Los escenarios de programación inteligente buscan mejorar la eficiencia del desarrollo y la calidad del código. Las aplicaciones típicas incluyen autocompletado inteligente de código, reparación automática de bugs, generación automatizada de pruebas, conversión de código, etc., permitiendo a los desarrolladores centrarse en la lógica del negocio en lugar de tareas de codificación repetitivas.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Asistente de autocompletado de código inteligente y reparación automática de bugs | Modelo de código ajustado basado en CodeLlama, plugin de IDE que ofrece sugerencias de autocompletado en tiempo real; LLM analiza el stack de errores para localizar automáticamente bugs y generar código de corrección |
|
||||
| 2 | Plataforma de construcción de aplicaciones low-code y automatización de flujos | El usuario describe los requisitos en lenguaje natural, LLM los convierte en configuración low-code o framework de código |
|
||||
| 3 | Sistema de generación de casos de prueba unitarios | Análisis AST del código fuente para extraer la lógica de funciones, LLM genera casos de prueba con condiciones límite y escenarios de excepción; integración con Jest/Pytest para ejecutar pruebas |
|
||||
| 4 | Herramienta de análisis inteligente de código y migración entre lenguajes | Análisis de la estructura del código basado en Tree-sitter, LLM analiza la calidad del código y proporciona sugerencias de optimización; combinación con motor de reglas para conversión entre lenguajes |
|
||||
| 5 | Herramienta de generación automática de sentencias SQL a partir de lenguaje natural | LLM convierte consultas en lenguaje natural a SQL, soportando uniones complejas de múltiples tablas y consultas de agregación |
|
||||
| 6 | Plataforma de pruebas automatizadas de API y generación de documentación | LLM analiza comentarios del código y definiciones de interfaces, genera automáticamente casos de prueba y documentación de API; integración con Postman para ejecución de pruebas |
|
||||
| 7 | Herramienta inteligente de grabación y mantenimiento de scripts de pruebas UI | Plugin del navegador que graba las operaciones del usuario, LLM analiza la intención de las operaciones para generar scripts de prueba; IA repara localizadores obsoletos |
|
||||
| 8 | Análisis de registros del sistema y localización de fallos | ELK Stack recopila datos de registros, LLM analiza registros anómalos para extraer información clave y localizar la causa raíz; recomendación de soluciones de reparación |
|
||||
| 9 | Herramienta de generación automática de código de interfaz de usuario (UI) | Imágenes de diseño reconocidas por OCR para identificar la estructura de layout, LLM genera CSS responsivo y código de componentes; integración con TailwindCSS para soportar múltiples frameworks de estilos |
|
||||
| 10 | Asistente de diseño inteligente y modelado de estructura de base de datos | Documentos de requisitos del negocio ingresados a LLM, generación automática de diagramas ER y estructuras de tablas; soporte de exportación de scripts DDL para MySQL/PostgreSQL |
|
||||
|
||||
## 5. Sector salud
|
||||
|
||||
Los escenarios del sector salud buscan mejorar la eficiencia diagnóstica y la calidad de los servicios médicos. Las aplicaciones comunes incluyen generación automatizada de historiales clínicos, preguntas y respuestas sobre conocimiento médico, análisis asistido de imágenes, soporte a la investigación farmacológica, etc., promoviendo la transformación inteligente del sector de la salud.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Asistente inteligente de interpretación de informes de análisis clínicos | Carga de imágenes de informes de análisis, OCR identifica indicadores clave, LLM interpreta valores anómalos y genera explicaciones en lenguaje sencillo |
|
||||
| 2 | Experto en consultas de salud basado en tecnología de búsqueda de conocimiento | Construcción de un grafo de conocimiento médico (ICD-10, prospectos de medicamentos, guías clínicas), búsqueda RAG para generar respuestas |
|
||||
| 3 | Plataforma de análisis de decisión de datos de investigación clínica | Integración de datos EMR y resultados de análisis, LLM asiste en la generación de código de análisis estadístico y gráficos de visualización; soporte para estudios de cohorte y análisis de supervivencia |
|
||||
| 4 | Sistema inteligente de generación de preguntas de examen médico y análisis de errores | Ingreso de capítulos de libros de texto y puntos de conocimiento, LLM genera preguntas de práctica y explicaciones; registro automático de errores y generación de análisis de puntos débiles |
|
||||
| 5 | Experto en preguntas y respuestas del grafo de conocimiento del proceso completo de investigación farmacológica | Construcción de un grafo de conocimiento fármaco-diana-enfermedad, LLM responde preguntas relacionadas con investigación; soporte para búsqueda bibliográfica y recomendación de protocolos experimentales |
|
||||
| 6 | Asistente inteligente de preguntas y respuestas sobre prospectos de medicamentos | Carga de imágenes de prospectos o ingreso del nombre del medicamento, LLM responde preguntas sobre dosificación, efectos adversos, precauciones, etc. |
|
||||
| 7 | Asistente de generación de artículos de divulgación sobre enfermedades | Ingreso del nombre de la enfermedad y la audiencia, LLM genera artículos de divulgación accesibles; soporte de múltiples versiones (versión para pacientes/versión para familiares) |
|
||||
| 8 | Herramienta de generación automática de informes de imágenes médicas | El radiólogo describe las características de las imágenes, LLM genera automáticamente un informe estructurado; soporte de plantillas para tipos comunes de exámenes |
|
||||
| 9 | Asistente de generación y archivo inteligente de registros quirúrgicos | Grabación por voz de pasos clave durante la cirugía, LLM genera registros quirúrgicos estructurados; asociación automática con códigos quirúrgicos |
|
||||
| 10 | Asistente inteligente de recordatorio de medicación para enfermedades crónicas | El paciente ingresa su lista de medicamentos, LLM genera recordatorios de medicación personalizados; soporte de verificación de contraindicaciones y preguntas y respuestas interactivas |
|
||||
|
||||
## 6. Ciberseguridad
|
||||
|
||||
Los escenarios de ciberseguridad se centran en la protección de seguridad y el control de riesgos. Las aplicaciones centrales abarcan detección de vulnerabilidades, análisis de inteligencia sobre amenazas, identificación de correos de phishing, respuesta a incidentes de seguridad, etc., construyendo un sistema integral de protección de seguridad inteligente para las empresas.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Motor de detección y reparación de vulnerabilidades de seguridad en código | Herramienta de análisis estático de código (SAST) escanea el código, LLM analiza los principios de las vulnerabilidades y genera sugerencias de reparación; integración con pipeline CI/CD |
|
||||
| 2 | Sistema inteligente de identificación e interceptación de correos de phishing generados por IA | LLM analiza el contenido del correo, las características del remitente y la seguridad de los enlaces, identifica correos de phishing generados por IA; integración con la pasarela de correo para interceptar en tiempo real |
|
||||
| 3 | Asistente de generación automática de informes diarios de operaciones de seguridad | Resumen de registros de dispositivos de seguridad, LLM extrae automáticamente eventos clave y genera informes diarios; marcado highlight de eventos anómalos |
|
||||
| 4 | Asistente inteligente de preguntas y respuestas de la base de conocimiento de seguridad | Construcción de base de conocimiento vectorial basada en documentos de seguridad y la base CVE, LLM responde preguntas sobre técnicas de seguridad y procedimientos de respuesta |
|
||||
| 5 | Asistente de generación inteligente de informes de pruebas de penetración | Tras completar la prueba de penetración, LLM genera automáticamente el informe según la descripción de vulnerabilidades; generación masiva de sugerencias de reparación |
|
||||
| 6 | Protección contra código malicioso y monitoreo de cumplimiento de privacidad | Análisis en sandbox del comportamiento de archivos sospechosos, LLM identifica características maliciosas y genera firmas; escaneo de identificación de datos privados |
|
||||
| 7 | Herramienta de generación de listas de verificación de configuración de seguridad | Ingreso del tipo de sistema objetivo, LLM genera listas de verificación de configuración de seguridad; soporte de estándares como MLPS 2.0, CIS, etc. |
|
||||
| 8 | Asistente de consulta y análisis inteligente de inteligencia sobre amenazas | Conexión con múltiples fuentes de inteligencia sobre amenazas (código abierto, comerciales), LLM interpreta la inteligencia y la relaciona con los activos empresariales; recomendación de estrategias de protección |
|
||||
| 9 | Asistente de generación de informes de revisión post-incidente de seguridad | Tras un incidente de seguridad, LLM genera automáticamente un informe de revisión según la línea de tiempo; análisis de causa raíz y sugerencias de mejora |
|
||||
| 10 | Centro de monitoreo y alerta temprana de inteligencia sobre amenazas global | Rastreo web de información de seguridad global y divulgación de vulnerabilidades, LLM extrae información clave y evalúa el impacto; notificaciones de alerta por correo/SMS |
|
||||
|
||||
## 7. Gestión financiera, seguros y banca
|
||||
|
||||
Los escenarios del sector financiero se centran en el control de riesgos y la inteligencia empresarial. Las aplicaciones típicas incluyen evaluación de riesgos crediticios, asesor de gestión patrimonial, generación de informes financieros, monitoreo contra el blanqueo de capitales, etc., mejorando la eficiencia operativa y la capacidad de gestión de riesgos de las instituciones financieras.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Asistente de generación inteligente de informes de debida diligencia crediticia | Ingreso de información básica de la empresa y datos financieros, LLM genera automáticamente el informe de debida diligencia crediticia; marcado automático de puntos de riesgo |
|
||||
| 2 | Asesor inteligente de gestión de patrimonio bancario privado | LLM analiza el perfil de riesgo y los objetivos financieros del cliente, genera recomendaciones de asignación de activos; integración con productos financieros y base de fondos |
|
||||
| 3 | Asistente de generación inteligente y verificación de cumplimiento de prospectos de IPO | Plantillas modulares del prospecto de oferta, LLM llena automáticamente la descripción del negocio y los factores de riesgo; motor de reglas de verificación de cumplimiento para comprobar la consistencia entre secciones |
|
||||
| 4 | Sistema de generación automática de informes financieros y alerta de anomalías operativas | Recopilación automática de datos del sistema financiero, LLM genera la sección de análisis financiero y discusión de la dirección; reglas de alerta para indicadores anómalos |
|
||||
| 5 | Asistente de extracción de información y preguntas y respuestas sobre facturas y recibos financieros | Carga de imágenes de facturas, OCR reconoce la información, LLM responde preguntas relacionadas con los documentos; soporte para facturas de IVA, billetes de tren, etc. |
|
||||
| 6 | Asistente de búsqueda inteligente y preguntas y respuestas sobre casos regulatorios | Construcción de base de conocimiento basada en casos de sanciones regulatorias, LLM responde preguntas de cumplimiento y proporciona referencias de casos |
|
||||
| 7 | Entrenador inteligente de guiones para agentes de seguros | LLM asume el papel de diferentes tipos de clientes para simular conversaciones, evalúa la conformidad y la persuasión del guion del agente; análisis de transcripción de grabaciones |
|
||||
| 8 | Plataforma de análisis de cláusulas de pólizas de seguros y comparación con la competencia | Análisis estructurado de cláusulas, LLM genera resúmenes de puntos destacados y precauciones |
|
||||
| 9 | Servicio de reconocimiento de emociones en conversaciones con clientes | Reconocimiento de emociones por voz combinado con detección de conformidad del guion, retroalimentación en tiempo real de sugerencias de mejora para el agente |
|
||||
| 10 | Asistente de consulta inteligente del progreso de reclamaciones de seguros y diálogo | El usuario ingresa el número de póliza o de denuncia, LLM consulta el progreso de la reclamación y responde preguntas relacionadas |
|
||||
|
||||
## 8. Servicios empresariales
|
||||
|
||||
Los escenarios de servicios empresariales buscan mejorar la eficiencia operativa y el nivel de gestión organizacional. Las aplicaciones comunes incluyen gestión de relaciones con clientes, predicción de ventas, monitoreo de reputación, gestión inteligente de RRHH, etc., ayudando a las empresas a lograr su transformación digital.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Plataforma de análisis de retención de clientes y alerta temprana de pérdida | Recopilación de datos de comportamiento mediante tracking de usuarios, modelo ML predice la probabilidad de pérdida, LLM genera sugerencias de retención |
|
||||
| 2 | Plataforma de prospección y correo de marketing B2B | Filtrado de clientes objetivo a partir de datos empresariales, LLM genera contenido de marketing personalizado; integración con plataforma de envío masivo de correos |
|
||||
| 3 | Plataforma de monitoreo de pipeline de ventas y predicción de resultados | Recopilación automática de datos de CRM, LLM analiza el embudo de ventas y predice el cumplimiento de objetivos; alertas de anomalías para los gerentes |
|
||||
| 4 | Radar de monitoreo de reputación de marca y alerta temprana de crisis | Recopilación de datos de opinión pública de toda la web (redes sociales, noticias, foros), LLM analiza sentimientos y tendencias de propagación; alertas de crisis |
|
||||
| 5 | Asistente inteligente de redacción de correos profesionales y gestión de la comunicación emocional | Comprensión del contexto del correo, LLM genera borradores de correos profesionales; análisis de emociones con retroalimentación de sugerencias de mejora |
|
||||
| 6 | Sistema de análisis inteligente de currículums y emparejamiento con puestos | Análisis de PDF de currículums para extraer información clave, LLM empareja con puestos adecuados y genera sugerencias de entrevista; integración con sistemas ATS |
|
||||
| 7 | Guía de incorporación y asistente de preguntas y respuestas para nuevos empleados | Búsqueda RAG en base de conocimiento de documentos de incorporación, LLM responde preguntas frecuentes de los nuevos empleados |
|
||||
| 8 | Plataforma de retroalimentación de desempeño y gestión de objetivos OKR | Recopilación de datos del sistema OKR, LLM analiza el cumplimiento de objetivos y genera sugerencias de retroalimentación; recopilación de feedback 360° |
|
||||
| 9 | Registro inteligente de reuniones y gestión de tareas pendientes | Transcripción de grabaciones de reuniones, LLM extrae puntos clave de discusión y tareas pendientes; creación automática de tareas en el sistema de gestión |
|
||||
| 10 | Reconocimiento de facturas y procesamiento automatizado de reembolsos | OCR reconoce la información de las facturas, verificación automática de autenticidad y cumplimiento de políticas de reembolso; integración con el sistema financiero |
|
||||
|
||||
## 9. Producción y gestión de contenido
|
||||
|
||||
Los escenarios de producción y gestión de contenido se centran en la generación creativa y la gestión de tráfico. Las aplicaciones centrales incluyen creación de textos, producción de videos cortos, transmisión en vivo con avatares digitales, optimización SEO, etc., ayudando a las empresas a mejorar la eficiencia de producción de contenido y las tasas de conversión de marketing.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Plataforma de asistencia creativa para contenido de cine y televisión y novelas | LLM proporciona asistencia creativa como sinopsis, desarrollo de personajes, generación de diálogos; mapas mentales para visualizar la estructura de la historia |
|
||||
| 2 | Asistente de redacción inteligente de historias de marca y artículos de relaciones públicas | Ingreso de palabras clave de marca e información del producto, LLM genera versiones de textos en múltiples estilos; integración con API de pruebas A/B |
|
||||
| 3 | Sistema de gestión de transmisión en vivo e interacción de avatares digitales virtuales | Modelado de imagen digital + voz TTS + diálogo LLM, respuesta en tiempo real a los comentarios de los espectadores; integración con transmisión OBS |
|
||||
| 4 | Generación de guiones de videos cortos y edición inteligente | LLM genera guiones y storyboards de videos cortos, Sora/Runway genera fragmentos de video; herramienta de edición los ensambla automáticamente |
|
||||
| 5 | Transcripción por voz de reuniones de ventas y recomendación de guiones | Transcripción ASR de llamadas telefónicas, LLM analiza la conversación y recomienda guiones ganadores; integración con sistema CRM |
|
||||
| 6 | Sistema inteligente de generación y diseño de contenido de marketing | Ingreso de información del producto, LLM genera textos de marketing y extracción de puntos de venta; integración con plantillas de Canva/Gaoding |
|
||||
| 7 | Sistema de monitoreo en tiempo real del ROI de publicidad multicanal y optimización de estrategias | Integración con APIs de plataformas publicitarias para recopilar datos, LLM analiza el rendimiento y genera sugerencias de optimización; alertas de anomalías |
|
||||
| 8 | Análisis de palabras clave de motores de búsqueda y análisis de tráfico | Recopilación de datos de Baidu Index, 5118, LLM analiza tendencias y competitividad de palabras clave; recomendación de temas de contenido |
|
||||
| 9 | Plataforma de análisis de publicidad de la competencia | API de plataformas de datos de terceros para recopilar anuncios de la competencia, LLM analiza estrategias de publicación y características creativas |
|
||||
| 10 | Sistema de análisis inteligente de temas populares y recomendación de contenido de toda la web | Recopilación de datos de tendencias de Weibo, listas populares de Douyin, LLM analiza tendencias y recomienda ángulos temáticos; programación calendario de contenido |
|
||||
|
||||
## 10. Administración pública inteligente
|
||||
|
||||
Los escenarios de administración pública inteligente buscan mejorar la eficiencia del servicio gubernamental y la capacidad de gobernanza. Las aplicaciones típicas incluyen navegación inteligente de líneas de servicio gubernamental, preguntas y respuestas sobre políticas, optimización de trámites administrativos, gestión de eventos urbanos, etc., promoviendo la construcción del gobierno digital.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Sistema de navegación por voz inteligente y despacho automático de la línea de servicio ciudadano 12345 | Reconocimiento de voz de las llamadas de los ciudadanos, LLM comprende la solicitud y la despacha inteligentemente al departamento correspondiente; flujo automático de tickets |
|
||||
| 2 | Robot de guía inteligente y respuestas sobre políticas para oficinas de servicios gubernamentales | Búsqueda RAG en base de conocimiento gubernamental, LLM responde sobre procedimientos y políticas; integración con sistema de turnos |
|
||||
| 3 | Plataforma de emparejamiento inteligente y envío preciso de políticas de beneficio empresarial | Análisis estructurado de políticas, perfil empresarial con emparejamiento automático de políticas aplicables; recordatorios por SMS/correo |
|
||||
| 4 | Asistente de pre-revisión inteligente y verificación de cumplimiento de materiales administrativos | Reconocimiento OCR de materiales y extracción de información clave, LLM verifica la integridad y conformidad de los documentos |
|
||||
| 5 | Sistema de detección de comportamiento anómalo en videovigilancia de seguridad pública | Análisis en tiempo real de flujos de video, modelo CV detecta comportamientos anómalos (peleas, caídas, etc.); notificaciones de alerta |
|
||||
| 6 | Plataforma de identificación inteligente y gestión de despacho de eventos urbanos en cuadrícula | Recopilación de datos de percepción urbana (IoT, cámaras), LLM identifica el tipo de evento y lo despacha |
|
||||
| 7 | Sistema de análisis big data de opinión pública y alerta temprana de riesgos sociales | Análisis fusionado de múltiples fuentes de datos (línea de servicio gubernamental, opinión pública en internet, encuestas comunitarias); LLM identifica puntos calientes de riesgo |
|
||||
| 8 | Plataforma de digitalización y archivo inteligente de registros gubernamentales | OCR reconoce el contenido textual de los archivos, LLM extrae información clave y los clasifica automáticamente; soporte de búsqueda de texto completo |
|
||||
| 9 | Plataforma de comando de emergencia y despacho inteligente de recursos de rescate para eventos públicos | Recopilación de información del evento, LLM genera el plan de respuesta de emergencia; algoritmo de optimización de despacho de recursos |
|
||||
| 10 | Sistema de monitoreo en cuadrícula de contaminación ambiental atmosférica y localización precisa de fuentes | Recopilación de datos de sensores de calidad del aire, modelo CV identifica fuentes de contaminación; LLM analiza tendencias de contaminación y rastrea el origen |
|
||||
|
||||
## 11. Asuntos legales y gestión de contratos
|
||||
|
||||
Los escenarios de asuntos legales se centran en la mejora de la eficiencia de los servicios legales y la gestión de cumplimiento. Las aplicaciones comunes incluyen revisión de contratos, análisis de casos, monitoreo regulatorio, generación de documentos legales, etc., proporcionando herramientas inteligentes para los profesionales del derecho.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Agent de detección de riesgos y vulnerabilidades en contratos con un clic | Análisis estructurado del texto del contrato, LLM identifica problemas potenciales comparando con la lista de verificación de riesgos; marcado de cláusulas de alto riesgo |
|
||||
| 2 | Plataforma de revisión de cumplimiento y sugerencias de modificación de contratos empresariales en todo su ciclo de vida | Comparación de cláusulas contractuales con la base de datos normativa, LLM genera informes de cumplimiento; seguimiento de sugerencias de modificación |
|
||||
| 3 | Asesor de evaluación inteligente por IA de la tasa de éxito en casos similares | Extracción de características del caso, búsqueda y emparejamiento de casos similares; LLM analiza los factores que influyen en el éxito |
|
||||
| 4 | Radar de monitoreo en tiempo real de cambios legislativos y análisis de impacto empresarial | Actualización en tiempo real de la base de datos legislativa, LLM analiza el contenido modificado y evalúa el impacto empresarial; notificaciones de alerta |
|
||||
| 5 | Herramienta de redacción automática AIGC de cartas de abogado | Ingreso de la declaración de hechos, LLM genera plantillas de cartas de abogado estandarizadas; verificación de elementos y cumplimiento normativo |
|
||||
| 6 | Grabadora de transcripción en tiempo real de juicios y extracción automatizada de puntos de controversia | Transcripción ASR de grabaciones de juicios, LLM extrae puntos de controversia y argumentos clave; marcado de marcas de tiempo |
|
||||
| 7 | Sistema de monitoreo automatizado de infracciones de propiedad intelectual y obtención de pruebas blockchain de toda la web | Monitoreo de infracciones en plataformas de comercio electrónico y redes sociales; recopilación y almacenamiento automático de evidencia |
|
||||
| 8 | Agent de verificación de consistencia de datos clave y alerta temprana de riesgos en prospectos de IPO basado en LLM | Comparación de datos entre múltiples secciones del prospecto, LLM identifica inconsistencias y anomalías en los datos; marcado de riesgos |
|
||||
| 9 | Plugin de explicación en lenguaje sencillo de cláusulas legales complejas | Selección de disposiciones legales, LLM genera explicaciones fáciles de entender |
|
||||
| 10 | Sistema de organización inteligente y visualización de la cadena de pruebas de un caso | Carga de materiales probatorios, LLM analiza las relaciones entre pruebas y la línea de tiempo |
|
||||
|
||||
## 12. Turismo y servicios de viaje
|
||||
|
||||
Los escenarios de turismo y viajes buscan mejorar la experiencia de viaje y la comodidad del servicio. Las aplicaciones centrales incluyen planificación inteligente de itinerarios, predicción de precios, tours virtuales, servicios de traducción, etc., haciendo que los viajes sean más agradables y sin complicaciones.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Generador de itinerarios automáticos basado en AIGC para viajeros perezosos | Ingreso de preferencias del usuario (días, presupuesto, intereses), LLM genera planes de itinerario diario; API de atracciones para obtener horarios y precios de entradas |
|
||||
| 2 | Robot de predicción de tendencias de precios de vuelos y hoteles de toda la web y bloqueo automático de precios bajos | Recopilación de datos de precios de plataformas OTA, modelo ML predice tendencias de precios; alertas de monitoreo de precios |
|
||||
| 3 | Asesor de reorganización de itinerarios entre aerolíneas y recomendación de planes de emergencia tras cancelación de vuelos | Monitoreo del estado de vuelos, LLM analiza planes de itinerario alternativos; comparación de precios entre aerolíneas |
|
||||
| 4 | Sistema de pre-revisión inteligente de documentos de visa y asistencia de llenado automatizado | Carga de fotos de documentos, verificación de integridad de información mediante OCR; llenado automático de formularios |
|
||||
| 5 | Asistente de traducción por voz en tiempo real y traducción visual de menús para viajes al extranjero | Modelo de traducción por voz sin conexión, OCR de imágenes de menús para reconocimiento y traducción |
|
||||
| 6 | Analizador de guía para evitar hoteles problemáticos basado en reseñas reales de big data | Recopilación de datos de reseñas de hoteles, LLM extrae palabras clave de reseñas positivas y negativas |
|
||||
| 7 | Plataforma de vista previa inmersiva en VR y selección virtual de habitaciones en el destino | Recopilación de imágenes panorámicas 360°, tecnología VR para vista previa inmersiva; recorrido virtual de habitaciones |
|
||||
| 8 | Asistente de generación automática de diarios de viaje ilustrados y textos para redes sociales a partir de huellas de viaje | Extracción de información de fecha y lugar de las fotos, LLM genera textos de diarios de viaje; composición con plantillas |
|
||||
| 9 | Plataforma de recopilación automática de facturas de viajes de negocios y gestión de reembolsos conforme a normativa | Integración con API de plataformas de viajes, recopilación automática de información de facturas; verificación de cumplimiento |
|
||||
| 10 | Predicción en tiempo real de congestión de visitantes y navegación con rutas de visita en horarios no pico | Recopilación de datos de flujo de visitantes en atracciones, modelo ML predice períodos de congestión; recomendación de horarios no pico |
|
||||
|
||||
## 13. Acompañamiento emocional
|
||||
|
||||
Los escenarios de acompañamiento emocional se centran en la salud mental y el consuelo emocional. Las aplicaciones típicas incluyen compañeros virtuales, consultas emocionales, entrenamiento cognitivo, orientación psicológica, etc., proporcionando acompañamiento y apoyo las 24 horas del día.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Compañero virtual de compañía profunda 24 horas basado en modelos LLM | Sistema de memoria que almacena el historial de conversaciones, LLM genera respuestas personalizadas; módulo de apoyo emocional |
|
||||
| 2 | Asesor de IA de reconocimiento emocional multimodal y orientación psicológica | Análisis de tono de voz + reconocimiento de emociones en texto, LLM genera sugerencias de orientación; alerta de intervención en crisis |
|
||||
| 3 | Avatar digital de entrenamiento cognitivo y recuperación de memorias para personas con Alzheimer | Juegos cognitivos (memoria, cálculo, lenguaje) para entrenamiento; fotografías antiguas/canciones antiguas que activan recuerdos |
|
||||
| 4 | Entrenador de práctica social simulada con AIGC para personas con ansiedad social | Simulación de escenarios sociales virtuales, LLM asume diferentes roles; sugerencias de habilidades sociales |
|
||||
| 5 | Generador personalizado de cuentos para dormir para niños con IA generativa | Los padres ingresan el tema y las preferencias, LLM genera cuentos personalizados; generación de música de fondo |
|
||||
| 6 | Sistema de restauración digital de vidas de seres queridos fallecidos y diálogo trans temporal con LLM | Entrenamiento de modelo personalizado con datos vitales (voz, textos); generación de conversaciones con memoria |
|
||||
| 7 | Chatbot empático de espejo de personalidad basado en datos MBTI con IA | Ingreso de resultados de tests MBTI, LLM genera análisis de personalidad y respuestas empáticas; recomendaciones de compatibilidad de personalidad |
|
||||
| 8 | Asistente de monitoreo del estado de ánimo las 24 horas y motivación emocional positiva con IA | Registro diario del estado de ánimo, LLM analiza tendencias y genera contenido motivacional; envío de recordatorios positivos |
|
||||
| 9 | Refugio anónimo de desahogo para adolescentes con protección de privacidad con IA | Entrada anónima de desahogo, LLM proporciona escucha y sugerencias; alerta por palabras sensibles |
|
||||
| 10 | Sistema de crianza de mascotas virtuales con IA y capacidad de evolución autónoma | Entrenamiento de modelo de personalidad de mascota, crecimiento y evolución a través de interacción conversacional; sistema de vestuario virtual |
|
||||
|
||||
## 14. Entretenimiento y ocio
|
||||
|
||||
Los escenarios de entretenimiento y ocio buscan ofrecer una rica experiencia de entretenimiento digital. Las aplicaciones comunes incluyen toma de decisiones inteligente de NPC en juegos, asistencia en juegos de misterio, creación de contenido, procesamiento de audio y video, etc., satisfaciendo las diversas necesidades de entretenimiento de los usuarios.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Motor de toma de decisiones autónoma para NPC de juegos de mundo abierto impulsado por LLM | Árbol de comportamiento del NPC integrado con toma de decisiones LLM, sistema de diálogo genera interacciones personalizadas; motor de comportamiento |
|
||||
| 2 | Herramienta de deducción de tramas AIGC y asistencia de control de DM para juegos de misterio inmersivos | Las elecciones de los jugadores activan ramas de la historia, LLM genera lógica deductiva; generación automática de tarjetas de pistas |
|
||||
| 3 | Modificador generativo de finales de novelas interactivas | Las elecciones del lector influyen en la dirección de la trama, LLM genera múltiples ramas de finales |
|
||||
| 4 | Estación de trabajo de generación automática AIGC de modelos 3D de personajes de anime | Texto descriptivo genera bocetos de personajes, herramientas de modelado 3D crean automáticamente los modelos; renderizado de texturas y materiales |
|
||||
| 5 | Análisis visual CV y comentarista inteligente por IA de partidas de esports | Análisis en tiempo real de la pantalla del juego, identificación de momentos clave; LLM genera textos de comentario |
|
||||
| 6 | Motor de algoritmo de recomendación de contenido humorístico personalizado | Perfil de intereses del usuario, emparejamiento y recomendación de contenido humorístico |
|
||||
| 7 | Software de corrección de afinación por IA y embellecimiento vocal para karaoke | Procesamiento de reducción de ruido y mejora de voz; algoritmo de corrección de afinación por IA |
|
||||
| 8 | Herramienta de extracción por IA y edición de tramas específicas de personajes en series y películas | Análisis del contenido del video, extracción de fragmentos relacionados con personajes; edición automática |
|
||||
| 9 | Sistema de generación automática de audiolibros con síntesis TTS multicolor | Asignación de personajes del texto, generación de voces personalizadas; adición de música de fondo y efectos de sonido |
|
||||
| 10 | Entrenador de revisión y juego de ajedrez y juegos de mesa con aprendizaje por refuerzo | Análisis de partidas, simulación de oponentes con IA; generación de sugerencias de revisión |
|
||||
|
||||
## 15. Servicios de comercio electrónico
|
||||
|
||||
Los escenarios de servicios de comercio electrónico se centran en la eficiencia operativa y la mejora de la conversión. Las aplicaciones centrales incluyen generación de contenido de productos, transmisión en vivo de ventas, servicio al cliente, análisis de precios, etc., ayudando a los comerciantes a lograr una operación inteligente.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Herramienta de producción masiva de páginas de detalles de productos AIGC con alta tasa de conversión | Ingreso de información del producto, LLM genera textos de puntos de venta y descripciones de escenarios; generación de imágenes de fondo |
|
||||
| 2 | Fábrica de generación de videos de prueba de vestir y exhibición de modelos virtuales con IA para moda | Procesamiento de fotos planas de ropa, generación de efectos de prueba de vestir en modelos virtuales; videos de exhibición desde múltiples ángulos |
|
||||
| 3 | Asistente de traducción y pulido localizado multilingüe con LLM para comercio electrónico transfronterizo | Traducción multilingüe de descripciones de productos, pulido de adaptación cultural; interfaces de publicación en múltiples plataformas |
|
||||
| 4 | Robot de análisis de sentimientos de clientes y respuesta inteligente basado en NLP | Análisis de sentimientos en conversaciones de consultas, generación automática de respuestas de consuelo; clasificación de reseñas positivas y negativas |
|
||||
| 5 | Sistema de transmisión en vivo con avatares digitales AIGC las 24 horas | Imagen digital + generación de guiones en tiempo real, invocación en tiempo real de información de productos; respuestas interactivas a comentarios |
|
||||
| 6 | Plugin de comparación de precios por IA y predicción de tendencias de productos similares de toda la web | Rastreo de precios en plataformas de comercio electrónico, visualización de comparación de precios; predicción de tendencias de precios |
|
||||
| 7 | Plataforma de selección inteligente por IA de fotos de reseñas de clientes y síntesis de videos cortos | Puntuación de calidad de fotos de reseñas de clientes, recomendación automática de contenido de calidad; síntesis con plantillas de videos cortos |
|
||||
| 8 | Análisis por voz en tiempo real de conversaciones de ventas y recomendación de guiones ganadores basado en LLM | Transcripción ASR de llamadas, detección de conformidad de guiones en tiempo real; recomendación de guiones |
|
||||
| 9 | Motor de análisis de tendencias de mercado por IA y predicción de productos exitosos | Recopilación y análisis de datos de redes sociales y comercio electrónico, LLM identifica tendencias populares; recomendaciones de selección de productos |
|
||||
| 10 | Sistema de agrupación por IA de perfiles de usuarios de tráfico privado y operación de precisión | Análisis de agrupación de datos de comportamiento de usuarios, generación de etiquetas de perfiles; activación de marketing automatizado |
|
||||
|
||||
## 16. Energía
|
||||
|
||||
Los escenarios del sector energético buscan lograr una gestión inteligente y la transición verde de la industria energética. Las aplicaciones típicas incluyen análisis de consumo eléctrico, detección de equipos, cálculo de emisiones de carbono, optimización de despacho, etc., promoviendo la operación eficiente de los sistemas energéticos.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Asesor de análisis del comportamiento de consumo eléctrico doméstico y estrategias de ahorro energético con IA | Recopilación de datos de medidores inteligentes, análisis de patrones de consumo; LLM genera recomendaciones de ahorro energético |
|
||||
| 2 | Sistema de reconocimiento visual CV por dron de defectos en paneles fotovoltaicos | Inspección con dron, análisis de imágenes termoinfrarrojas; detección y marcado de defectos |
|
||||
| 3 | Agente de predicción de tendencias de precios de mercado eléctrico al contado y estrategia automática de ganancias con IA | Recopilación de datos del mercado eléctrico, modelo de predicción de precios; generación y ejecución de estrategias de trading |
|
||||
| 4 | Sistema de evaluación de salud no destructiva por IA y alerta temprana de riesgo de fuga térmica de baterías de almacenamiento | Monitoreo de datos operativos de baterías, modelo de evaluación de salud; alertas de riesgo |
|
||||
| 5 | Asistente de cálculo automático de emisiones de carbono en toda la cadena empresarial y generación de informes ESG con IA | Recopilación de datos de consumo energético, cálculo de factores de emisión de carbono; generación automática de informes ESG |
|
||||
| 6 | Sistema de predicción de carga ante clima extremo y comando de despacho de emergencia de la red eléctrica con IA | Integración de datos meteorológicos, modelo de predicción de carga; generación de estrategias de despacho |
|
||||
| 7 | Guardián de reconocimiento por video por IA y alerta de comportamientos indebidos en gasolineras | Análisis de videovigilancia, detección de comportamientos indebidos (hablar por teléfono, fumar, etc.); notificaciones de alerta |
|
||||
| 8 | Sistema de monitoreo por ondas acústicas por IA y localización precisa de fugas en oleoductos y gasoductos de gran longitud | Recopilación de datos de sensores acústicos, modelo de detección de fugas; cálculo de algoritmos de localización |
|
||||
| 9 | Sistema de agregación de recursos de plantas virtuales y toma de decisiones de trading eléctrico por IA | Conexión de recursos distribuidos, optimización de despacho agregado; ejecución de estrategias de trading |
|
||||
| 10 | Seguimiento por IA de la ubicación de personal en minas y alerta de intrusión en zonas peligrosas | Localización UWB/Bluetooth, seguimiento de trayectoria del personal; vallas electrónicas en zonas peligrosas |
|
||||
|
||||
## 17. Audio y video
|
||||
|
||||
Los escenarios de audio y video se centran en la producción de contenido y el procesamiento de medios. Las aplicaciones comunes incluyen edición de video, síntesis de voz, generación de subtítulos, restauración de video, etc., mejorando la eficiencia y calidad de la producción de contenido audiovisual.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Herramienta de identificación por IA de fragmentos destacados y edición automática de videos cortos a partir de videos largos | Análisis del contenido del video, identificación de fotogramas clave; edición automática de fragmentos destacados |
|
||||
| 2 | Asistente de separación inteligente de ruido de fondo y mejora de voz por IA en video | Modelo de separación de audio, eliminación de ruido de fondo; procesamiento de mejora de voz |
|
||||
| 3 | Estación de trabajo de restauración 4K y colorización inteligente por IA de material audiovisual antiguo | Modelo de superresolución de video, restauración de calidad de material antiguo; colorización automática por IA |
|
||||
| 4 | Sistema de doblaje TTS de texto a voz de nivel realista y control emocional | Modelo TTS multicolor, generación con control emocional; exportación de audio |
|
||||
| 5 | Herramienta de reconocimiento automático ASR de voz de video y generación de subtítulos bilingües | Reconocimiento de voz para generar subtítulos, traducción a múltiples idiomas; superposición de subtítulos bilingües |
|
||||
| 6 | Motor de eliminación inteligente por IA de objetos innecesarios en la imagen del video | Seguimiento de objetivos en video, eliminación y reparación de objetos; procesamiento de consistencia entre fotogramas |
|
||||
| 7 | Compositor automático AIGC de música de fondo sin derechos de autor | Modelo de generación musical, control de estilo y emoción; detección de derechos de autor |
|
||||
| 8 | Software de clonación de timbre de voz por IA y conversión de voz para personas específicas | Entrenamiento de modelo de timbre con pocas muestras de voz; procesamiento de cambio de voz |
|
||||
| 9 | Plataforma de conversión de guiones a storyboards con un clic y generación de videos de previsualización dinámica por IA | Análisis de guiones para generar storyboards, IA genera videos de previsualización |
|
||||
| 10 | Asistente de transcripción inteligente por IA y extracción de tareas pendientes de grabaciones de reuniones | Separación y transcripción de voz en reuniones de múltiples participantes, LLM extrae tareas pendientes; marcado de marcas de tiempo |
|
||||
|
||||
## 18. Marketing con IA
|
||||
|
||||
Los escenarios de marketing con IA buscan mejorar la eficiencia del marketing y la producción creativa. Las aplicaciones centrales incluyen generación de textos, diseño de pósters, seguimiento de tendencias, análisis de la competencia, etc., ayudando a las empresas a lograr un marketing preciso y la difusión de marca.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Motor de redacción automática AIGC de textos virales para Xiaohongshu (RED) | Ingreso del tema, LLM genera textos de recomendación; optimización de emoji y etiquetas de temas |
|
||||
| 2 | Herramienta de diseño inteligente de pósters de marketing y adaptación a múltiples tamaños | Ingreso del texto, emparejamiento inteligente de plantillas de pósters y exportación en múltiples tamaños |
|
||||
| 3 | Plataforma de generación creativa AIGC de LOGO de marca y construcción del sistema de identidad visual (VI) | Ingreso de palabras clave de marca, generación creativa de LOGO; generación de normativas VI |
|
||||
| 4 | Asistente de seguimiento de tendencias populares por IA y generación creativa de marketing oportunista | Recopilación de datos de tendencias, LLM analiza ángulos de marketing; generación de propuestas creativas |
|
||||
| 5 | Monitor en tiempo real del ROI de publicidad y asistente de puja presupuestaria por IA | Integración con datos de plataformas publicitarias, modelo de análisis de rendimiento; optimización de estrategias de puja |
|
||||
| 6 | Analizador profundo de estrategias de marketing de la competencia y generador semanal de informes por IA | Recopilación y análisis de contenido de la competencia, extracción de estrategias; generación automática de informes semanales |
|
||||
| 7 | Diseño inteligente de palabras clave de motores de búsqueda y redacción masiva de artículos para generar tráfico | Análisis de palabras clave, generación masiva de artículos; sugerencias de optimización SEO |
|
||||
| 8 | Experto en redacción por IA de correos de marketing personalizados para cada usuario | Datos de perfiles de usuarios, generación de contenido personalizado; pruebas A/B |
|
||||
| 9 | Radar de monitoreo de reputación de marca de toda la web y alerta temprana de crisis de opinión pública por IA | Recopilación de datos de opinión pública de toda la web, análisis de sentimientos; notificaciones de alerta de crisis |
|
||||
| 10 | Asistente de generación creativa AIGC de guiones de videos cortos y guía de storyboards | Ingreso del tema, generación de guiones y storyboards; guía de sugerencias de filmación |
|
||||
|
||||
## 19. Inteligencia de datos
|
||||
|
||||
Los escenarios de inteligencia de datos se centran en el análisis de datos y la extracción de valor. Las aplicaciones típicas incluyen consultas en lenguaje natural, generación de visualizaciones, gobernanza de datos, construcción de grafos de conocimiento, etc., ayudando a las empresas a lograr un soporte para la toma de decisiones basada en datos.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Motor de consulta en lenguaje natural basado en Text-to-SQL | Conversión de lenguaje natural a consultas SQL, visualización de resultados |
|
||||
| 2 | BI conversacional: generar gráficos de visualización con una frase | Descripción de necesidades de datos, generación automática de gráficos; soporte de cambio entre múltiples tipos de gráficos |
|
||||
| 3 | Herramienta de reconocimiento de tablas Excel a partir de capturas de pantalla con un clic | Carga de capturas de pantalla, VLM reconoce la estructura de la tabla y los datos; exportación a archivo Excel |
|
||||
| 4 | Herramienta de reconocimiento por IA de tablas a partir de imágenes y capturas de pantalla para Excel | OCR de imágenes para reconocer la estructura de la tabla, exportación de datos a Excel |
|
||||
| 5 | Construcción automatizada de grafos de conocimiento de datos heterogéneos multifuente | Conexión de múltiples fuentes de datos, extracción de entidades y relaciones; almacenamiento en base de datos de grafos |
|
||||
| 6 | Asistente de interpretación inteligente y análisis de tendencias de informes de datos | Carga de imágenes de informes de datos o ingreso de datos, VLM interpreta el contenido de los gráficos y analiza tendencias |
|
||||
| 7 | Asistente de interpretación inteligente de estructura de tablas de base de datos y generación de ejemplos de consultas | Ingreso de nombre de tabla o descripción de campos, LLM genera descripción de la tabla y sentencias SQL de ejemplo |
|
||||
| 8 | Alineación inteligente de datos maestros empresariales y eliminación de duplicados por IA | Emparejamiento de datos maestros multifuente, identificación de registros duplicados; configuración de reglas de fusión |
|
||||
| 9 | Herramienta de conversión inteligente de documentos de requisitos de datos a casos de prueba | Ingreso de descripción de requisitos de datos, LLM genera escenarios de prueba y casos de validación |
|
||||
| 10 | Asistente inteligente de preguntas y respuestas sobre definiciones de indicadores de datos | Construcción de base de conocimiento basada en documentos de definición de indicadores, LLM responde preguntas sobre definiciones de indicadores, lógica de cálculo, etc. |
|
||||
@@ -0,0 +1,496 @@
|
||||
---
|
||||
title: 'Usa Jobs to Be Done para encontrar lo que los usuarios realmente quieren lograr'
|
||||
description: 'Comprende que los usuarios no compran funciones, sino que "contratan" tu producto para completar un progreso en un escenario especifico.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>1.5 horas</strong>'
|
||||
</script>
|
||||
|
||||
# Usa Jobs to Be Done para encontrar lo que los usuarios realmente quieren lograr
|
||||
|
||||
<a id="top-jtbd"></a>
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['JTBD', 'Necesidades del usuario', 'Pensamiento de producto', 'Insight de necesidades']"
|
||||
coreOutput="1 frase JTBD que se parezca mas a una necesidad real"
|
||||
expectedOutput="Poder convertir una idea vaga en un escenario de usuario y una direccion MVP mas concretos"
|
||||
>
|
||||
|
||||
Muchas personas que empiezan a hacer productos cometen el error de centrar toda su atencion en "que funcionalidad voy a hacer". Ves que otros tienen clasificacion inteligente, y tu tambien quieres anadirla; ves que otros tienen resumen automatico, y tu tambien quieres integrarlo; ves que otros han hecho Agent, multimodal, workflows, y sientes que no puedes quedarte atras.
|
||||
|
||||
Pero en la realidad, los usuarios rara vez deciden usar un producto porque "el nombre de la funcion es genial". Lo que hacen es, en un momento concreto, querer avanzar en algo, y por ello "contratan" temporalmente una herramienta, un servicio, o incluso a una persona, para ayudarles a completar ese paso.
|
||||
|
||||
Esto es exactamente lo que el metodo **Jobs to Be Done (JTBD)** quiere recordarnos: **los usuarios no compran funciones en si, sino que contratan alguna solucion para ayudarles a completar un progreso.**
|
||||
|
||||
Este articulo te guiara desde cero para entender JTBD en un lenguaje lo mas claro posible, y convertirlo en una herramienta de analisis que puedas usar directamente al hacer aplicaciones de IA.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimo
|
||||
**Objetivo**: Despues de leer, sabras mejor como convertir una idea vaga en una necesidad con un escenario de usuario real, en lugar de tener solo un monton de nombres de funciones en la cabeza.
|
||||
|
||||
**Accion**: Escribe 1 idea vaga, encuentra 3 usuarios potenciales y preguntales "la ultima vez, como lo manejaste", y luego organizalo en 1 frase JTBD.
|
||||
|
||||
**Resultado**: Obtendras una hipotesis de necesidad mas clara, sabiendo que debes resolver primero en la primera version.
|
||||
|
||||
**Enlaces rapidos**: [Que es JTBD](#jtbd-what) · [Formula de una frase](#jtbd-formula) · [Como te ayuda la IA](#jtbd-ai)
|
||||
:::
|
||||
|
||||
## Aprenderas lo siguiente
|
||||
|
||||
1. Que es Jobs to Be Done, y por que esta mas cerca de las necesidades reales que el "brainstorming de funciones"
|
||||
2. Como distinguir entre "funciones que el usuario dice querer" y "lo que el usuario realmente quiere lograr"
|
||||
3. Como usar una plantilla simple para descomponer una idea vaga en escenario, disparador, obstaculo y criterio de exito
|
||||
4. Como usar JTBD en productos de IA, preguntas de entrevistas y organizacion de prompts
|
||||
|
||||
<a id="jtbd-what"></a>
|
||||
## [1. Que es Jobs to Be Done](#top-jtbd)
|
||||
|
||||
Jobs to Be Done se abrevia comunmente como **JTBD**. Su idea central esta relacionada con la expresion clasica promovida por el equipo de Clayton Christensen: **los usuarios "contrataran" un producto para completar una tarea.**
|
||||
|
||||
La "tarea" aqui no es una accion superficial de una lista de pendientes, sino un **progreso** que el usuario espera que ocurra en su estado. Por ejemplo:
|
||||
|
||||
- No es "quiero una herramienta de actas con IA", sino "quiero tener los puntos clave, las tareas pendientes y los responsables organizados en 10 minutos despues de la reunion, sin depender de la memoria para completar las notas"
|
||||
- No es "quiero una app de contabilidad", sino "quiero saber en que se me va el dinero, para no estar ansioso a fin de mes"
|
||||
- No es "quiero un optimizador de curriculum", sino "quiero enviar un curriculum decente con mas confianza, sin dudar cada vez de que lo he escrito mal"
|
||||
|
||||
Entonces, **JTBD no se centra en como se ve el producto, sino en por que el usuario lo necesita en este momento.**
|
||||
|
||||
Es por eso que muchos productos aparentemente diferentes en realidad compiten por el mismo job. El usuario quiere "no aburrirse en el camino al trabajo", y los objetos que puede contratar pueden ser videos cortos, podcasts, juegos, chat, o incluso echar una cabezadita. El usuario quiere "entender rapidamente un PDF muy largo", y los objetos que puede contratar pueden ser una herramienta de resumen con IA, un becario, un colega, leerlo a duras penas, o simplemente no leerlo.
|
||||
|
||||
Una vez que miras los problemas desde esta perspectiva, descubres que tu verdadero competidor muchas veces no es solo "otra app parecida a la tuya", sino **todas las soluciones alternativas aceptables para el usuario**.
|
||||
|
||||
## 2. En que se diferencia JTBD de los perfiles de usuario y las listas de funciones
|
||||
|
||||
Muchos principiantes, al hacer analisis de necesidades, primero escriben un perfil de usuario: 25 anos, mujer, ciudad de primer nivel, oficinista, le gustan las herramientas de eficiencia, dispuesta a probar productos nuevos. Esta informacion no se puede decir que sea completamente inutil, pero normalmente **no es suficiente para explicar por que una persona tomara accion en este momento.**
|
||||
|
||||
JTBD se preocupa mas por las siguientes preguntas:
|
||||
|
||||
- En que escenario decide buscar una solucion
|
||||
- Que es exactamente lo que le tiene bloqueado en ese momento
|
||||
- Que quiere llevar al siguiente nivel
|
||||
- Que metodo torpe esta usando actualmente para arreglarselas
|
||||
- Si las cosas se resuelven bien, que resultado le hara sentir que "valio la pena"
|
||||
|
||||
Es decir, **el perfil de usuario es mas como "quien es probablemente esta persona", mientras que JTBD es mas como "que quiere realmente lograr esta persona ahora".**
|
||||
|
||||
Asimismo, las listas de funciones tambien pueden desviar a uno. El usuario dice "quiero exportar a Word", "quiero reescritura con IA", "quiero entrada de voz"; todo esto son solo expresiones superficiales. JTBD seguira preguntando:
|
||||
|
||||
- Por que necesitas exportar a Word ahora, y no a PDF?
|
||||
- Quieres reescribir, es porque el estilo es malo, o porque necesitas adaptarlo a diferentes destinatarios?
|
||||
- Quieres entrada de voz, es porque te da pereza escribir, o porque frecuentemente estas caminando, conduciendo, o necesitas registrar justo despues de una reunion?
|
||||
|
||||
Muchas veces, **la funcion es solo una traduccion temporal del job**. Si solo recoges funciones, es facil hacer un producto donde "agregas lo que el usuario dice"; si puedes ver el job detras, tienes mas oportunidades de hacer una solucion verdaderamente comoda y competitiva.
|
||||
|
||||
## 3. Un ejemplo que hasta un principiante puede entender
|
||||
|
||||
Primero no te apresures a pensar en productos complejos de IA; empecemos con un ejemplo de la vida cotidiana.
|
||||
|
||||
Supongamos que alguien siempre llega tarde para desayunar antes de salir de casa por la manana, y a menudo compra un sandwich y un cafe en la entrada del metro. En la superficie, "compra" un desayuno; pero si lo miramos con JTBD, lo que realmente quiere lograr puede ser:
|
||||
|
||||
- Resolver una comida de la forma que menos esfuerzo mental requiera en una manana con prisa
|
||||
- Evitar llegar a la oficina muerto de hambre
|
||||
- No retrasar el ritmo de desplazamiento por desayunar
|
||||
|
||||
En este caso, el usuario no esta contratando "un sandwich de una marca fija", sino una solucion que le ayude a avanzar su manana sin problemas. Si la tienda de conveniencia de al lado es mas rapida, mas cercana y mas estable, probablemente cambiara inmediatamente su eleccion.
|
||||
|
||||
Llevando esta logica a productos de IA es aun mas evidente.
|
||||
|
||||
Por ejemplo, si quieres hacer una "herramienta de actas de reuniones con IA". Si te quedas solo en el nivel de funciones, facilmente empezaras a pensar:
|
||||
|
||||
- Deberia soportar la subida de audio?
|
||||
- Deberia integrar separacion de hablantes?
|
||||
- Deberia exportar a Markdown?
|
||||
- Deberia generar automaticamente tareas pendientes?
|
||||
|
||||
Nada de esto esta mal, pero no es suficiente. Si preguntas un nivel mas con JTBD, lo que el usuario realmente quiere lograr puede ser:
|
||||
|
||||
- Quiero tener los resultados de la discusion sincronizados con los que no asistieron en 10 minutos despues de la reunion
|
||||
- Quiero extraer limpiamente las tareas, responsables y fechas limite, sin que el equipo colabore de memoria
|
||||
- Quiero reducir el tiempo de organizacion repetitiva de contenido de reuniones, guardando energia para la toma de decisiones y el avance
|
||||
|
||||
Una vez que el job queda claro, muchas prioridades de funciones aparecen automaticamente. Lo mas importante en la primera version puede no ser "soportar 12 formatos de exportacion", sino:
|
||||
|
||||
- La estructura del acta debe ser suficientemente clara
|
||||
- La extraccion de tareas pendientes debe ser estable
|
||||
- Compartir el enlace debe ser facil
|
||||
- El resultado debe ser lo suficientemente confiable para reenviarlo directamente al equipo
|
||||
|
||||
Este es el valor de JTBD: **te ayuda a volver de "que capacidades quiero apilar" a "que progreso quiero ayudar al usuario a alcanzar".**
|
||||
|
||||
## 4. Una plantilla JTBD util
|
||||
|
||||
Si eres principiante, primero no intentes hacer JTBD muy academico. Con capturar los 5 elementos mas practicos es suficiente.
|
||||
|
||||
### 4.1 Escenario
|
||||
|
||||
En que momento y en que entorno el usuario piensa en este producto?
|
||||
|
||||
- Despues de una reunion
|
||||
- Cuando el jefe pide materiales de urgencia
|
||||
- Por la noche preparando el curriculum para enviar
|
||||
- A fin de mes descubriendo que el dinero no llega
|
||||
|
||||
**Una necesidad sin escenario normalmente no es lo suficientemente real.**
|
||||
|
||||
### 4.2 Disparador
|
||||
|
||||
Que le hace decidir buscar una solucion inmediatamente?
|
||||
|
||||
- Abrumado por un documento largo, sin saber por donde empezar
|
||||
- Tienes que entregar algo manana, y hoy descubres que el formato es un desastre
|
||||
- Tu jefe te acaba de preguntar por el progreso, y te das cuenta de que no lo tienes organizado
|
||||
- Quieres mantener un registro, pero escribir a mano, copiar y organizar es muy complicado
|
||||
|
||||
Los disparadores suelen venir con emocion. Esta emocion es importante, porque determina por que el usuario tomara accion en este momento.
|
||||
|
||||
### 4.3 El progreso que quiere lograr
|
||||
|
||||
No solo quiere "hacer una accion", sino a que nuevo estado quiere llevarse?
|
||||
|
||||
- De la confusion a la claridad
|
||||
- De la ansiedad a la tranquilidad
|
||||
- De la procrastinacion a la accion
|
||||
- De la ineficiencia a la fluidez
|
||||
- De no saber explicarse a poder entregar directamente
|
||||
|
||||
En este paso, la palabra "progreso" es clave. Porque lo que mucha gente realmente compra no es una herramienta, sino un **cambio de estado**.
|
||||
|
||||
### 4.4 Solucion alternativa actual
|
||||
|
||||
Sin tu producto, como lo hace ahora?
|
||||
|
||||
- Copiar y pegar a mano
|
||||
- Arreglarselas con Excel o notas
|
||||
- Pedir ayuda a un colega
|
||||
- Posponerlo y no hacerlo
|
||||
- Saltar entre varias herramientas
|
||||
|
||||
Quien sea la solucion alternativa, ese es tu verdadero entorno competitivo.
|
||||
|
||||
### 4.5 Criterio de exito
|
||||
|
||||
Como se sabe que el problema esta realmente resuelto?
|
||||
|
||||
- Obtener un resultado compartible en 10 minutos
|
||||
- Poder enviar a otros sin necesidad de grandes revisiones
|
||||
- No olvidar, equivocarse ni perderse cosas facilmente
|
||||
- Saber que hacer a continuacion desde el primer uso
|
||||
|
||||
Si ni siquiera puedes explicar "como juzga el usuario si valio la pena", entonces esta direccion probablemente aun no esta bien definida.
|
||||
|
||||
<a id="jtbd-formula"></a>
|
||||
## [5. Formula de una frase que puedes usar directamente](#top-jtbd)
|
||||
|
||||
Cuando quieras organizar una direccion de producto, puedes usar esta formula muy practica:
|
||||
|
||||
> Cuando __________, quiero __________, para __________.
|
||||
> Ahora solo puedo __________ para arreglarmelas con esto.
|
||||
|
||||
Por ejemplo:
|
||||
|
||||
> Cuando termino una reunion de proyecto con mucha informacion, quiero obtener rapidamente un acta con tareas, responsables y fechas limite, para poder sincronizar inmediatamente al equipo y avanzar en la ejecucion.
|
||||
> Ahora solo puedo arreglarmelas recordando, revisando el historial de chat y organizando manualmente.
|
||||
|
||||
Otro ejemplo:
|
||||
|
||||
> Cuando me preparo para enviar mi candidatura a un nuevo puesto, quiero reescribir rapidamente mis experiencias en una version mas adaptada al puesto, para poder enviar un curriculum decente con mas confianza.
|
||||
> Ahora solo puedo copiar repetidamente mi antiguo curriculum y modificar las formulaciones a mano, hasta que ya no estoy seguro de nada.
|
||||
|
||||
Si puedes escribir una frase con este nivel de claridad, el diseno de paginas, el diseno de prompts y la priorizacion de funciones seran mucho mas faciles.
|
||||
|
||||
## 6. Al hacer productos de IA, presta atencion a estos tres niveles de job
|
||||
|
||||
Muchos productos de IA parecen impresionantes en las demos, pero despues de lanzarse no retienen a los usuarios. La razon comun es que solo resuelven la accion superficial, sin resolver el job mas profundo.
|
||||
|
||||
Puedes dividir un job en tres niveles:
|
||||
|
||||
### 6.1 Nivel funcional
|
||||
|
||||
Cual es la tarea mas superficial?
|
||||
|
||||
- Resumir documentos
|
||||
- Reescribir textos
|
||||
- Extraer tareas pendientes
|
||||
- Generar imagenes
|
||||
|
||||
Este es el nivel que los usuarios expresan mas facilmente.
|
||||
|
||||
### 6.2 Nivel emocional
|
||||
|
||||
Que molestia quiere reducir el usuario, o que sensacion quiere obtener?
|
||||
|
||||
- No quiere sentirse tan agobiado
|
||||
- No quiere parecer poco profesional
|
||||
- No quiere empezar de cero cada vez
|
||||
- Quiere sentir mas control
|
||||
|
||||
Mucha disposicion a pagar esta fuertemente relacionada con el nivel emocional.
|
||||
|
||||
### 6.3 Nivel social
|
||||
|
||||
Como quiere que lo perciban los demas?
|
||||
|
||||
- Parecer mas confiable
|
||||
- Parecer mas organizado en el equipo
|
||||
- Parecer mas profesional ante los clientes
|
||||
- Saber expresarse mejor en redes sociales
|
||||
|
||||
Si solo haces el nivel funcional, el producto es facil de reemplazar; si tambien entiendes el nivel emocional y el social, sera mas facil encontrar un valor verdaderamente pegajoso.
|
||||
|
||||
## 7. Usa JTBD para filtrar direcciones de producto
|
||||
|
||||
A veces no es que ya tengas un producto, sino que tienes 3 a 5 ideas y no sabes cual hacer. Aqui JTBD es ideal para filtrar.
|
||||
|
||||
Puedes tomar cada idea y preguntarte 5 cosas:
|
||||
|
||||
1. El escenario correspondiente a esta idea es lo suficientemente concreto?
|
||||
2. El usuario ya esta usando algun metodo torpe para resolverlo?
|
||||
3. El dolor de este job es lo suficientemente fuerte, o lo suficientemente frecuente?
|
||||
4. Si lo hago bien, el usuario sentira claramente que "su estado mejoro"?
|
||||
5. Puedo hacer una primera version solo en torno al paso clave de este job, algo pequeno pero util?
|
||||
|
||||
Si despues de hablar de una direccion solo puedes decir "me parece interesante", pero no puedes explicar el disparador, la solucion alternativa y el criterio de exito, probablemente sea solo una inspiracion vaga, no una direccion madura.
|
||||
|
||||
## 8. Preguntas que puedes usar directamente para entrevistar usuarios
|
||||
|
||||
Mucha gente, al hacer investigacion, pregunta: "Que funciones quieres?" Este tipo de pregunta facilmente obtiene respuestas superficiales.
|
||||
|
||||
JTBD es mas adecuado para hacer este tipo de preguntas:
|
||||
|
||||
- Cuando fue la ultima vez que encontraste este problema?
|
||||
- Que estabas haciendo en ese momento, por que te bloqueaste?
|
||||
- Como lo resolviste al final?
|
||||
- En este proceso, cual fue la parte mas molesta, mas lenta o que menos confianza te dio?
|
||||
- Si hubiera una herramienta que te ayudara, que resultado te haria sentir que realmente es util?
|
||||
- Que metodos alternativos has probado? Por que no fueron lo suficientemente buenos?
|
||||
|
||||
Este tipo de preguntas tiene una ventaja: lleva la conversacion de vuelta a las experiencias reales, en lugar de quedarse en preferencias imaginadas.
|
||||
|
||||
## 9. Usa IA para ayudarte con el analisis JTBD
|
||||
|
||||
JTBD no fue inventado por la IA, pero la IA es muy adecuada para ayudarte a organizar y refinar JTBD.
|
||||
|
||||
Por ejemplo, si ya has recogido 5 a 10 comentarios de usuarios, puedes pasarlos al modelo y pedirle que los resuma siguiendo esta estructura:
|
||||
|
||||
```text
|
||||
Por favor actua como asistente de investigacion de producto.
|
||||
Te dare algunas citas textuales de usuarios. Por favor no des sugerencias de funciones primero,
|
||||
sino organiza primero siguiendo el marco de Jobs to Be Done:
|
||||
|
||||
1. En que escenario se encuentra el usuario
|
||||
2. Cual es el evento que detona su accion
|
||||
3. Cual es el progreso que realmente quiere lograr
|
||||
4. Cual es la solucion alternativa actual
|
||||
5. Cual es el criterio de exito que mas le importa
|
||||
6. Que palabras emocionales aparecen repetidamente en estos comentarios
|
||||
|
||||
Finalmente, organiza todo esto en 3 hipotesis JTBD que mas valga la pena verificar primero.
|
||||
```
|
||||
|
||||
Si ya tienes una idea, tambien puedes pedir a la IA que te ayude con la primera ronda de convergencia:
|
||||
|
||||
```text
|
||||
Quiero hacer [tu idea de producto].
|
||||
Por favor no me des una lista de funciones directamente, sino analiza usando el metodo Jobs to Be Done:
|
||||
|
||||
1. Que escenarios concretos podria servir este producto
|
||||
2. En cada escenario, cual es el job central que el usuario quiere completar
|
||||
3. Que soluciones alternativas existen actualmente
|
||||
4. Que job es mas adecuado como punto de partida para un MVP, y por que
|
||||
5. Escribe el job final recomendado como una frase JTBD clara
|
||||
```
|
||||
|
||||
La ventaja de hacer esto es que no seras arrastrado inmediatamente por la IA a "brainstormear 50 funciones", sino que primero aclararas la direccion.
|
||||
|
||||
## 10. Los 4 errores mas comunes de los principiantes
|
||||
|
||||
### 10.1 Escribir el job como un nombre de funcion
|
||||
|
||||
"Resumen con IA", "clasificacion inteligente", "generacion automatica" no son jobs, solo son posibles formas de implementacion.
|
||||
|
||||
### 10.2 Escribir un grupo demasiado amplio
|
||||
|
||||
"Todos los oficinistas", "todos los estudiantes", "todos los emprendedores" suelen ser demasiado amplios. Cuanto mas amplio, mas dificil es ver escenarios reales.
|
||||
|
||||
### 10.3 Solo escuchar lo que el usuario dice, sin observar lo que hace
|
||||
|
||||
El usuario describira lo que quiere, pero sus verdaderas prioridades suelen estar ocultas en como se arregla actualmente para resolver los problemas.
|
||||
|
||||
### 10.4 Querer hacer una plataforma completa desde el principio
|
||||
|
||||
La forma correcta de usar JTBD normalmente no es "voy a hacer una gran plataforma que haga de todo", sino primero enfocarse en el paso mas critico de un escenario y hacerlo excepcionalmente bien.
|
||||
|
||||
## 11. Resumen
|
||||
|
||||
Lo mas valioso de Jobs to Be Done no es darte un nuevo termino, sino ayudarte a cambiar tu angulo de observacion: **no te centres solo en las funciones del producto, sino en lo que el usuario quiere avanzar al siguiente paso.**
|
||||
|
||||
Cuando empieces a preguntarte repetidamente:
|
||||
|
||||
- En que escenario contrata el usuario este producto
|
||||
- Donde se ha quedado bloqueado exactamente
|
||||
- Que metodo esta usando para arreglarselas
|
||||
- Despues de resolver el problema, como cambiara su estado
|
||||
|
||||
Descubriras que muchas ideas originalmente vagas se aclaran de repente, y muchas funciones originalmente llamativas dejan de ser tan importantes.
|
||||
|
||||
Hacer productos, especialmente productos de IA, es facil caer en la trampa de obsesionarse con la demostracion de capacidades desde el principio. JTBD te ayuda a devolver la atencion a lo realmente importante: **por que te necesita el usuario, y que progreso le estas ayudando a completar.**
|
||||
|
||||
<a id="jtbd-ai"></a>
|
||||
## [12. Como usar la IA para practicar JTBD](#top-jtbd)
|
||||
|
||||
JTBD no fue inventado por la IA, pero la IA es muy adecuada para actuar como tu asistente de investigacion, asistente de organizacion y asistente de contraste dentro de este metodo. La clave es: **dejar que la IA te ayude a organizar y expandir, no que adivine por ti lo que piensan los usuarios.**
|
||||
|
||||
Puedes usarlo asi:
|
||||
|
||||
### 12.1 Dejar que la IA te ayude a reescribir ideas vagas como hipotesis JTBD
|
||||
|
||||
Cuando solo tienes una descripcion vaga en mente, como "quiero hacer una herramienta para ayudar a universitarios a encontrar practicas", primero puedes pedir a la IA que la descomponga en varios jobs posibles:
|
||||
|
||||
```text
|
||||
Tengo una idea vaga de producto: [tu idea]
|
||||
Por favor no me des una lista de funciones directamente, sino analiza usando el enfoque de Jobs to Be Done:
|
||||
1. A que escenarios concretos podria corresponder
|
||||
2. En cada escenario, cual es el progreso que el usuario realmente quiere lograr
|
||||
3. Cual podria ser la solucion alternativa actual
|
||||
4. Que job es mas adecuado para hacer primero un MVP
|
||||
Finalmente, escribe cada job como una frase JTBD clara.
|
||||
```
|
||||
|
||||
Incluso puedes escribir la entrada de forma muy basica:
|
||||
|
||||
```text
|
||||
Quiero hacer algo para ayudar a universitarios a encontrar practicas.
|
||||
No se muy bien que hacer exactamente, ayudame a pensar que es lo que los usuarios realmente quieren lograr.
|
||||
```
|
||||
|
||||
La IA podria dar un resultado util como este:
|
||||
|
||||
```text
|
||||
Posibles direcciones JTBD:
|
||||
|
||||
1. Cuando me preparo por primera vez para enviar candidaturas de practicas, quiero saber rapidamente que materiales debo preparar primero,
|
||||
para no estar posponiendo el envio por la confusion de informacion.
|
||||
|
||||
2. Cuando veo una oferta de practicas, quiero juzgar rapidamente si vale la pena aplicar,
|
||||
para no perder demasiado tiempo en puestos que no me convienen.
|
||||
|
||||
3. Cuando empiezo a enviar candidaturas, quiero adaptar mi curriculum existente a una version mas ajustada al puesto,
|
||||
para poder enviarlo mas rapido y mejorar mi tasa de aprobacion.
|
||||
```
|
||||
|
||||
El valor de este tipo de resultado es que descompone tu idea original muy general en varias direcciones mas cercanas a escenarios reales.
|
||||
|
||||
### 12.2 Dejar que la IA te ayude a organizar citas textuales de entrevistas
|
||||
|
||||
Si ya has hecho varias entrevistas con usuarios, puedes pasar las transcripciones a la IA y pedirle que extraiga los escenarios, disparadores, soluciones alternativas y criterios de exito que se repiten.
|
||||
|
||||
```text
|
||||
A continuacion estan las citas textuales de 5 usuarios.
|
||||
Por favor no des soluciones primero, sino organiza siguiendo el marco JTBD:
|
||||
1. En que escenario se encuentra el usuario
|
||||
2. Cual es el evento que detona su accion
|
||||
3. Cual es el progreso que realmente quiere lograr
|
||||
4. Cual es la solucion alternativa actual
|
||||
5. Cual es el criterio de exito que mas le importa
|
||||
6. Que informacion se repite entre multiples usuarios
|
||||
Finalmente, organiza en 3 hipotesis JTBD que mas valga la pena verificar primero.
|
||||
```
|
||||
|
||||
Una entrada simple de principiante tambien podria ser:
|
||||
|
||||
```text
|
||||
Pregunte a 3 personas, y mas o menos dijeron esto:
|
||||
|
||||
1. Cada vez que quiero enviar una practica tengo que rehacer el curriculum, es muy molesto.
|
||||
2. En realidad lo que mas miedo me da es no saber si lo he escrito bien.
|
||||
3. Ahora le pido a companeros de cursos superiores que me lo revisen, pero me da pena molestarles siempre.
|
||||
|
||||
Ayudame a organizar, que es lo que realmente quieren lograr.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Resultado organizado:
|
||||
|
||||
- Escenario comun: antes de enviar candidaturas de practicas, necesitan trabajar en el curriculum
|
||||
- Dificultad comun: no saben como modificarlo hasta que este "lo suficientemente bien"
|
||||
- Solucion alternativa actual: pedir a companeros de cursos superiores que lo revisen, modificarlo una y otra vez
|
||||
- Posible JTBD:
|
||||
Cuando me preparo para enviar candidaturas de practicas, quiero juzgar mas rapidamente si mi curriculum ya esta listo para enviar,
|
||||
para no quedarme atascado en "lo modifico una vez mas" y retrasar el envio indefinidamente.
|
||||
```
|
||||
|
||||
Este tipo de resultado es muy util porque te ayuda a extraer de citas textuales dispersas algo que se parece mas a una "necesidad".
|
||||
|
||||
### 12.3 Dejar que la IA haga una ronda ligera de investigacion en la red
|
||||
|
||||
Antes de empezar entrevistas a gran escala, puedes pedir a la IA que haga un barrido de informacion externa muy ligero, como:
|
||||
|
||||
- En foros o comunidades publicas, como se queja la gente de este problema
|
||||
- En el mercado, que nivel de problema resuelven principalmente los productos existentes
|
||||
- Cual es la solucion alternativa mas comun de los usuarios
|
||||
- En las resenas comunes, cuales son los puntos que mas satisfaccion y mas insatisfaccion generan
|
||||
|
||||
Esta investigacion no puede sustituir las entrevistas reales con usuarios, pero es ideal como calentamiento en la fase de Discover, ayudandote a construir primero un mapa de problemas.
|
||||
|
||||
Una entrada simple podria ser:
|
||||
|
||||
```text
|
||||
Por favor ayudame a buscar:
|
||||
"Cuales son los puntos de dolor mas comunes cuando los universitarios modifican su curriculum y envian candidaturas de practicas?"
|
||||
Prioriza lo que la gente dice en foros publicos, posts de experiencia y comunidades de busqueda de empleo.
|
||||
Organizalo en 5 problemas mas comunes.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Puntos de dolor comunes organizados:
|
||||
|
||||
1. No saber que poner en el curriculum, muy poca experiencia
|
||||
2. No saber como adaptarlo a diferentes puestos
|
||||
3. Modificar muchas versiones pero sin certeza de si es suficientemente bueno
|
||||
4. No encontrar a alguien fiable que lo revise
|
||||
5. El proceso de envio es complicado, facil de procrastinar
|
||||
```
|
||||
|
||||
Este tipo de resultado no debe tomarse como conclusion final, pero es ideal para decidir que tipo de problema priorizar en las entrevistas.
|
||||
|
||||
### 12.4 Dejar que la IA actue como "abogado del diablo"
|
||||
|
||||
Muchas veces nos encariñamos demasiado con nuestras propias ideas. Puedes pedir especificamente a la IA que asuma el rol de alguien critico, obligandote a explicar el problema mas claramente:
|
||||
|
||||
```text
|
||||
Por favor actua como un consultor de investigacion de producto muy estricto.
|
||||
A continuacion esta mi hipotesis JTBD: [tu hipotesis]
|
||||
Por favor critica desde los siguientes angulos:
|
||||
1. Este escenario es demasiado amplio?
|
||||
2. Este job esta escrito como una funcion en lugar de un progreso real?
|
||||
3. La solucion alternativa es demasiado debil?
|
||||
4. El criterio de exito no es lo suficientemente claro?
|
||||
5. Cual es el riesgo que mas necesita ser verificado en esta hipotesis?
|
||||
```
|
||||
|
||||
La ventaja de hacer esto es que descubriras mas rapidamente si estas mirando necesidades o solo estas mirando la solucion que te gusta.
|
||||
|
||||
## 📚 Tareas
|
||||
|
||||
Por favor completa las siguientes tareas basandote en el contenido anterior:
|
||||
|
||||
1. Elige una idea de producto que quieras hacer recientemente, y escribela claramente usando la formula JTBD
|
||||
2. Completa los 5 elementos para esta idea: escenario, disparador, progreso, solucion alternativa, criterio de exito
|
||||
3. Encuentra 3 usuarios potenciales, y al menos una vez logra preguntar "cuando fue la ultima vez que encontraste este problema"
|
||||
4. Pasa las citas textuales de las entrevistas a la IA, y organiza en 3 hipotesis JTBD que mas valga la pena verificar primero
|
||||
|
||||
## Lectura adicional
|
||||
|
||||
- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
|
||||
- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
|
||||
- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
|
||||
- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
|
||||
@@ -0,0 +1,589 @@
|
||||
---
|
||||
title: 'The Mom Test: Como validar necesidades a traves de entrevistas con usuarios'
|
||||
description: 'Aprende a evitar retroalimentacion educada, y haz entrevistas centradas en comportamientos reales, hechos concretos y problemas existentes.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>1.5 horas</strong>'
|
||||
</script>
|
||||
|
||||
# The Mom Test: Como validar necesidades a traves de entrevistas con usuarios
|
||||
|
||||
<a id="top-mom"></a>
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Entrevistas con usuarios', 'Validacion de necesidades', 'Investigacion de usuarios', 'Investigacion de producto']"
|
||||
coreOutput="1 conjunto de preguntas de entrevista que obtienen informacion mas real"
|
||||
expectedOutput="Dejar de tomar la retroalimentacion educada como validacion, y poder juzgar direcciones con comportamientos reales"
|
||||
>
|
||||
|
||||
Muchas personas, la primera vez que hacen investigacion de producto, creen que lo mas importante es "hablar con alguien". Asi que van y preguntan a amigos, colegas e incluso familiares:
|
||||
|
||||
- Que te parece esta idea?
|
||||
- Si existiera un producto asi, lo usarias?
|
||||
- Esta funcion suena bastante bien, no?
|
||||
|
||||
La otra persona suele dar una retroalimentacion muy alentadora:
|
||||
|
||||
- Esta muy bien
|
||||
- Suena util
|
||||
- Creo que deberias probarlo
|
||||
|
||||
El problema es que estas respuestas normalmente no te ayudan a tomar decisiones. Son mas bien cortesia, apoyo, o una reaccion natural para no desanimarte en el momento. Crees haber obtenido "validacion de mercado", pero en realidad solo has recogido un monton de consuelos dificiles de usar para tomar decisiones.
|
||||
|
||||
El metodo The Mom Test fue creado precisamente para resolver este problema. Nos recuerda: **no es que los usuarios te esten mintiendo a proposito, sino que tu forma de hacer las preguntas lleva naturalmente a la otra persona hacia respuestas agradables pero inutiles.**
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimo
|
||||
**Objetivo**: Despues de leer, sabras mejor como hablar con usuarios sin escuchar solo "suena bien", sino obtener informacion que realmente te ayude a juzgar la direccion.
|
||||
|
||||
**Accion**: Reescribe las 5 preguntas que ibas a hacer, priorizando "cuando fue la ultima vez que paso esto" y "como lo manejaste entonces".
|
||||
|
||||
**Resultado**: Te sera mas facil distinguir que son opiniones y que son verdaderas evidencias para tomar decisiones.
|
||||
|
||||
**Enlaces rapidos**: [Que es The Mom Test](#mom-what) · [Tres principios centrales](#mom-principles) · [Como te ayuda la IA](#mom-ai)
|
||||
:::
|
||||
|
||||
## Aprenderas lo siguiente
|
||||
|
||||
1. Que problema esta resolviendo exactamente The Mom Test, y por que muchas "investigaciones de usuarios" en realidad no investigan informacion real
|
||||
2. Los principios mas importantes de este metodo: preguntar menos opiniones y mas comportamientos; preguntar menos hipotesis y mas hechos
|
||||
3. Como transformar una pregunta que facilmente genera falsos positivos en una pregunta de entrevista mas valiosa
|
||||
4. Como usar The Mom Test junto con JTBD, validacion de necesidades y evaluacion de MVP
|
||||
|
||||
<a id="mom-what"></a>
|
||||
## [1. Que es exactamente The Mom Test](#top-mom)
|
||||
|
||||
The Mom Test proviene del libro homonimo de Rob Fitzpatrick. Su nombre suena como una broma, pero da muy en el clavo:
|
||||
|
||||
**Incluso tu madre tendria dificultades para decirte directamente "es una mala idea".**
|
||||
|
||||
La razon no es que no sea honesta, sino:
|
||||
|
||||
- No quiere lastimarte
|
||||
- Te alentara inconscientemente
|
||||
- Easily seguira tu forma de expresarte al responder
|
||||
|
||||
Y no solo tu madre; amigos, colegas, ex companeros de clase, e incluso muchos desconocidos, al enfrentarse a tu idea de producto, tambien suelen dar "retroalimentacion positiva" similar. Esto no significa que la necesidad sea real, solo significa que formulaste la pregunta de una forma que facilmente obtiene respuestas agradables.
|
||||
|
||||
Por lo tanto, el punto de The Mom Test nunca ha sido "no le preguntes a tu madre", sino:
|
||||
|
||||
**No formules la pregunta de forma que cualquiera te siga la corriente.**
|
||||
|
||||
Lo que este metodo realmente quiere ensenarte es como obtener informacion mas cercana a las necesidades reales a traves de la conversacion, en lugar de recoger un monton de comentarios que te hagan sentir bien.
|
||||
|
||||
## 2. Cual es el problema central que resuelve
|
||||
|
||||
The Mom Test resuelve principalmente una ilusion cognitiva muy comun:
|
||||
|
||||
**Tomar la retroalimentacion positiva por cortesia como una necesidad real.**
|
||||
|
||||
Por ejemplo, cuando preguntas:
|
||||
|
||||
- Que te parece la idea de esta App?
|
||||
- Si hiciera una herramienta con IA que te ayude a escribir el curriculum, la usarias?
|
||||
- Es valiosa esta funcion?
|
||||
|
||||
Estas preguntas tienen en comun:
|
||||
|
||||
- Todas preguntan "opiniones"
|
||||
- Todas tienen cierta insinuacion
|
||||
- Todas hablan de un futuro que aun no ha ocurrido
|
||||
|
||||
Las respuestas de las personas sobre "opiniones" y "hipotesis futuras" suelen ser inestables. Muchas personas sobreestiman su interes, su capacidad de ejecucion y su disposicion futura a pagar.
|
||||
|
||||
Por eso The Mom Test te recuerda:
|
||||
|
||||
- No confies demasiado en las evaluaciones de otros sobre tu idea
|
||||
- No confies demasiado en las predicciones de otros sobre su comportamiento futuro
|
||||
- Vuelve siempre a los comportamientos reales que el usuario ya ha tenido
|
||||
|
||||
Porque comparado con "la usarias?", "como manejaste esto la ultima vez?" suele estar mas cerca de la verdad.
|
||||
|
||||
<a id="mom-principles"></a>
|
||||
## [3. Los tres principios mas importantes](#top-mom)
|
||||
|
||||
Si solo quieres recordar lo mas importante, empieza con estos tres principios.
|
||||
|
||||
### 3.1 Habla menos de tu idea, y mas de las experiencias reales pasadas del usuario
|
||||
|
||||
Muchas entrevistas ineficaces empiezan presentando la propia solucion, hablando de lo emocionado que se esta y del producto que se planea hacer. El problema es que, una vez que hablas demasiado, la otra persona facilmente cambia a un estado de "apoyarte" y "alentarte".
|
||||
|
||||
En contraste, una mejor forma de hacerlo es centrarse en las experiencias de la otra persona:
|
||||
|
||||
- Cuando fue la ultima vez que encontraste este problema?
|
||||
- Que estabas haciendo en ese momento?
|
||||
- Como lo resolviste al final?
|
||||
- Cual fue el paso mas complicado?
|
||||
|
||||
Descubriras que este tipo de preguntas llevan la conversacion de vuelta a la realidad de forma mas natural, en lugar de quedarse en preferencias imaginadas.
|
||||
|
||||
### 3.2 Pregunta menos opiniones abstractas, y mas hechos concretos
|
||||
|
||||
"Me parece bien esta funcion", "suena bien", "parece util" son expresiones demasiado abstractas para guiar decisiones de producto.
|
||||
|
||||
Informacion mas valiosa suele verse asi:
|
||||
|
||||
- La semana pasada pase 2 horas peleando con esto
|
||||
- Ahora me arreglas con Excel y WeChat
|
||||
- El mes pasado ya gaste dinero en una herramienta similar
|
||||
- Lo que mas miedo me da es hacerlo mal, no hacerlo lento
|
||||
|
||||
Esta es la informacion que realmente te ayuda a juzgar la intensidad, frecuencia y posibilidad de pago de un problema.
|
||||
|
||||
### 3.3 Pregunta menos que solucion quiere el usuario, y observa mas como resuelve el problema ahora
|
||||
|
||||
Los usuarios son muy buenos describiendo sus frustraciones, pero no necesariamente disenando soluciones.
|
||||
|
||||
Si preguntas:
|
||||
|
||||
- Te gustaria que una IA te hiciera esto automaticamente?
|
||||
- Crees que anadir una funcion inteligente seria util?
|
||||
|
||||
Lo que obtienes suele es solo una actitud vaga hacia una solucion, no la necesidad en si.
|
||||
|
||||
Mejores preguntas son:
|
||||
|
||||
- Que metodo usas ahora para manejar este problema?
|
||||
- Por que elegiste esta forma?
|
||||
- En que falla?
|
||||
|
||||
Entender las soluciones alternativas existentes suele ser mas importante que preguntar directamente "que quieres".
|
||||
|
||||
## 4. Por que la gente siempre te da respuestas agradables pero inutiles
|
||||
|
||||
Si puedes entender esto, cometeras menos errores de juicio en las entrevistas.
|
||||
|
||||
### 4.1 Las personas son inconscientemente educadas
|
||||
|
||||
Especialmente cuando el interlocutor tiene una relacion contigo, le resulta dificil decir directamente:
|
||||
|
||||
- Esta direccion no suena muy viable
|
||||
- No la usaria en absoluto
|
||||
- Este problema no es tan importante para mi
|
||||
|
||||
Es mas probable que diga "esta muy bien", "se podria probar cuando haya oportunidad".
|
||||
|
||||
### 4.2 Las personas sobreestiman su yo futuro
|
||||
|
||||
Mucha gente cree sinceramente que en el futuro:
|
||||
|
||||
- Sera mas disciplinada
|
||||
- Estara mas dispuesta a aprender
|
||||
- Estara mas dispuesta a pagar
|
||||
- Estara mas dispuesta a probar herramientas nuevas
|
||||
|
||||
Por eso la frase "si existiera, probablemente la usaria" muchas veces no equivale a que realmente la usara en el futuro.
|
||||
|
||||
### 4.3 Tu forma de preguntar ya esta guiando la respuesta
|
||||
|
||||
Cuando preguntas:
|
||||
|
||||
- Te parece buena esta idea?
|
||||
- Esta funcion te resulta muy util?
|
||||
|
||||
En realidad ya has metido la "respuesta correcta" en la pregunta.
|
||||
|
||||
Es por eso que The Mom Test enfatiza tanto: **no conviertas la entrevista en una busqueda de validacion.**
|
||||
|
||||
## 5. Comparacion directa: que preguntas se desperdician facilmente y cuales son mas valiosas
|
||||
|
||||
Estas comparaciones son utiles para casi todos los principiantes.
|
||||
|
||||
| Preguntas que se desperdician facilmente | Preguntas mas valiosas |
|
||||
| --- | --- |
|
||||
| Que te parece esta idea? | Cuando fue la ultima vez que encontraste este problema? |
|
||||
| Usarias este producto si existiera? | Como estas manejando esto ahora? |
|
||||
| Estarias dispuesto a pagar por esta funcion? | Has gastado dinero en este problema alguna vez? En que? |
|
||||
| Crees que esta funcion es importante? | Cual es el paso mas molesto, lento o inseguro de este proceso? |
|
||||
| Te gustaria que una IA te hiciera esto automaticamente? | Por que aun no has encontrado una solucion mas comoda? |
|
||||
|
||||
Lo mas importante de esta tabla no son las frases concretas, sino la direccion detras:
|
||||
|
||||
- De opiniones hacia hechos
|
||||
- Del futuro hacia el pasado
|
||||
- De tu solucion hacia el problema del usuario
|
||||
|
||||
## 6. Un ritmo de entrevista que incluso un principiante puede usar inmediatamente
|
||||
|
||||
Si quieres ir a hablar con alguien ahora mismo, puedes seguir esta secuencia directamente.
|
||||
|
||||
### 6.1 Apertura: explica que estas aprendiendo, no vendiendo
|
||||
|
||||
Por ejemplo:
|
||||
|
||||
> Estoy investigando como la gente maneja este tipo de problemas, quiero entender la situacion real primero, no estoy aqui para vender nada.
|
||||
|
||||
Este tipo de expresion ayuda a la otra persona a liberarse de la carga de "tener que darte retroalimentacion positiva".
|
||||
|
||||
### 6.2 Empieza preguntando por la ultima experiencia real
|
||||
|
||||
Puedes empezar con este tipo de preguntas:
|
||||
|
||||
- Cuando fue la ultima vez que encontraste este problema?
|
||||
- Que paso en ese momento?
|
||||
- Cual fue tu primera reaccion, como lo manejaste?
|
||||
|
||||
Una vez que la conversacion entra en eventos concretos, la calidad de la informacion suele mejorar notablemente.
|
||||
|
||||
### 6.3 Profundiza preguntando sobre comportamientos, costos y soluciones alternativas
|
||||
|
||||
Sigue preguntando:
|
||||
|
||||
- Que metodo usas ahora para resolverlo?
|
||||
- Cual es la parte mas incomoda de este metodo?
|
||||
- Cuanto tiempo, dinero o esfuerzo has invertido en esto?
|
||||
- Has probado otros metodos? Por que no los seguiste usando?
|
||||
|
||||
### 6.4 Finalmente juzga la intensidad del dolor y la prioridad
|
||||
|
||||
No necesitas preguntar directamente "te duele?", puedes juzgarlo por los detalles:
|
||||
|
||||
- Lo encuentra frecuentemente?
|
||||
- Ya esta intentando compensar activamente?
|
||||
- Ya esta dispuesto a invertir costos en esto?
|
||||
- Cuando habla de esto, muestra emocion evidente?
|
||||
|
||||
Todo esto es mas util que una simple pregunta "es este tu punto de dolor?".
|
||||
|
||||
## 7. Un ejemplo mas completo
|
||||
|
||||
Supongamos que quieres hacer un producto de "IA que ayuda a universitarios a mejorar su curriculum".
|
||||
|
||||
### Forma incorrecta de preguntar
|
||||
|
||||
Vas y le preguntas a un companero:
|
||||
|
||||
> Quiero hacer una herramienta de optimizacion de curriculum con IA, que te parece?
|
||||
> Si pudiera modificar automaticamente el curriculum segun el puesto, la usarias?
|
||||
|
||||
En este caso, la otra persona probablemente dira:
|
||||
|
||||
- Suena bien
|
||||
- Creo que seria util
|
||||
- Si es gratis, la probara
|
||||
|
||||
Estas respuestas casi no te ayudan a juzgar si la necesidad es realmente fuerte.
|
||||
|
||||
### Forma mejor de preguntar
|
||||
|
||||
Podrias cambiar a:
|
||||
|
||||
> Cuando fue la ultima vez que modificaste tu curriculum?
|
||||
> Por que tuviste que modificarlo?
|
||||
> Como lo hiciste?
|
||||
> Cual fue el paso mas bloqueante?
|
||||
> Has pedido a alguien que te lo revise?
|
||||
> Has gastado dinero o mucho tiempo alguna vez en el tema del curriculum?
|
||||
|
||||
A traves de estas preguntas, la informacion que puedes obtener seria:
|
||||
|
||||
- Mucha gente no es que no sepa escribir, sino que no sabe como adaptarlo a diferentes puestos
|
||||
- Lo mas doloroso no es el formato, sino "no saber que experiencias vale la pena incluir"
|
||||
- Procrastinan, no por vagos, sino porque cada vez que modifican el curriculum es muy agotador
|
||||
- Ya estan usando consejos de companeros de cursos superiores, sitios de plantillas, herramientas de IA y revision de amigos para arreglarselas
|
||||
|
||||
En este punto, estas mucho mas cerca del problema real.
|
||||
|
||||
## 8. Como usar The Mom Test junto con JTBD
|
||||
|
||||
Si JTBD te ayuda a ver "que progreso quiere lograr el usuario", entonces The Mom Test te ensena mas bien:
|
||||
|
||||
**Como confirmar a traves de entrevistas si este job realmente existe.**
|
||||
|
||||
Puedes perfectamente conectar ambos:
|
||||
|
||||
1. Primero usa JTBD para hipotetizar un job
|
||||
2. Luego usa el estilo de The Mom Test para preguntar a los usuarios sobre su ultima experiencia real
|
||||
3. Mira si este job es realmente frecuente, real y digno de priorizar
|
||||
|
||||
Por ejemplo, tu hipotesis JTBD es:
|
||||
|
||||
> Cuando me preparo para enviar candidaturas de practicas, quiero adaptar rapidamente mi curriculum viejo a una version ajustada al puesto, para completar el envio lo antes posible.
|
||||
|
||||
Entonces puedes usar preguntas estilo The Mom Test para verificar:
|
||||
|
||||
- Cuando fue la ultima vez que enviaste una candidatura?
|
||||
- Como modificaste tu curriculum en ese momento?
|
||||
- Que seccion fue la mas dificil de escribir?
|
||||
- Despues de modificarlo, como juzgabas si era lo suficientemente bueno?
|
||||
|
||||
Asi, los metodos se conectan:
|
||||
|
||||
- JTBD te ayuda a definir la hipotesis de necesidad
|
||||
- The Mom Test te ayuda a verificar la hipotesis a traves de entrevistas
|
||||
|
||||
## 9. Los errores mas comunes de los principiantes al hacer entrevistas con usuarios
|
||||
|
||||
### 9.1 Convertir la entrevista en una presentacion de producto
|
||||
|
||||
Si hablas demasiado de tu propia idea, la otra persona facilmente empezara a apoyarte en lugar de contarte la situacion real.
|
||||
|
||||
### 9.2 Entrevistar solo a conocidos
|
||||
|
||||
Los conocidos pueden ser entrevistados, pero es mas probable que te alienten. Necesitas al menos mezclar con personas mas cercanas a los usuarios reales, en lugar de buscar solo a quienes te apoyan.
|
||||
|
||||
### 9.3 Persiguir preguntas sobre funciones demasiado pronto
|
||||
|
||||
Si aun no has aclarado el problema y empiezas a preguntar sobre botones, interfaces y detalles de funciones, probablemente estas entrando en la solucion demasiado pronto.
|
||||
|
||||
### 9.4 Tomar un "la usaria" como resultado de validacion
|
||||
|
||||
Las entrevistas pueden ayudarte a juzgar la direccion como maximo, no equivalen a una validacion completada. La verdadera validacion, al final, depende de si el usuario esta dispuesto a asumir costos reales, como tiempo, costos de cambio, comportamiento de prueba o incluso pago.
|
||||
|
||||
### 9.5 No organizar despues de la entrevista
|
||||
|
||||
Si dejas la informacion ahi, rapidamente se convertira en impresiones vagas. Es mejor organizar lo antes posible:
|
||||
|
||||
- Problemas que aparecen con alta frecuencia
|
||||
- Palabras emocionales en las citas textuales del usuario
|
||||
- Soluciones alternativas actuales
|
||||
- Costos ya incurridos
|
||||
- Tus propios nuevos juicios
|
||||
|
||||
## 10. Lista de preguntas que puedes copiar y usar directamente
|
||||
|
||||
Si quieres empezar rapidamente, aqui tienes un conjunto de preguntas suficientemente generales.
|
||||
|
||||
### Preguntas de apertura
|
||||
|
||||
- Cuando fue la ultima vez que encontraste este problema?
|
||||
- Que paso exactamente en ese momento?
|
||||
|
||||
### Preguntas sobre comportamiento
|
||||
|
||||
- Como lo manejaste en ese momento?
|
||||
- Por que elegiste esa forma?
|
||||
|
||||
### Preguntas sobre costos
|
||||
|
||||
- Cuanto tiempo o esfuerzo te suele llevar esto?
|
||||
- Has gastado dinero alguna vez para resolverlo?
|
||||
|
||||
### Preguntas sobre soluciones alternativas
|
||||
|
||||
- Has probado otras herramientas o metodos?
|
||||
- Por que no los seguiste usando?
|
||||
|
||||
### Preguntas de cierre
|
||||
|
||||
- Si volvieras a encontrar el mismo problema en el futuro, como deberia ser la solucion ideal?
|
||||
|
||||
Nota: esta pregunta de cierre puede hacerse, pero es mejor dejarla para el final. Porque primero necesitas obtener hechos, no deseos.
|
||||
|
||||
## 11. Resumen
|
||||
|
||||
La contribucion mas importante de The Mom Test no es darte un conjunto de tecnicas para "saber hablar mejor", sino ayudarte a establecer una forma mas lucida de juzgar:
|
||||
|
||||
- No confies demasiado rapido en los elogios de otros sobre tu idea
|
||||
- No tomes "si existiera, la usaria" como una necesidad real
|
||||
- No dejes que la entrevista se convierta en una busqueda de validacion
|
||||
|
||||
Las entrevistas verdaderamente valiosas deben volver siempre a estas cosas:
|
||||
|
||||
- La ultima experiencia real del usuario
|
||||
- Como lo maneja ahora
|
||||
- Que costos ya ha incurrido
|
||||
- En que areas se siente claramente incomodo
|
||||
|
||||
Cuando empieces a preguntar de esta manera, la informacion que obtengas a veces no sonara tan agradable, pero sera mas util.
|
||||
Y al hacer productos, **la verdad util siempre es mas importante que el elogio agradable.**
|
||||
|
||||
<a id="mom-ai"></a>
|
||||
## [12. Como usar la IA para ayudarte con las entrevistas de usuarios](#top-mom)
|
||||
|
||||
The Mom Test es esencialmente un metodo de "hablar con personas reales", por lo que la IA no puede sustituir las entrevistas reales. Pero la IA es muy adecuada para asistirte antes, durante y despues de las entrevistas, especialmente para reducir la barrera de entrada de los principiantes.
|
||||
|
||||
### 12.1 Dejar que la IA reescriba las preguntas "que se desperdician facilmente"
|
||||
|
||||
Muchas personas saben que no deberian preguntar "que te parece esta idea?", pero al abrir la boca vuelven a este tipo de frases. Puedes pasar primero a la IA las preguntas que has preparado, y pedirle que las reescriba:
|
||||
|
||||
```text
|
||||
Estas son las preguntas que quiero hacer en una entrevista con usuarios:
|
||||
[pega tus preguntas]
|
||||
|
||||
Por favor reescribelas usando los principios de The Mom Test:
|
||||
1. Elimina las preguntas de opinion
|
||||
2. Elimina las preguntas que hipotizan sobre el futuro
|
||||
3. Cambialas a preguntas que giren en torno a comportamientos reales pasados, soluciones alternativas existentes y costos ya incurridos
|
||||
4. Finalmente, organizalas en una lista de 8-10 preguntas listas para usar en entrevistas
|
||||
```
|
||||
|
||||
Una entrada muy basica tambien funciona:
|
||||
|
||||
```text
|
||||
Quiero preguntar a los usuarios:
|
||||
1. Que te parece si hago una herramienta de IA para modificar curriculums?
|
||||
2. La usarias?
|
||||
3. Estarias dispuesto a pagar?
|
||||
|
||||
Por favor ayudame a reescribirlas de una mejor manera.
|
||||
```
|
||||
|
||||
La IA podria dar un resultado util como este:
|
||||
|
||||
```text
|
||||
Preguntas reescritas:
|
||||
|
||||
1. Cuando fue la ultima vez que modificaste tu curriculum?
|
||||
2. Por que tuviste que modificarlo?
|
||||
3. Como lo hiciste?
|
||||
4. Cual paso te llevo mas tiempo?
|
||||
5. Has pedido a alguien que te lo revise?
|
||||
6. Has gastado dinero o mucho tiempo alguna vez en modificar tu curriculum?
|
||||
```
|
||||
|
||||
Este tipo de resultado es muy util porque transforma directamente tus preguntas "de opinion" en preguntas "de comportamiento real".
|
||||
|
||||
### 12.2 Dejar que la IA genere guiones de entrevista para diferentes perfiles
|
||||
|
||||
La misma direccion, para diferentes grupos de personas, tiene diferentes focos de entrevista. Por ejemplo, estudiantes, Recursos Humanos y trabajadores freelance tienen preocupaciones completamente diferentes. Puedes pedir a la IA que genere una version del guion para cada tipo de interlocutor:
|
||||
|
||||
- Para usuarios principiantes, enfocate en entender la ultima experiencia real
|
||||
- Para usuarios intensivos, enfocate en entender las soluciones alternativas y la intensidad del dolor
|
||||
- Para usuarios de pago, enfocate en entender si ya han incurrido costos por esto
|
||||
|
||||
Asi tendras mas ritmo en las conversaciones reales, en lugar de hacer las mismas preguntas a todo el mundo.
|
||||
|
||||
Por ejemplo, puedes ingresar directamente:
|
||||
|
||||
```text
|
||||
Voy a hablar con dos tipos de personas:
|
||||
1. Universitarios buscando su primera practica
|
||||
2. Companeros de cursos superiores que ya han revisado muchos curriculums para otros
|
||||
|
||||
Por favor dame un guion de entrevista para cada grupo, con 6 preguntas cada uno.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Para universitarios:
|
||||
1. Cuando fue la ultima vez que enviaste una candidatura de practica?
|
||||
2. Cual fue el paso mas bloqueante en ese momento?
|
||||
3. Como sabes si tu curriculum esta listo para enviar?
|
||||
...
|
||||
|
||||
Para companeros de cursos superiores:
|
||||
1. Cuando fue la ultima vez que revisaste el curriculum de alguien?
|
||||
2. Que problemas obvios ves con mas frecuencia?
|
||||
3. En que paso se atascan mas facilmente los estudiantes de primeros cursos?
|
||||
...
|
||||
```
|
||||
|
||||
Asi, no tienes que inventar preguntas desde cero, y la preparacion de entrevistas sera mucho mas facil.
|
||||
|
||||
### 12.3 Dejar que la IA organice las notas de entrevista
|
||||
|
||||
Despues de las entrevistas, el problema mas comun no es "falta de informacion", sino "informacion demasiado dispersa". La IA es muy adecuada para ayudarte a organizar conversaciones fragmentadas en notas estructuradas:
|
||||
|
||||
```text
|
||||
A continuacion estan las notas de mis entrevistas con 3 usuarios.
|
||||
Por favor organiza siguiendo la perspectiva de The Mom Test:
|
||||
1. Que contenido es hecho y que es solo opinion
|
||||
2. Cual fue el ultimo comportamiento real del usuario
|
||||
3. Cual es la solucion alternativa actual
|
||||
4. Cuales son los costos de tiempo, dinero o esfuerzo que el usuario ya ha incurrido
|
||||
5. Que problemas se mencionan repetidamente
|
||||
6. Que afirmaciones suenan positivas pero carecen de evidencia
|
||||
```
|
||||
|
||||
Este paso es especialmente valioso porque te ayuda a separar lo que "suena bien" de lo que "realmente puede sustentar una decision".
|
||||
|
||||
Una entrada simple podria ser:
|
||||
|
||||
```text
|
||||
Estas son mis notas despues de hablar con un usuario:
|
||||
|
||||
- Dijo que si hubiera una herramienta probablemente la probara
|
||||
- La semana pasada paso una noche entera modificando su curriculum
|
||||
- Ahora depende principalmente de amigos que le revisen
|
||||
- Dijo que lo mas dificil es no saber cuando esta "listo para enviar"
|
||||
|
||||
Por favor ayudame a separar que son opiniones y que son hechos.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Opiniones:
|
||||
- Si hubiera una herramienta probablemente la probara
|
||||
|
||||
Hechos:
|
||||
- La semana pasada paso una noche entera modificando su curriculum
|
||||
- La solucion alternativa actual es pedir a amigos que le revisen
|
||||
- El punto mas dificil es no saber cuando se puede considerar "listo para enviar"
|
||||
|
||||
Puntos clave para juzgar la necesidad:
|
||||
- Este problema acaba de ocurrir recientemente
|
||||
- El usuario ya ha invertido un costo de tiempo significativo
|
||||
- La solucion actual depende de otros, es inestable
|
||||
```
|
||||
|
||||
Este resultado puede mostrar muy intuitivamente a los principiantes: que frases se pueden usar para tomar decisiones y cuales solo se pueden escuchar.
|
||||
|
||||
### 12.4 Dejar que la IA haga una ronda ligera de busqueda en la web
|
||||
|
||||
Si aun no has empezado las entrevistas, primero puedes pedir a la IA que haga una investigacion externa muy ligera, como:
|
||||
|
||||
- En comunidades publicas, como se queja la gente recientemente de este problema
|
||||
- De que se quejan mas los usuarios de las herramientas existentes
|
||||
- Si los usuarios ya han gastado dinero en problemas similares
|
||||
- Que soluciones alternativas ya existen en el mercado
|
||||
|
||||
Este tipo de informacion no puede sustituir las entrevistas reales, pero te ayuda a entrar en contexto mas rapidamente, sabiendo por donde empezar a preguntar.
|
||||
|
||||
Por ejemplo, una entrada simple podria ser:
|
||||
|
||||
```text
|
||||
Por favor ayudame a buscar:
|
||||
"De que se quejan mas los universitarios al modificar su curriculum"
|
||||
Organizalo en 5 quejas mas comunes, escritas en lenguaje coloquial.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Quejas comunes:
|
||||
|
||||
1. No saber que poner exactamente en el curriculum
|
||||
2. Tener que modificarlo para cada puesto, es muy cansado
|
||||
3. Modificar muchas versiones y seguir sin seguridad de si esta bien
|
||||
4. Nadie puede darme retroalimentacion fiable
|
||||
5. Sentir siempre que no esta listo, por lo que sigo posponiendo
|
||||
```
|
||||
|
||||
El valor de este tipo de resultado es que te facilita encontrar un punto de entrada para las entrevistas.
|
||||
|
||||
### 12.5 Dejar que la IA actue como "coach de revision de entrevistas"
|
||||
|
||||
Tambien puedes pasar las notas de una entrevista recien terminada a la IA y pedirle que te haga criticas:
|
||||
|
||||
```text
|
||||
A continuacion estan las notas de una entrevista con un usuario.
|
||||
Por favor ayudame a revisar desde la perspectiva de The Mom Test:
|
||||
1. Que preguntas son demasiado parecidas a buscar validacion
|
||||
2. Que preguntas tienen una guia obvia
|
||||
3. Donde podria haber profundizado mas en los hechos
|
||||
4. Si pudieras repetirlo, como se podria preguntar mejor en esta conversacion
|
||||
```
|
||||
|
||||
Esto es especialmente util para principiantes, porque desarrollaras mas rapidamente una sensibilidad sobre "si realmente estoy recogiendo evidencia o solo recogiendo animos".
|
||||
|
||||
## 📚 Tareas
|
||||
|
||||
Por favor completa las siguientes tareas basandote en el contenido anterior:
|
||||
|
||||
1. Elige una direccion de producto que quieras hacer recientemente, y primero escribe 5 preguntas "que se desperdician facilmente" que hubieras hecho originalmente
|
||||
2. Reescribe estas 5 preguntas en un estilo mas acorde con The Mom Test
|
||||
3. Encuentra 3 usuarios potenciales, y al menos una vez logra preguntar "cuando fue la ultima vez que encontraste este problema"
|
||||
4. Despues de la entrevista, organiza 4 tipos de informacion: comportamientos reales, soluciones alternativas, costos incurridos, dificultades que se repiten
|
||||
|
||||
## Lectura adicional
|
||||
|
||||
- [The Mom Test sitio web oficial](https://momtestbook.com/)
|
||||
- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
|
||||
@@ -0,0 +1,605 @@
|
||||
---
|
||||
title: 'Construyendo un prototipo - Del analisis de negocio al prototipo multipagina'
|
||||
description: 'Experimenta el ciclo completo desde el analisis de negocio hasta la implementacion de un prototipo de producto multipagina.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Aproximadamente <strong>8 horas</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['es-es/stage-1/building-prototype'] ?? []
|
||||
</script>
|
||||
|
||||
# Construyendo un prototipo
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Analisis de negocio', 'Diseno de prototipo', 'Programacion asistida por IA', 'Aplicacion multipagina']" coreOutput="1 prototipo de espacio de trabajo de materiales de e-commerce" expectedOutput="Prototipo web interactivo">
|
||||
|
||||
En el capitulo anterior, aprendimos como <strong>encontrar buenas ideas</strong>: partiendo de las necesidades de los usuarios, encontrar direcciones por las que alguien este dispuesto a pagar. Pero encontrar la direccion es solo el primer paso; <strong>lo que realmente pone a prueba al product manager es: como convertir necesidades vagas en un producto util.</strong>
|
||||
|
||||
Este capitulo va a resolver un <strong>problema real</strong>: tu jefe te dice "usa IA para mejorar la eficiencia de publicar productos en plataformas de e-commerce" -- como lo conviertes en un <strong>prototipo de producto util</strong>?
|
||||
|
||||
A diferencia de hacer un juego de Snake o una calculadora, <strong>en negocios reales no puedes inventar funcionalidades de la nada</strong>:
|
||||
|
||||
1. <strong>Aclarar los puntos de dolor</strong>: hablar con el equipo de operaciones, extraer de la vaga "mejorar la eficiencia" los <strong>verdaderos puntos de dolor</strong>
|
||||
2. <strong>Elegir lo mas importante</strong>: de todos los problemas, resolver primero <strong>el mas doloroso</strong>, sin intentar hacer todo de una vez
|
||||
3. <strong>Validar rapidamente</strong>: usar el AI IDE para hacer primero un <strong>prototipo de una sola pagina</strong>, y una vez que funcione, expandirlo a multipagina
|
||||
4. <strong>Hacer algo util</strong>: entregar finalmente un <strong>espacio de trabajo de materiales de e-commerce que se pueda demostrar y operar</strong>
|
||||
|
||||
Aprenderemos la <strong>transicion de hacer juguetes a hacer aplicaciones</strong>, y a <strong>empatizar y pensar en las necesidades reales de los clientes</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Nota
|
||||
En este capitulo pueden aparecer terminos de negocio. Si no los entiendes, puedes preguntar a la IA para obtener una explicacion.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
|
||||
{ title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
|
||||
{ title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
|
||||
{ title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Definir los requisitos antes de escribir codigo
|
||||
|
||||
En los tutoriales anteriores, usamos AI IDE para generar facilmente el juego de Snake y otros juegos pequenos, pero estos solo pueden considerarse proyectos de juguete y no se pueden aplicar al trabajo y la vida cotidiana. Si queremos que las capacidades de IA sean realmente utiles para todos, deberiamos combinar la programacion Vibe Coding con escenarios de la vida real y del trabajo.
|
||||
|
||||
En el capitulo anterior aprendimos como encontrar <strong>buenas ideas por las que la gente este dispuesta a pagar</strong>, pero encontrar la direccion es solo el comienzo. Cuando realmente haces un producto, descubres que: <strong>saber "que hacer" y saber "como hacerlo" tienen una enorme brecha entre ellos.</strong>
|
||||
|
||||
Esta brecha es la <strong>concrecion de los requisitos</strong>.
|
||||
|
||||
Por ejemplo, en clase o en proyectos personales, a menudo empezamos con la funcion ejecutable mas simple:
|
||||
|
||||
- "Haz un tablero kanban, pon las tareas en una lista."
|
||||
- "Hazme una herramienta de dibujo."
|
||||
- "Hazme un software para recoger cuestionarios."
|
||||
|
||||
Estas a menudo son solo una herramienta, un modulo funcional, ni siquiera pueden considerarse un problema de negocio claro. Lo mas critico es que <strong>estas ideas a menudo son solo "tu crees que son utiles", no "los usuarios realmente las necesitan".</strong>
|
||||
|
||||
En proyectos empresariales o de startup, los product managers e ingenieros suelen partir de una proposicion de negocio mas grande. Por ejemplo, podemos suponer este escenario:
|
||||
|
||||
<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
|
||||
<div style="font-weight: bold; color: #303133; margin-bottom: 10px;">Escenario de negocio:</div>
|
||||
<div style="color: #606266; line-height: 1.6;">
|
||||
<p>Eres el product manager de operaciones de e-commerce de una tienda. Tu jefe te ha dado una proposition vaga pero con mucha presion:</p>
|
||||
<p style="font-style: italic; margin-top: 10px;">"Ahora todo el mundo en las cuentas oficiales esta usando IA para hacer imagenes y textos, parece muy facil. Ayudame con esto, para que seamos mas eficientes cuando subamos productos nuevos al e-commerce de TikTok."</p>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
En este momento puedes pensar: "Jefe, estas sonando otra vez!" Sin embargo, en el trabajo real, este tipo de decisiones vagas con una sola frase son muy comunes, incluso mas frecuentes que las veces que pides te con leche a la semana. Por lo tanto, para ser un buen profesional (y mas aun si eres el CEO de una nueva startup), debemos aprender a pasar de hacer herramientas para nosotros mismos a hacer prototipos de productos reales.
|
||||
|
||||
Como hemos aprendido AI IDE, si lo piensas bien, este requisito es bastante simple: solo tienes que darle un prompt a la IA basado en esto, pasarlo al Agent y ya esta, no?
|
||||
|
||||
```
|
||||
Por favor refierete a mi necesidad xxxx,
|
||||
ayudame a disenar un espacio de trabajo de materiales de e-commerce,
|
||||
que incluya funciones de generacion y gestion de materiales como descripciones de productos, imagenes y videos.
|
||||
```
|
||||
|
||||
Si emocionado conviertes directamente este requisito en un prototipo y se lo envias al jefe -- felicidades, tu bonificacion de este trimestre acaba de ser cancelada!
|
||||
|
||||
**Por que? Este es el punto de dolor central que vamos a resolver:**
|
||||
|
||||
Antes aprendimos AI IDE haciendo proyectos de juguete como el juego de Snake o una calculadora -- funcionalidades simples, tu sabes lo que quieres, y lo haces para ti mismo. Pero **los escenarios de negocio reales son completamente diferentes**:
|
||||
|
||||
- **Tu no eres el usuario**: el jefe quiere "mejorar la eficiencia", pero no sabes como trabaja exactamente el equipo de operaciones cada dia ni donde se atascan;
|
||||
- **La IA tampoco entiende el negocio**: si le das a la IA un requisito vago, solo puede adivinar basandose en conocimientos generales. Lo que produce puede parecer correcto, pero en realidad no se puede usar;
|
||||
- **Una buena idea no equivale a un buen producto**: crees que "anadir una funcion de generacion con IA" es genial, pero los usuarios puede que no lo necesiten, o que sea mas complicado de usar que antes.
|
||||
|
||||
**Por eso debemos aprender a "pasar de tener una idea a entender a los usuarios"** Solo cuando tu creatividad resuelve realmente los problemas de los demas, cuando preguntas, cuando profundizas en el entendimiento del negocio, puedes crear algo verdaderamente valioso. (Una buena idea puede ser incluso mas importante que una buena tecnologia).
|
||||
|
||||
### 1.1 De la imaginacion a la realidad: aprender a hacer preguntas sobre el negocio
|
||||
|
||||
::: info Primero aclaremos: que es un requisito? Que es un negocio?
|
||||
|
||||
Un **requisito** es lo que el usuario realmente quiere, los problemas que encuentra, lo que quiere resolver. Por ejemplo, "el jefe quiere que publique productos mas rapido", eso es un requisito.
|
||||
|
||||
Un **negocio** es lo que los usuarios hacen realmente cada dia, su forma de trabajar. Por ejemplo, lo que hace el equipo de operaciones de e-commerce cada dia: publicar productos, cambiar precios, hacer imagenes, ver datos... todo esto es negocio.
|
||||
|
||||
**Por que prestar atencion al negocio?**
|
||||
Porque si no entiendes el negocio, la herramienta que hagas puede ser "parece buena, pero nadie la usa". Solo entendiendo realmente como trabajan los usuarios cada dia y donde se atascan, puedes hacer algo que realmente les ayude.
|
||||
|
||||
:::
|
||||
|
||||
Desde la perspectiva mas simple, puedes empezar por preguntarte:
|
||||
|
||||
- Cuando el jefe dice "**mas eficiencia**", que significa exactamente? Quiere **hacerlo mas rapido**? O quiere **gastar menos**? O quiere **vender mas**?
|
||||
- Como se publican los productos ahora? **Donde esta el problema**?
|
||||
- Cuantos **productos nuevos** hay que hacer cada dia? Cuantas **imagenes** y cuanto **texto** por producto?
|
||||
- En el trabajo actual, **que es lo mas molesto**, **lo que menos quieres hacer**?
|
||||
|
||||
Pero estas son preguntas que suponemos; debemos preguntar directamente al equipo de operaciones de e-commerce de primera linea: "Cuales son sus dificultades y en que se enfocan?" A traves de la comunicacion, obtendremos respuestas mas precisas:
|
||||
|
||||
::: info Resultado de la entrevista real de negocio
|
||||
|
||||
Preguntamos a personas que hacen operaciones de e-commerce, y nos contaron estas frustraciones:
|
||||
|
||||
**1. Demasiadas cosas y muy dispersas**
|
||||
- Una persona tiene que gestionar varias tiendas, cada tienda tiene muchos productos que preparar;
|
||||
- Cada dia va de aqui para alla: **publicar productos nuevos**, **cambiar precios**, **hacer imagenes**, **ver datos**; una cosa no termina y ya hay que hacer otra.
|
||||
|
||||
**2. Hacer contenido no es hacerlo bien de una vez, sino ir probando**
|
||||
- Primero usan **las imagenes del fabricante**, **materiales usados antes** o **imagenes de referencia encontradas en internet** para **publicar** rapidamente el producto y probar;
|
||||
- Gastan un poco en promocion para **ver si alguien compra**;
|
||||
- Solo para los **productos que venden bien**, se toman el tiempo de hacer buenas imagenes, escribir descripciones detalladas y grabar videos.
|
||||
|
||||
:::
|
||||
Despues de entrevistar al equipo de negocio, sentimos entusiasmo, porque ahora realmente podemos hacer un prototipo perfecto que se ajuste al negocio! -- Nos equivocamos de nuevo. Si intentamos "satisfacer todas las demandas de una vez", el producto sera muy grande y dificil de implementar dentro del tiempo del curso. Por lo tanto, necesitamos organizar y priorizar aun mas, para encontrar el verdadero punto de dolor central.
|
||||
|
||||
### 1.2 De la divergencia a la convergencia: identificar el punto de dolor central y la funcionalidad del negocio
|
||||
|
||||
::: info Por que "converger"? Que es un "punto de dolor"?
|
||||
|
||||
**Hay muchos problemas, pero cual hacemos primero?**
|
||||
|
||||
Los usuarios pueden contarte un monton de problemas: A tambien es molesto, B tambien es molesto, C tambien... Pero si intentas resolver todos los problemas a la vez, probablemente no hagas bien ninguno. Por eso hay que **converger**: elegir de todos los problemas el **mas doloroso, el mas urgente y el mas resoluble** para empezar.
|
||||
|
||||
**Que es un punto de dolor?**
|
||||
Es el problema concreto que los usuarios **mas odian, en el que mas tiempo gastan y que mas quieren resolver**. No es "me parece util", sino algo de lo que los usuarios **se quejan todos los dias y que les duele cada vez que hacen**.
|
||||
|
||||
:::
|
||||
|
||||
A traves de la entrevista anterior, descubrimos que las operaciones encuentran muchos problemas: el ritmo interrumpido por promociones, tener que gestionar multiples tiendas, ir de publicar/cambiar precios/hacer imagenes/ver datos de un lado a otro...
|
||||
|
||||
Si intentamos "resolver todos estos problemas", terminaremos con una herramienta **grande y completa pero inutil**.
|
||||
|
||||
Vamos a clasificar estos problemas (puedes pedirle ayuda a la IA); aproximadamente hay tres categorias:
|
||||
|
||||
1. **Problemas de ritmo**: cuando publicar, cuando ajustar precios;
|
||||
2. **Problemas de eficiencia**: como gestionar bien multiples tiendas y multiples productos a la vez;
|
||||
3. **Problemas de contenido**: como hacer rapidamente imagenes y textos de productos.
|
||||
|
||||
Para nuestro curso, lo mas adecuado para resolver primero es la **categoria 3: el problema de hacer contenido**. Pero "hacer contenido rapidamente" sigue siendo algo abstracto, asi que preguntamos al equipo de negocio donde se atascan especificamente:
|
||||
|
||||
::: info El equipo de negocio dice: hay dos cosas mas dolorosas al hacer contenido
|
||||
|
||||
**Dolor 1: hacer imagenes y textos en lote es demasiado laborioso**
|
||||
- Los materiales estan por todas partes: en la nube, en el historial de WeChat, en el backend de la plataforma... **encontrarlos es muy dificil**;
|
||||
- Hay que publicar muchos productos a la vez, **no hay tiempo para hacerlos uno por uno con cuidado**, solo se puede hacer algo rapido;
|
||||
- Los requisitos no son altos, **con que se pueda ver y publicar**, no necesita ser muy elaborado.
|
||||
|
||||
**Dolor 2: las buenas soluciones no se pueden guardar y reutilizar**
|
||||
- Los titulos y layouts que funcionaron bien antes, **la proxima vez que se necesitan no se encuentran**;
|
||||
- Las soluciones estan dispersas en el historial de chat y en enlaces de productos anteriores;
|
||||
- Cuando se necesitan hay que **buscar un buen rato y copiar/pegar/modificar otro rato**;
|
||||
- Falta una herramienta para **guardar, gestionar y aplicar directamente**.
|
||||
|
||||
:::
|
||||
|
||||
Basandose en estos dos puntos de dolor, vamos a hacer una pequena herramienta: **ayudar al equipo de operaciones a hacer imagenes y textos en lote, y ademas poder guardar las buenas soluciones para usarlas directamente la proxima vez**.
|
||||
|
||||
Solo hace dos cosas (puedes pedirle a la IA que las refine, recuerda ir recortando funcionalidades segun el feedback del negocio):
|
||||
|
||||
::: info Funcionalidad 1: Generar en lote imagenes y textos de productos de e-commerce
|
||||
|
||||
**Para que sirve?**
|
||||
Le das al sistema informacion del producto, y automaticamente te genera imagenes y textos que se pueden usar para publicar en plataformas de e-commerce (como TikTok, Taobao).
|
||||
|
||||
**Entrada**
|
||||
| Tipo | Contenido |
|
||||
|------|------|
|
||||
| Informacion del producto | Nombre, categoria, marca, material, talla, color, etc. |
|
||||
| Imagenes del producto | Foto con fondo blanco o con escenario simple |
|
||||
| Imagenes de referencia | Capturas de productos que se vendieron bien antes o enlaces de referencia |
|
||||
| Forma de importar | Importar en lote via Excel, o rellenar directamente en la pagina |
|
||||
|
||||
**Salida (materiales de e-commerce generados)**
|
||||
- **Imagen principal del producto**: imagen de presentacion con puntos de venta en texto (la primera imagen que ve el usuario al desplazar)
|
||||
- **Titulo del producto**: combinacion de palabras clave que se pueden buscar
|
||||
- **Texto de puntos de venta**: 1-2 frases atractivas para los compradores
|
||||
- Todo es un producto final que **con pequenos ajustes se puede publicar**
|
||||
|
||||
**Resultado esperado**
|
||||
- Antes: cada producto habia que hacerlo desde cero, imagen y texto
|
||||
- Ahora: pasas un lote de productos al sistema, y despues de generar borradores solo eliges y ajustas
|
||||
|
||||
:::
|
||||
|
||||
::: info Funcionalidad 2: Guardar las buenas soluciones como plantillas
|
||||
|
||||
**Entrada**
|
||||
| Tipo | Contenido |
|
||||
|------|------|
|
||||
| Un conjunto completo | Imagen principal + titulo + texto |
|
||||
|
||||
**Salida**
|
||||
| Funcion | Descripcion |
|
||||
|------|------|
|
||||
| Aplicar | Al hacer un producto nuevo la proxima vez, generar automaticamente con la plantilla |
|
||||
| Modificar | Cambiar directamente el titulo y el texto |
|
||||
| Gestionar | Poner nombre, etiquetar (ej. "plantilla de bolsos de hombre", "titulo de promocion"), para facilitar la busqueda |
|
||||
|
||||
**Resultado esperado**
|
||||
1. Importar un producto nuevo
|
||||
2. Elegir: dejar que el sistema genere por defecto, o **usar mi plantilla guardada**
|
||||
3. El sistema aplica automaticamente el estilo de la plantilla, generando nuevas imagenes y textos
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
**Repasemos lo que acabamos de hacer:**
|
||||
|
||||
1. **Primero hicimos preguntas**: en lugar de empezar directamente a hacer, primero preguntamos al equipo de operaciones "que es lo que mas les molesta";
|
||||
2. **Encontramos los puntos de dolor**: descubrimos que lo mas doloroso es "hacer imagenes y textos es demasiado trabajoso" y "las buenas soluciones no se pueden guardar";
|
||||
3. **Convergimos el alcance**: no hacemos una plataforma grande y completa, solo hacemos dos funciones: "generar imagenes y textos en lote + guardar plantillas".
|
||||
|
||||
**Por que es importante hacer esto?**
|
||||
|
||||
Un error comun de los principiantes al hacer productos es: cuantas mas funcionalidades, mejor. Pero lo que los usuarios realmente necesitan es **que se resuelva el problema mas doloroso**. Mejor hacer una o dos funcionalidades que realmente ayuden al usuario que un monton que no funcionen bien.
|
||||
|
||||
**El nucleo del pensamiento de producto y negocio:**
|
||||
- No pienses "creo que el usuario necesita esto"
|
||||
- Ve y pregunta al usuario "que haces cada dia? Donde te duele mas?"
|
||||
- De todos los problemas, **converge** al mas doloroso y mas resoluble
|
||||
- Haz primero la **version minima usable**, y luego itera poco a poco
|
||||
|
||||
Esto es lo que debemos aclarar antes de escribir codigo. El codigo es solo una herramienta; **entender al usuario y encontrar el problema correcto** es el primer paso.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
|
||||
{ title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
|
||||
{ title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
|
||||
{ title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Producir un prototipo en 10 minutos: dejar que el AI IDE implemente la "funcionalidad central"
|
||||
|
||||
::: info Sobre el Plan de programacion
|
||||
Si sientes que tu IDE actual no es lo suficientemente inteligente, o que te quedas sin cuota muy rapido, puedes comprar un **plan de programacion**. Puedes prever este articulo de referencia sobre el uso de Claude para programar.
|
||||
:::
|
||||
|
||||
Pensar es bueno, pero no hay que sobre-pensar. Dejemos de lado el exceso de reflexion y intentemos hacer un prototipo empezando con una sola pagina.
|
||||
|
||||
### 2.1 Primer paso: dile a la IA en lenguaje llano que quieres
|
||||
|
||||
Al principio no busques el prompt perfecto; empieza con tu expresion mas natural. Como cuando le describes un requisito a un companero, dile a la IA en lenguaje llano lo que quieres hacer, y luego deja que la IA te ayude a optimizarlo en algo mas profesional.
|
||||
|
||||
#### 2.1.1 Empezar con una descripcion verbal (recomendado para principiantes)
|
||||
|
||||
Primero describe la idea con tus propias palabras, aunque sea rudimentario, no importa:
|
||||
|
||||
```
|
||||
Quiero hacer una herramienta que ayude a operaciones de e-commerce a generar automaticamente imagenes principales y textos de productos.
|
||||
Los de operaciones normalmente tienen que hacer imagenes y escribir textos uno por uno, lo cual es muy molesto.
|
||||
Mi idea es: suben la informacion del producto, el sistema genera un lote de borradores,
|
||||
y los de operaciones eligen los buenos, los ajustan un poco y ya los pueden usar.
|
||||
|
||||
Primero hagamos la version mas simple: una pagina, a la izquierda se rellena la informacion del producto,
|
||||
a la derecha se muestra el resultado generado. Que se puedan subir imagenes, rellenar texto,
|
||||
y despues de generar, mostrar la vista previa de la imagen principal y el texto.
|
||||
```
|
||||
|
||||
A continuacion, enviale este texto a la IA (como ChatGPT, Claude, etc.) y pidele que te ayude a expandirlo. La IA normalmente te ayudara a completar detalles que no habias considerado, organizar tu idea mas claramente, y finalmente generar un prompt adecuado para enviar al AI IDE.
|
||||
|
||||
Puedes decirle a la IA asi:
|
||||
```
|
||||
Ayudame a expandir la idea anterior, organizala en un documento de logica de negocio claro,
|
||||
y luego genera un prompt adecuado para enviar a un AI IDE (como Cursor, Trae),
|
||||
para generar el codigo de un prototipo de aplicacion de una sola pagina.
|
||||
```
|
||||
|
||||
La IA devolvera un conjunto de requisitos estructurados y el prompt correspondiente. Tu lo revisas, eliminas las funcionalidades innecesarias, confirmas que esta todo correcto, y luego lo usas para generar el codigo.
|
||||
|
||||
La ventaja de hacer esto es que lo que describes verbalmente es tu idea mas autentica, aunque puede faltar algunos detalles importantes. Cuando la IA te ayuda a expandir, puede preguntar cosas como "quieres soportar subida en lote?" que no habias pensado, ayudandote a validar mas. Puedes elegir conservar o eliminar funcionalidades poco practicas segun el feedback, y en iteraciones sucesivas determinar el prompt inicial para la IA.
|
||||
|
||||
#### 2.1.2 Saltarse la expansion: enviar directamente tu documento de negocio organizado a la IA
|
||||
|
||||
Si ya has organizado el documento de logica de negocio en capitulos anteriores (por ejemplo, una descripcion de requisitos en lenguaje llano), puedes usar directamente el siguiente formato para enviarlo al AI IDE, ahorrando el paso intermedio de la expansion. Adecuado cuando los requisitos ya estan claros y quieres empezar a escribir codigo directamente:
|
||||
|
||||
```
|
||||
Ayudame a implementar una aplicacion de una sola pagina basandote en la logica de negocio, para validar la funcionalidad central.
|
||||
|
||||
La logica de negocio es la siguiente:
|
||||
1. Ayudar a operaciones a generar en lote la primera version de borradores de imagenes y textos:
|
||||
- **Entrada (soporta subida directa e importacion en lote de materiales):**
|
||||
- Informacion basica del producto: nombre, categoria, marca, material, talla, color, publico objetivo, etc.;
|
||||
- Imagenes del producto: foto con fondo blanco / foto con escenario simple;
|
||||
- Cada generacion soporta subir capturas de productos exitosos anteriores o enlaces de referencia;
|
||||
- Soporta importar en lote via Excel, o rellenar/subir online en la pagina.
|
||||
- Soporta especificar en la pagina si guardar los materiales en la biblioteca, para facilitar el proximo uso
|
||||
- **Salida (contenido que se puede publicar directamente o con pequenos cambios):**
|
||||
- Para cada producto, un borrador de imagen principal "presentable, con puntos de venta basicos";
|
||||
- Un titulo "con estructura razonable y palabras clave centrales" + 1-2 frases de puntos de venta.
|
||||
- **Cambio esperado en la forma de uso:**
|
||||
Pasar de empezar cada lote desde cero a pasar un lote de productos al sistema y usar los borradores generados para filtrar y ajustar.
|
||||
|
||||
Primero hagamos la primera funcionalidad; la segunda (biblioteca de plantillas) la anadiremos despues.
|
||||
```
|
||||
|
||||
#### 2.1.3 El enfoque del programador (avanzado): dejar que la IA escriba "el prompt del prompt"
|
||||
|
||||
Si quieres controlar mas finamente el proceso de generacion de codigo, primero puedes pedirle a la IA (como ChatGPT) que genere un prompt especifico para el AI IDE basandose en tus requisitos:
|
||||
|
||||
```
|
||||
Basandote en la siguiente idea, ayudame a escribir un prompt para enviar a un coding Agent que generara codigo,
|
||||
necesito usar este prompt para generar codigo.
|
||||
|
||||
[Pega aqui tu descripcion de la logica de negocio]
|
||||
|
||||
Requisitos:
|
||||
1. El prompt debe incluir una descripcion clara del layout de la pagina
|
||||
2. Definir claramente la estructura de datos y la logica de interaccion
|
||||
3. Especificar el stack tecnologico (ej. React + Tailwind)
|
||||
4. Listar los puntos de funcionalidad central a implementar
|
||||
```
|
||||
|
||||
Normalmente la IA generara un prompt estructurado como el siguiente:
|
||||
|
||||
|
||||
Puedes modificar ligeramente este prompt y luego enviarlo al AI IDE para generar codigo.
|
||||
|
||||
### 2.2 Segundo paso: dejar que el AI IDE genere codigo directamente
|
||||
|
||||
#### 2.2.1 Preparacion: conocer las operaciones basicas del AI IDE
|
||||
|
||||
Si aun no estas familiarizado con el uso basico del AI IDE (como Cursor, Trae, Windsurf, etc.), te recomendamos primero ver el [tutorial basico de IDE](/es-es/appendix/2-development-tools/ide-basics/) en el apendice, para entender como:
|
||||
- Crear un nuevo proyecto
|
||||
- Conversar con el AI Agent
|
||||
- Entender el proceso de generacion de codigo de la IA
|
||||
|
||||
#### 2.2.2 Empezar a generar codigo
|
||||
|
||||
Ya tienes el prompt inicial; usemos el primer estilo de prompt como ejemplo para que la IA nos ayude a generar codigo. Primero crea una ventana y la carpeta correspondiente, abre la carpeta (inicializa un nuevo proyecto en la direccion de carpeta que prefieras):
|
||||
|
||||
|
||||
|
||||
En la barra lateral, elige el modelo que prefieras (se recomiendan gemini, gpt, glm, kimi, minimax, etc.), e introduce el prompt obtenido en el primer paso:
|
||||
|
||||
|
||||
Despues de hacer clic en generar, veremos la etapa familiar: la IA planificara la estructura de directorios del proyecto, los archivos necesarios y dara el contenido inicial de cada archivo.
|
||||
|
||||
::: warning Nota especial: la IA puede detenerse esperando tu confirmacion
|
||||
Durante el proceso de generacion, el AI Agent frecuentemente **se detendra esperando tu input o confirmacion**, por ejemplo:
|
||||
- Preguntandote si quieres continuar al siguiente paso
|
||||
- Pidiendote que presiones Enter para confirmar una operacion
|
||||
- Preguntandote sobre alguna eleccion tecnica
|
||||
|
||||
**Si ves que la IA no avanza, primero revisa la interfaz de chat para ver si esta esperando tu respuesta.** Muchos principiantes creen que la IA esta pensando, cuando en realidad ya se detuvo esperandote. Responde activamente o presiona Enter, y la IA continuara trabajando.
|
||||
:::
|
||||
|
||||
Tambien recuerda presionar Enter para confirmar la informacion (de lo contrario se quedara esperando; algunos AI IDE no tienen este problema):
|
||||
|
||||
|
||||
Si te encuentras con la siguiente situacion, significa que ya se ha iniciado un servicio local; necesitas hacer clic para saltar, de lo contrario te quedaras en esta pantalla (si despues de generar el codigo no aparece nada, necesitas decir activamente "ayudame a iniciar este proyecto"):
|
||||
|
||||
|
||||
::: info Explicacion del escenario
|
||||
**Explicacion del escenario**: usaste `npm create vite@latest` para crear un proyecto React + TypeScript (easy-vibe-web). Una vez completada la creacion, la computadora automaticamente "ejecutara" esta pagina web, para que puedas ver el efecto inmediatamente.
|
||||
|
||||
**Servicio local**: se puede entender como que tu computadora ha abierto temporalmente una ventana de muestra de pagina web, que solo se ejecuta en tu computadora; los demas no pueden acceder.
|
||||
|
||||
**localhost (direccion local)**: `localhost` significa "esta computadora misma". Cuando el navegador accede a esta direccion, en realidad esta accediendo a la pagina web que se esta ejecutando en tu computadora.
|
||||
|
||||
**Puerto**: el puerto se puede entender como un numero que se usa para distinguir diferentes servicios de paginas web que se ejecutan en la misma computadora. Este proyecto usa el 5174.
|
||||
|
||||
**Enlace de acceso `http://localhost:5174/`**: esta direccion significa "acceder a la pagina web con numero 5174 en esta computadora". Abriendo este enlace en el navegador podras ver el efecto.
|
||||
|
||||
**Explicacion de este escenario**: el sistema originalmente queria usar el puerto 5173, pero ese numero ya estaba en uso, asi que cambio automaticamente al 5174. Esto es normal.
|
||||
|
||||
**Instrucciones de operacion**: abre el navegador, introduce `http://localhost:5174/` en la barra de direcciones y presiona Enter para ver la pagina del proyecto actual.
|
||||
:::
|
||||
|
||||
Despues de confirmar todo, espera un momento a que el agente termine de ejecutarse, y podemos obtener el siguiente resultado:
|
||||
|
||||
|
||||
Podemos ver que ya hay una vista preliminar de las funcionalidades, pero la pagina frontend se ve muy fea. En este momento podemos intentar hablar directamente con la IA para optimizar la visualizacion de la interfaz:
|
||||
|
||||
|
||||
Despues de optimizar, podemos obtener una interfaz mas bonita:
|
||||
|
||||
|
||||
Puedes modificar las funcionalidades de la pagina web segun tus necesidades; puedes adjuntar capturas de pantalla y preguntar libremente, por ejemplo: "Todavia no necesito la funcion de importacion en lote, ayudame a quitarla", "Hay demasiadas cosas que rellenar a la izquierda, ayudame a dejar solo xxxxx". Incluso puedes referenciar otros sitios web maduros; por ejemplo, aqui podemos referirnos directamente a un producto de diseno de Google (puedes pegar una captura de pantalla de un sitio web maduro que te guste):
|
||||
|
||||
|
||||
Finalmente podemos obtener:
|
||||
|
||||
|
||||
### 2.3 Que hacer cuando hay errores
|
||||
|
||||
En la practica, encontrar errores es inevitable; es un fenomeno normal y no significa que hayas hecho algo mal. No necesitas entender el error; solo pasa "lo que ves" completamente a la IA.
|
||||
|
||||
Solo hay tres formas comunes de manejarlos:
|
||||
|
||||
- **Forma 1: Error en la pagina o terminal**
|
||||
Cuando la pagina se pone roja, queda en blanco, o aparecen un monton de letras rojas en la terminal, simplemente haz una captura de pantalla o copia toda la informacion del error y enviasela a la IA para que te ayude a repararlo.
|
||||
|
||||
- **Forma 2: La funcionalidad no esta bien pero no hay error**
|
||||
Por ejemplo, el boton no responde, los datos no se muestran, los estilos estan desordenados. Describe en lenguaje llano "que esta pasando ahora + lo que tu querias", y si es necesario, anade una captura de pantalla.
|
||||
|
||||
- **Forma 3: No estas seguro de si hay algun problema**
|
||||
Puedes preguntar directamente a la IA: "Ayudame a revisar si esta funcionalidad tiene algun problema obvio, si necesita ajustes."
|
||||
|
||||
#### 2.3.1 Preguntas frecuentes de principiantes
|
||||
|
||||
- **P: No se donde esta la informacion del error?**
|
||||
- R: Generalmente, mira todas las "letras rojas". En la terminal, la consola o la pagina, busca las indicaciones en rojo, selecciona todo y copialo para la IA.
|
||||
|
||||
- **P: Que hago si la IA lo arregla pero sigue dando el mismo error?**
|
||||
- R: Esto es comun. Sigue haciendo capturas de pantalla o copiando la ultima informacion del error y enviasela, para que lo repare aun mas basandose en la ultima modificacion.
|
||||
|
||||
- **P: Necesito entender completamente el plan de reparacion de la IA?**
|
||||
- R: No necesitas entenderlo todo de una vez. Puedes centrarte en uno o dos puntos cada vez; con el tiempo, iras entendiendo cada vez mas codigo, como cuando acumulas vocabulario en ingles.
|
||||
|
||||
- **P: Despues de muchas modificaciones, el problema sigue sin resolverse?**
|
||||
- R: Puedes intentar:
|
||||
- Usar la funcion de "rollback de version" del IDE, encontrar el boton de deshacer en el chat del agente, volver a una version que funcionaba y empezar de nuevo;
|
||||
- Cambiar de modelo o ajustar el prompt, describiendo el fenomeno y la informacion del error de forma mas especifica;
|
||||
- Empaquetar "codigo actual + log de errores + comportamiento esperado" y enviarlo todo de una vez a la IA, para que reestructure completamente la parte problematica.
|
||||
|
||||
## 3. Expandir de aplicacion de una sola pagina a multipagina
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
|
||||
{ title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
|
||||
{ title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
|
||||
{ title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Cuando la logica de la funcionalidad central esta basicamente generada, podemos generar el resto del contenido. Por ejemplo, en este punto, si hacemos clic en configuracion o en algunos botones, no hacen nada.
|
||||
|
||||
Puedes pedirle a la IA que revise segun los requisitos del prompt de negocio y genere las partes que faltan, o pedirle directamente que complete las paginas no implementadas. Tambien puedes especificar una pagina para que la IA la complete, hasta que las paginas se puedan hacer clic y las funcionalidades puedan interactuar normalmente:
|
||||
|
||||
|
||||
Despues de esperar un momento, podemos ver que el programa ya ha completado multiples paginas y funcionalidades interactivas basandose en lo anterior:
|
||||
|
||||
|
||||
|
||||
|
||||
En este punto solo necesitas hacer clic manualmente en cada funcion y boton que te interese, asegurandote de que la interaccion sea normal. Si hay funcionalidades que no se pueden interactuar, puedes comunicarte con la IA para que te ayude a repararlas.
|
||||
|
||||
## 4. Hacer que el prototipo "parezca profesional"
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
|
||||
{ title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
|
||||
{ title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
|
||||
{ title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Despues de tener la estructura multipagina, el ultimo paso es hacer que el prototipo pase de "funcional" a "comodo de usar y profesional". Para ello, necesitamos experimentar todo el flujo (flujo de usuario) y hacer que la IA repare las partes que no funcionan, para que podamos simular un nuevo usuario recorriendo todo el flujo desde cero cada vez que actualizamos, obteniendo el resultado esperado.
|
||||
|
||||
Recordemos los requisitos iniciales:
|
||||
|
||||
```
|
||||
1. Ayudar a operaciones a generar en lote la primera version de borradores de imagenes y textos:
|
||||
- **Entrada (soporta subida directa e importacion en lote de materiales):**
|
||||
- Informacion basica del producto: nombre, categoria, marca, material, talla, color, publico objetivo, etc.;
|
||||
- Imagenes del producto: foto con fondo blanco / foto con escenario simple;
|
||||
- Cada generacion soporta subir capturas de productos exitosos anteriores o enlaces de referencia;
|
||||
- Soporta importar en lote via Excel, o rellenar/subir online en la pagina.
|
||||
- Soporta especificar en la pagina si guardar los materiales en la biblioteca, para facilitar el proximo uso
|
||||
- **Salida (contenido que se puede publicar directamente o con pequenos cambios):**
|
||||
- Para cada producto, un borrador de imagen principal "presentable, con puntos de venta basicos";
|
||||
- Un titulo "con estructura razonable y palabras clave centrales" + 1-2 frases de puntos de venta.
|
||||
- **Cambio esperado en la forma de uso:**
|
||||
Pasar de empezar cada lote desde cero a pasar un lote de productos al sistema y usar los borradores generados para filtrar y ajustar.
|
||||
|
||||
2. Guardar las buenas soluciones como una biblioteca de plantillas reutilizables:
|
||||
- **Que se puede guardar?**
|
||||
- Cualquier salida que las operaciones consideren "buena" se puede guardar con un clic:
|
||||
- Puede ser la combinacion completa de "imagen principal + titulo + puntos de venta";
|
||||
- O solo una parte, como una estructura de titulo o un texto de puntos de venta.
|
||||
- **Que se puede hacer despues de guardar?**
|
||||
- **Reutilizar:**
|
||||
- Usar esta entrada guardada para generar un nuevo lote de imagenes y textos con los parametros de nuevos productos;
|
||||
- O sobre el mismo producto, generar multiples variantes basadas en la plantilla para hacer tests A/B.
|
||||
- **Editar:**
|
||||
- Modificar directamente el titulo / texto de puntos de venta;
|
||||
- Si se soporta edicion de imagen, se pueden ajustar elementos como texto y pegatinas en la imagen principal.
|
||||
- **Gestionar:**
|
||||
- Poner nombre a las entradas guardadas, etiquetar (ej. "plantilla de imagen principal de bolsos de hombre", "estructura de titulo de promocion"), soportar clasificacion por tienda para facilitar la busqueda posterior.
|
||||
- **Como usarlo la proxima vez que se publique un producto nuevo?**
|
||||
- Despues de importar productos nuevos, las operaciones pueden elegir:
|
||||
- Usar la logica por defecto del sistema, o
|
||||
- Especificar "usar una de mis plantillas guardadas para generar";
|
||||
- El sistema basandose en los datos del nuevo producto, aplica automaticamente la estructura y el estilo de la plantilla, generando nuevos borradores de imagen principal + titulo + puntos de venta.
|
||||
```
|
||||
|
||||
Si cada vez que pruebas necesitas crear datos nuevos, esto lleva mucho tiempo. En este caso, normalmente usamos algo llamado "datos de prueba". Podemos comunicarnos con la IA de la siguiente manera, para que genere en la interfaz una entrada rapida de datos de prueba que nos permita verificar que todas las funcionalidades funcionan correctamente:
|
||||
|
||||
```
|
||||
Necesito probar el proceso de uso del usuario, asegurandome de que pueda completarse totalmente. Por favor genera una entrada de datos de prueba basandote en los siguientes requisitos, para que pueda hacer clic y probar rapidamente si todo el flujo funciona normalmente:
|
||||
1. Ayudar a operaciones a generar en lote la primera version de borradores de imagenes y textos:
|
||||
- **Entrada (soporta subida directa e importacion en lote de materiales):**
|
||||
- Informacion basica del producto: nombre, categoria, marca, material, talla, color, publico objetivo, etc.;
|
||||
- Imagenes del producto: foto con fondo blanco / foto con escenario simple;
|
||||
- Cada generacion soporta subir capturas de productos exitosos anteriores o enlaces de referencia;
|
||||
- Soporta importar en lote via Excel, o rellenar/subir online en la pagina.
|
||||
- Soporta especificar en la pagina si guardar los materiales en la biblioteca, para facilitar el proximo uso
|
||||
- **Salida (contenido que se puede publicar directamente o con pequenos cambios):**
|
||||
- Para cada producto, un borrador de imagen principal "presentable, con puntos de venta basicos";
|
||||
- Un titulo "con estructura razonable y palabras clave centrales" + 1-2 frases de puntos de venta.
|
||||
- **Cambio esperado en la forma de uso:**
|
||||
Pasar de empezar cada lote desde cero a pasar un lote de productos al sistema y usar los borradores generados para filtrar y ajustar.
|
||||
```
|
||||
|
||||
Es facil obtener resultados (si crees que un dato es muy poco, puedes pedirle a la IA que genere multiples casos de prueba):
|
||||
|
||||
|
||||
Despues de hacer clic, obtenemos el resultado:
|
||||
|
||||
|
||||
En este punto lo que obtenemos directamente es el resultado, no hay un "proceso de generacion simulado". Si queremos simular un proceso de generacion real, podemos hablar directamente con la IA: "Por favor simula un proceso de generacion real, que me des el resultado despues de un rato al hacer clic."
|
||||
|
||||
|
||||
Despues de verificar la funcionalidad de generacion, tambien debemos asegurarnos de que la funcionalidad de la biblioteca de plantillas funciona correctamente. En la tarjeta de generacion de la pagina podemos ver que la funcion de guardado de plantillas no se ha implementado; necesitamos tener una conversacion mas profunda con la IA: "Por favor ayudame a asegurarme de que el requisito [pega aqui el contenido del punto 2 de arriba] funciona correctamente, que se pueda hacer clic en un resultado para guardar la plantilla correspondiente, y que al abrirlo se puedan ver los parametros de generacion"
|
||||
|
||||
La generacion a menudo no se consigue de una sola vez; frecuentemente hay que hacer capturas de pantalla para corregir:
|
||||
|
||||
|
||||
Finalmente obtenemos el resultado esperado:
|
||||
|
||||
|
||||
Ademas de experimentar manualmente el flujo de requisitos, tambien puedes pedirle a la IA que haga directamente una verificacion de requisitos, por ejemplo:
|
||||
|
||||
- "Por favor compara con mis requisitos originales, revisa si la aplicacion actual ya cubre todas las funcionalidades centrales."
|
||||
- "Ayudame a hacer una lista de funcionalidades, indicando cuales ya estan completadas, cuales aun no estan implementadas o tienen una experiencia insuficiente."
|
||||
|
||||
La IA generalmente generara un checklist, y puedes pensar si necesitas seguir mejorando basandote en los resultados. Despues de iteraciones repetidas, puedes obtener un resultado de prototipo bastante completo.
|
||||
|
||||
## 5. Asignacion: replica tu propio espacio de trabajo de e-commerce de TikTok
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Mision de desafio: replica el espacio de trabajo de materiales de e-commerce</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Referenciando los prompts y el contenido de esta leccion, completa un ciclo cerrado:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Practica de ciclo cerrado completo</strong>
|
||||
<ul>
|
||||
<li>Generacion de prompts a partir del analisis de negocio -> generacion de prototipo de una pagina -> generacion de prototipo multipagina</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Compartir resultados</strong>
|
||||
<ul>
|
||||
<li>Haz capturas de pantalla de tu programa y compartelas con todos</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Pregunta de reflexion</strong>
|
||||
<ul>
|
||||
<li>Para la proxima seccion "integrar capacidades de LLM y generacion de texto a imagen", piensa con antelacion: como podrias integrar capacidades como "IA que escribe textos / genera imagenes / genera scripts" en tu espacio de trabajo?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Proximo paso
|
||||
|
||||
En la siguiente seccion, construiremos sobre este espacio de trabajo de produccion de contenido e integraremos capacidades especificas de IA (texto a texto, imagen a texto, texto a imagen), por ejemplo:
|
||||
|
||||
- Generar automaticamente un primer borrador de texto y multiples opciones de titulos para una tarea de contenido
|
||||
- Generar automaticamente un borrador de imagen de acompanamiento basandose en la descripcion de la tarea (texto a imagen)
|
||||
- Clasificar y resumir automaticamente las tareas de contenido historicas, ayudandote a planificar los temas de la proxima campana
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Sigue aprendiendo"
|
||||
description="Se recomienda seguir el orden 'integrar capacidades de IA -> ciclo completo de proyecto -> ingenieria de diseno'."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'Practica de proyecto completo - De Demo a prototipo de nivel de producto'
|
||||
description: 'Sal de la fase de Demo, aprende a mejorar los enlaces del producto, construye datos de simulacion realistas, e itera rapidamente con retroalimentacion.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Aproximadamente <strong>3 dias</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['es-es/stage-1/complete-project-practice'] ?? []
|
||||
</script>
|
||||
|
||||
# Practica de proyecto completo
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Pensamiento de producto', 'Datos de simulacion', 'Mejora de interaccion', 'LocalStorage']" coreOutput="1 prototipo de producto IA con funcionalidad completa" expectedOutput="Aplicacion web con flujo completo y datos realistas">
|
||||
|
||||
En el capitulo anterior integramos capacidades de IA y el Demo ya funciona, pero aun esta <strong>lejos</strong> de ser un verdadero "producto": al actualizar la pagina los <strong>datos desaparecen</strong>, un error causa <strong>pantalla en blanco</strong>, la lista solo tiene "dato de prueba 1, dato de prueba 2", y si el usuario hace clic en el lugar equivocado <strong>no puede deshacer</strong>...
|
||||
|
||||
Este capitulo va a <strong>llenar todos estos huecos</strong>: vamos a <strong>completar el flujo completo del producto</strong>, usar IA para generar <strong>datos de negocio realistas</strong> en lugar de datos falsos, anadir <strong>manejo de errores y retroalimentacion al usuario</strong>, y finalmente pulir un prototipo completo que <strong>se pueda mostrar a otros</strong>.
|
||||
|
||||
Este es el <strong>ultimo capitulo</strong> de la etapa inicial. Despues de completar este paso, habras logrado la transformacion de "no saber programar en absoluto" a "<strong>poder crear independientemente un prototipo de producto IA</strong>".
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
|
||||
{ title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
|
||||
{ title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
|
||||
{ title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Rechaza el "Happy Path": completa el flujo central
|
||||
|
||||
Muchos principiantes que hacen prototipos suelen limitarse al "Happy Path" (el camino ideal): el usuario hace clic -> la API responde con exito -> se muestra el resultado.
|
||||
Pero en el mundo real, las cosas rara vez son tan simples. Para que tu prototipo parezca un producto real, necesitas considerar los siguientes eslabones "invisibles".
|
||||
|
||||
### 1.1 Anadir "espera" y "retroalimentacion"
|
||||
|
||||
Cuando el usuario hace clic en "generar texto", la IA suele tardar varios segundos en responder. Si la interfaz no muestra ninguna reaccion, el usuario pensara que el programa se ha roto.
|
||||
**Necesitas que tu AI IDE te ayude a anadir estados de Loading:**
|
||||
|
||||
> Ejemplo de prompt:
|
||||
> "Cuando haga clic en el boton de generar, cambialo a 'Generando...' y desactivalo, y al mismo tiempo muestra una animacion de carga en el area derecha. Solo restaura el estado normal despues de que la API devuelva el resultado."
|
||||
|
||||
### 1.2 Manejar "fallos" y "excepciones"
|
||||
|
||||
La API Key puede caducar, la red puede desconectarse.
|
||||
**Necesitas que tu AI IDE te ayude a manejar los errores:**
|
||||
|
||||
> Ejemplo de prompt:
|
||||
> "Si la peticion a la API falla, no muestres el error directamente en la consola. En su lugar, muestra una notificacion roja (Toast) en la parte superior de la pagina que diga 'Generacion fallida, por favor intenta de nuevo mas tarde', y permite que el usuario vuelva a hacer clic en generar."
|
||||
|
||||
### 1.3 Persistencia del historial de conversacion
|
||||
|
||||
En el proceso de interaccion con la IA, necesitamos guardar el contenido de las conversaciones para que el usuario pueda revisar el historial y continuar intercambios anteriores. En esta etapa aun no introducimos una base de datos; puedes elegir entre las siguientes soluciones ligeras:
|
||||
|
||||
**Opciones de almacenamiento:**
|
||||
|
||||
| Opcion | Escenario aplicable | Caracteristicas |
|
||||
| ---------------- | -------------------------------- | ------------------------------------ |
|
||||
| **LocalStorage** | Proyecto puramente frontend, datos del usuario guardados en el navegador | Implementacion simple, no se pierde al actualizar, no se sincroniza entre dispositivos |
|
||||
| **Archivo JSON** | Prototipo local, datos almacenados en formato archivo | Estructura clara, facil de depurar, editable manualmente |
|
||||
| **Archivo TXT** | Solucion mas simple, registro rapido de contenido de texto | Formato libre, buena compatibilidad |
|
||||
|
||||
**Ejemplo de contenido de conversacion:**
|
||||
El historial de conversacion guardado suele incluir el siguiente contenido:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"role": "user",
|
||||
"content": "Ayudame a generar un texto de venta para unos auriculares Bluetooth en TikTok",
|
||||
"timestamp": "2026-01-20 10:30:00"
|
||||
},
|
||||
{
|
||||
"role": "assistant",
|
||||
"content": "[Texto recomendacion de auriculares Bluetooth]\n\n🎧 Adios al retraso, experiencia de escucha inmersiva\n\n chicas! Estos auriculares Bluetooth son increibles\n\n 40dB de cancelacion activa de ruido, entra instantaneamente al mundo de la musica\n 30 horas de bateria super larga, una semana de viaje sin cargar\n llamadas claras como en persona, incluso en el metro ruidoso\n diseno semi-in-ear, comodos de usar durante horas\n\n Oferta por tiempo limitado, haz clic en el enlace de abajo para conseguirlos!",
|
||||
"timestamp": "2026-01-20 10:30:05"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**Prompt de implementacion:**
|
||||
|
||||
> "Por favor ayudame a implementar la funcion de guardado del historial de conversacion. Soporta guardar los registros de conversacion entre el usuario y la IA como un archivo JSON (o usando LocalStorage). Cada vez que se entra a la pagina, carga automaticamente el historial de conversacion, y permite ver y eliminar registros individuales."
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
|
||||
{ title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
|
||||
{ title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
|
||||
{ title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Inyectar el alma: datos realistas simulados (Mock Data)
|
||||
|
||||
Una pagina vacia no puede convencer a nadie. Imagina que le muestras a alguien un "espacio de trabajo de materiales de e-commerce", y el historial esta completamente vacio, o solo tiene una linea "test / test / test".
|
||||
Para lograr el mejor efecto de demostracion, necesitamos "falsificar" algunos datos realistas que hagan que tu prototipo parezca un producto real que ha estado operando durante medio ano.
|
||||
|
||||
### 2.1 Deja que la IA te ayude a disenar la estructura de datos
|
||||
|
||||
No necesitamos pensar por nosotros mismos como deberia llamarse cada campo (por ejemplo, si debe ser `name` o `title`); esto se lo podemos dejar completamente a la IA.
|
||||
|
||||
Solo necesitas decirle a la IA tu **escenario de negocio**:
|
||||
|
||||
> **Ejemplo de prompt:**
|
||||
> "Estoy haciendo un prototipo de un **espacio de trabajo de materiales de e-commerce para TikTok**.
|
||||
> Por favor ayudame a disenar una estructura de datos JSON para describir una 'tarea de producto'.
|
||||
> Esta tarea deberia incluir: informacion basica del producto (nombre, categoria), materiales de entrada (enlaces de imagenes), y resultados generados por IA (titulo, texto, imagen de poster).
|
||||
> Por favor dame directamente un ejemplo JSON."
|
||||
|
||||
La IA automaticamente concebira campos como `productName`, `generatedContent` basandose en tu descripcion.
|
||||
|
||||
### 2.2 Deja que la IA produzca en lote datos "realistas"
|
||||
|
||||
Con la estructura de datos lista, el siguiente paso es hacer que la IA te ayude a "rellenar los huecos" y generar un conjunto de datos que parezcan reales.
|
||||
|
||||
**Tecnicas de prompt:**
|
||||
No puedes simplemente decirle a la IA "generame datos"; necesitas, como si le asignaras una tarea a un pasante, decirle el **contexto de negocio** y los **requisitos de contenido**:
|
||||
|
||||
- **Contexto de negocio**: dile a la IA que hacemos "e-commerce para TikTok", asi que los titulos de productos deben ser llamativos (por ejemplo "el arma secreta para verse mas delgado/a", "imprescindible para estudiantes"), y los textos deben ser coloquiales.
|
||||
- **Requisitos de imagen**: para que el prototipo se vea bien, las imagenes no deben ser marcadores de posicion en blanco y negro; es mejor usar imagenes aleatorias coloridas de paisajes u objetos reales.
|
||||
|
||||
> **Ejemplo de prompt:**
|
||||
> "Basandote en la estructura disenada anteriormente, generame 10 datos de simulacion realistas.
|
||||
> (Nota: no necesariamente en formato JSON. Si estas escribiendo frontend, puedes hacer que genere directamente un array JavaScript; si usas Python, puedes hacer que genere una List.)
|
||||
>
|
||||
> **Requisitos del escenario de negocio**:
|
||||
>
|
||||
> 1. Supongamos que esta es una tienda departamental general, con productos en las categorias de 'moda femenina', 'tecnologia' y 'cosmetica'.
|
||||
> 2. **Los titulos y textos generados deben ser muy 'estilo TikTok'**: por ejemplo, los titulos deben incluir emojis (, ), y los textos deben usar un tono como 'increible', 'probado y comprobado'.
|
||||
> 3. **Campo de imagen**: usa uniformemente el formato `https://picsum.photos/seed/{random_id}/300/400`, asegurando que cada imagen sea diferente."
|
||||
|
||||
**Ejemplo de Mock Data generado:**
|
||||
|
||||
```javascript
|
||||
export const mockProductTasks = [
|
||||
{
|
||||
id: 'task_001',
|
||||
name: 'Vestido retro floral frances de verano',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Moda femenina',
|
||||
features: ['cintura ajustada', 'efecto adelgazante', 'elegante'],
|
||||
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: ' Quien se lo ponga se vera genial! Este vestido floral frances es realmente increible ',
|
||||
generatedCopy:
|
||||
' Chicas! Este vestido realmente estiliza muchisimo! El diseno de cintura ajustada es increible, te da forma al instante. La tela es muy transpirable, no sofoca en verano. Primera opcion para citas y paseos!',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-20T10:00:00Z'
|
||||
},
|
||||
{
|
||||
id: 'task_002',
|
||||
name: 'Auriculares Bluetooth Pro con cancelacion de ruido superpotente',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Tecnologia',
|
||||
features: ['cancelacion de ruido', 'bateria extralarga', 'baja latencia'],
|
||||
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: ' Finalmente los encontre! La cancelacion de ruido de estos auriculares es brutal! ',
|
||||
generatedCopy:
|
||||
'Ponetelos y el mundo se silencia al instante. Calidad de sonido increible, escuchar musica es como estar en vivo. La bateria tambien es impresionante, una carga dura una semana! Imprescindible para estudiantes!',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-21T14:30:00Z'
|
||||
}
|
||||
// ... mas datos
|
||||
]
|
||||
```
|
||||
|
||||
### 2.3 (Avanzado) Usar LocalStorage para implementar "falsas operaciones CRUD"
|
||||
|
||||
Si deseas que los "datos de simulacion" generados no solo se puedan ver, sino que tambien se puedan eliminar y modificar, e incluso que las tareas recien generadas persistan despues de actualizar la pagina, puedes combinarlo con `LocalStorage`.
|
||||
|
||||
> **Ejemplo de prompt:**
|
||||
> "Por favor ayudame a implementar una funcion de almacenamiento de datos.
|
||||
>
|
||||
> 1. Lee primero los datos desde `localStorage`.
|
||||
> 2. Si `localStorage` esta vacio, inicializa con los datos Mock generados anteriormente y guardalos en `localStorage`.
|
||||
> 3. Al mismo tiempo ayudame a escribir las funciones `addProductTask` y `deleteProductTask`, que deben sincronizar los cambios con `localStorage` en cada operacion."
|
||||
|
||||
Con este paso, tu prototipo tendra "memoria", y la experiencia del usuario sera practicamente identica a la de un producto real.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
|
||||
{ title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
|
||||
{ title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
|
||||
{ title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Recopilar retroalimentacion e iterar rapidamente
|
||||
|
||||
No se pueden hacer buenos productos a puerta cerrada. Ahora tu prototipo ya tiene "funcionalidad central" + "flujo completo" + "datos de demostracion"; es hora de mostrarselo a otros.
|
||||
|
||||
### 3.1 Con quien probar? Como probar?
|
||||
|
||||
- **Busca amigos/colegas**: no necesitan entender de tecnologia, solo necesitan intentar usarlo.
|
||||
- **Observa en lugar de guiar**: no digas "haz clic aqui", sino mira adonde hacen clic ellos. Si no encuentran un boton, es que el diseno tiene un problema.
|
||||
- **Metodo "Wizard of Oz"**: si tu IA aun no esta bien conectada, puedes modificar manualmente los datos en segundo plano (o en la base de datos) para simular la respuesta de la IA, verificando primero si el usuario realmente necesita esta funcionalidad.
|
||||
|
||||
### 3.2 Ante bugs y criticas
|
||||
|
||||
- **Estilos desordenados**: pueden desordenarse en diferentes tamanos de pantalla.
|
||||
- **Accion**: haz una captura de pantalla y enviala al AI IDE -> "En este ancho de pantalla esta desordenado, ayudame a arreglarlo."
|
||||
- **Operacion incomoda**: "Este flujo es demasiado complicado".
|
||||
- **Accion**: dile la sugerencia al AI IDE -> "El usuario cree que subir primero y luego generar es muy lento, se puede cambiar a generacion con un solo clic?"
|
||||
- **Nuevas necesidades**: "Si tuviera esta funcionalidad seria genial".
|
||||
- **Accion**: evalua si es esencial; si lo es, haz que la IA implemente rapidamente una version simplificada.
|
||||
|
||||
**Recuerda: en esta etapa, la IA es tu mejor asistente de modificaciones. Tu solo necesitas encargarte de descubrir los problemas; las modificaciones de codigo dejaselas a ella.**
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
|
||||
{ title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
|
||||
{ title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
|
||||
{ title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 4. Proyecto final de la etapa: completa tu "proyecto de graduacion"
|
||||
|
||||
Felicidades! Has completado todo el proceso desde los "requisitos" hasta el "prototipo" y despues la "integracion de IA". Ahora es el momento de mostrar tu resultado final.
|
||||
|
||||
**Este proyecto final no se limita al "espacio de trabajo de materiales de e-commerce".** Necesitas combinar tus propios intereses o experiencia profesional para crear un prototipo de producto IA unico.
|
||||
|
||||
### Seleccion de tema y requisitos
|
||||
|
||||
Necesitas elegir el escenario mas cercano de la **[referencia de escenarios por categoria de industria](../appendix-industry-scenarios/index.md)**, o concebir un escenario completamente nuevo basandote en tus propias ideas.
|
||||
|
||||
**El proyecto debe utilizar de manera integral todo lo aprendido en las lecciones anteriores:**
|
||||
|
||||
1. **Construccion del prototipo**: usa tecnologia frontend para construir una interfaz bonita y facil de usar.
|
||||
2. **Control de requisitos**: no busques algo exhaustivo, pero si que la funcionalidad central forme un ciclo logico cerrado.
|
||||
3. **Integracion de API**: integra modelos de IA reales (LLM/VLM, etc.), dotando a la aplicacion de verdadera inteligencia.
|
||||
4. **Implementar una aplicacion funcional**: no solo paginas estaticas, sino una aplicacion dinamica con flujo de datos y retroalimentacion interactiva.
|
||||
|
||||
### Entregables
|
||||
|
||||
Al final necesitas entregar los dos siguientes elementos:
|
||||
|
||||
1. **Una aplicacion de prototipo completa**: desplegada en linea o ejecutable localmente, con un flujo de uso completo.
|
||||
2. **Un video de demostracion de 30 segundos**: graba un video presentando brevemente el escenario de tu aplicacion y demostrando la operacion real de la funcionalidad central.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Lista de verificacion del desafio final</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Esta es la ultima batalla del Stage 1. Por favor revisa tu proyecto segun la siguiente lista:
|
||||
</p>
|
||||
|
||||
<div style="font-weight: bold; margin-bottom: 10px;">Autoverificacion de funcionalidad central</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Escenario claro</strong>: has seleccionado una industria o escenario de aplicacion concreto</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Ciclo logico cerrado</strong>: el flujo central funciona, no solo el Happy Path</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Impulsado por IA</strong>: se ha llamado realmente a la API de un modelo grande, no respuestas predefinidas</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Experiencia completa</strong>: incluye Loading, manejo de errores y datos de simulacion</label></li>
|
||||
</ul>
|
||||
|
||||
<div style="font-weight: bold; margin: 20px 0 10px;">Preparacion de entregables</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Aplicacion de prototipo</strong>: el codigo esta completo y puede ejecutarse</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Video de demostracion</strong>: unos 30 segundos, mostrando claramente los puntos destacados centrales</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Proximo paso
|
||||
|
||||
Despues de completar el proyecto final, ya tienes la capacidad de "desarrollar independientemente un prototipo de aplicacion IA".
|
||||
En el siguiente Stage 2, profundizaremos en el desarrollo fullstack mas complejo, aprendiendo como convertir este prototipo en una aplicacion de nivel comercial que realmente pueda ponerse en linea, con base de datos y sistema de usuarios.
|
||||
|
||||
Nos vemos en la siguiente etapa!
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Sigue avanzando"
|
||||
description="Felicidades por completar el Stage 1. Estos capitulos pueden ayudarte a entrar en el desarrollo de ingenieria."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
title: 'Encontrar buenas ideas - De las necesidades de los usuarios a quienes estan dispuestos a pagar'
|
||||
description: 'Aprende a descubrir oportunidades a partir de dolores cotidianos, evaluar si alguien pagara y convertir una idea en un concepto de producto ejecutable.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aprox. <strong>3 horas</strong>'
|
||||
</script>
|
||||
|
||||
# Principiante 2: Encontrar buenas ideas
|
||||
|
||||
## Introduccion del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Descubrimiento de necesidades', 'Pensamiento de producto', 'Analisis de usuarios', 'Modelo de negocio']" coreOutput="3 conceptos de producto validados" expectedOutput="Una direccion de emprendimiento/producto ejecutable">
|
||||
|
||||
Ya aprendiste a construir con un AI IDE, pero la pregunta mas importante es: <strong>que construir?</strong>
|
||||
|
||||
Mucha gente empieza con "hagamos una herramienta de IA" o "montemos una plataforma social" y termina con algo que nadie usa. El motivo mas comun es simple: <strong>no habia una necesidad real</strong>.
|
||||
|
||||
Incluso si el producto resuelve algo, todavia queda la parte dificil: <strong>que el usuario pague</strong>.
|
||||
|
||||
En este capitulo, a traves de un caso y un conjunto de marcos practicos, aprenderas un metodo para encontrar ideas y convertirlas en conceptos validables.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Step 1', description: 'Definir criterios' },
|
||||
{ title: 'Step 2', description: 'Encontrar dolores cotidianos' },
|
||||
{ title: 'Step 3', description: 'Segmentar audiencias' },
|
||||
{ title: 'Step 4', description: 'Profundizar escenarios' },
|
||||
{ title: 'Step 5', description: 'Validar si es real' },
|
||||
{ title: 'Step 6', description: 'Pulir el concepto' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Step 1: Definir criterios (cuando paga la gente?)
|
||||
|
||||
Un error tipico es evaluar ideas por "me gusta" o "suena bien". Lo que buscamos es <strong>voluntad de pago</strong>.
|
||||
|
||||
Usa este checklist:
|
||||
|
||||
1. Dolor fuerte: frecuente, caro, riesgoso o estresante.
|
||||
2. Usuario claro: puedes describir quien es en una frase.
|
||||
3. Escenario concreto: cuando y donde ocurre el problema.
|
||||
4. Alternativas malas: hoy se resuelve con friccion o con soluciones incompletas.
|
||||
5. Beneficio medible: ahorra tiempo/dinero, reduce riesgo o aumenta ingresos.
|
||||
|
||||
::: warning Importante
|
||||
No preguntes "Usarias esto?" Esa pregunta produce falsos positivos.
|
||||
Pregunta por comportamiento real: "Como lo resuelves hoy?", "Cuantas veces te paso esta semana?", "Cuanto te costo en tiempo o dinero?"
|
||||
:::
|
||||
|
||||
## Step 2: Encontrar dolores cotidianos
|
||||
|
||||
Las mejores ideas vienen de problemas repetidos.
|
||||
|
||||
Fuentes practicas:
|
||||
|
||||
- Tu trabajo: reportes, coordinacion, aprobaciones, QA, despliegues.
|
||||
- Tu vida: salud, finanzas, estudio, viajes, familia.
|
||||
- Nichos: industria con regulacion, facturacion, soporte, operaciones.
|
||||
|
||||
Ejercicio rapido:
|
||||
|
||||
1. Escribe 20 molestias reales que hayas visto en el ultimo mes.
|
||||
2. Elige 5 que ocurran semanalmente.
|
||||
3. Para cada una, anota quien lo sufre y que alternativa usa hoy.
|
||||
|
||||
## Step 3: Segmentar audiencias (horizontal)
|
||||
|
||||
Un mismo problema tiene distinta voluntad de pago segun la persona.
|
||||
|
||||
Ejemplo: "organizar archivos" no paga casi nadie; pero "organizar documentos para auditoria" lo paga una empresa.
|
||||
|
||||
Hazlo asi:
|
||||
|
||||
1. Lista 3-5 grupos posibles de usuarios.
|
||||
2. Para cada grupo, define: objetivo, contexto, restricciones, presupuesto.
|
||||
3. Elige 1 grupo donde el dolor sea mas caro o mas urgente.
|
||||
|
||||
## Step 4: Profundizar escenarios (vertical)
|
||||
|
||||
No disenes "una app". Disena <strong>un flujo</strong> que resuelva un escenario completo.
|
||||
|
||||
Plantilla:
|
||||
|
||||
- Disparador: que pasa para que el usuario necesite la solucion?
|
||||
- Pasos actuales: que hace hoy (y que le molesta)?
|
||||
- Momento de valor: en que minuto entiende que le ahorraste algo?
|
||||
- Resultado: que cambia al final?
|
||||
|
||||
## Step 5: Validar si es real (antes de construir)
|
||||
|
||||
Objetivo: validar 2 cosas.
|
||||
|
||||
1. Existe el problema (frecuencia e impacto).
|
||||
2. Existe voluntad de pago o al menos una accion fuerte (dejar email, reservar, prepagar).
|
||||
|
||||
Metodos de bajo costo:
|
||||
|
||||
- 10 entrevistas con usuarios objetivo (30 min cada una).
|
||||
- Landing simple con propuesta de valor y CTA (lista de espera / reserva).
|
||||
- Demo clickable o prototipo y medir conversion.
|
||||
- Pre-venta o deposito (la validacion mas honesta).
|
||||
|
||||
## Step 6: Pulir el concepto con IA
|
||||
|
||||
Aqui la IA ayuda a convertir una intuicion en un concepto ejecutable.
|
||||
|
||||
Prompt para copiar:
|
||||
|
||||
```text
|
||||
Actua como consultor de producto. Quiero refinar una idea.
|
||||
1) Usuario objetivo:
|
||||
2) Dolor principal:
|
||||
3) Escenario concreto (cuando/donde):
|
||||
4) Solucion actual y por que es mala:
|
||||
5) Propuesta de valor en una frase:
|
||||
6) MVP en 7 dias:
|
||||
7) Riesgos/objeciones:
|
||||
8) Plan de validacion y metricas:
|
||||
Devuelveme: (a) concepto pulido, (b) alcance del MVP, (c) plan de validacion en 7 dias.
|
||||
```
|
||||
|
||||
## Salida esperada: 3 conceptos de producto
|
||||
|
||||
Al final, deberias tener 3 conceptos, cada uno con:
|
||||
|
||||
- Usuario objetivo claro
|
||||
- Problema concreto
|
||||
- Propuesta de valor en una frase
|
||||
- MVP (1-2 semanas)
|
||||
- Experimento de validacion y metricas
|
||||
|
||||
<RelatedArticlesSection />
|
||||
|
||||
@@ -0,0 +1,808 @@
|
||||
---
|
||||
title: 'Anadiendo capacidades de IA al prototipo - Integracion de APIs de texto e imagen'
|
||||
description: 'Integra capacidades reales de IA en tu prototipo web: comprende los conceptos centrales de API, aprende a encontrar API Keys y ejemplos oficiales.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'aprox. <strong>1 dia</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['zh-cn/stage-1/integrating-ai-capabilities'] ?? []
|
||||
</script>
|
||||
|
||||
# Nivel inicial 4: Incorporar capacidades de IA al prototipo
|
||||
|
||||
## Introduccion del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['API', 'Modelo de texto', 'Generacion de imagenes', 'Integracion de prototipo']" coreOutput="Conectar el prototipo con 1 modelo de texto + 1 modelo de imagen opcional" expectedOutput="Un prototipo de IA que puede llamar APIs reales">
|
||||
|
||||
En los capitulos anteriores completamos el flujo completo desde <strong>encontrar una buena idea</strong> hasta <strong>crear un prototipo de producto</strong>. Pero por ahora el prototipo sigue siendo solo una "carcasa": al hacer clic en los botones no se genera contenido real y los datos de la pagina estan escritos de forma fija.
|
||||
|
||||
Recuerda lo que enfatizamos en el primer capitulo: <strong>queremos crear "productos por los que alguien estaria dispuesto a pagar", no "prototipos que solo parecen decentes".</strong> El valor real viene de que el producto pueda <strong>resolver problemas reales</strong>, y para lograrlo el prototipo debe <strong>funcionar de verdad</strong>.
|
||||
|
||||
Este capitulo hara que el prototipo <strong>"cobre vida"</strong>: conectaremos <strong>capacidades reales de IA</strong>, desde obtener una API Key hasta leer la documentacion oficial y pedir al AI IDE que integre la interfaz en el codigo. Usaremos el <strong>modelo de texto DeepSeek</strong> como ejemplo para aprender como hacer que una aplicacion <strong>llame de verdad a un modelo grande para generar contenido</strong>; si te interesa, tambien puedes hacer de forma opcional la <strong>integracion de generacion de imagenes</strong>.
|
||||
|
||||
Al terminar este capitulo, tu prototipo <strong>dejara de ser una demo estatica</strong> y se convertira en <strong>una aplicacion capaz de llamar capacidades reales de IA y resolver problemas reales</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Bases de API', description: 'Comprender conceptos clave y normas de seguridad' },
|
||||
{ title: 'Conectar texto', description: 'Practica de generacion de texto con DeepSeek' },
|
||||
{ title: 'Conectar imagenes', description: 'Comprension y generacion de imagenes con VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 1. Conceptos basicos de API
|
||||
|
||||
Como mencionamos antes, nuestro objetivo es "conectar capacidades de IA" para que el prototipo deje de ser una demo estatica y se convierta en una herramienta capaz de llamar servicios reales de IA. La clave para lograrlo es entender y usar APIs.
|
||||
|
||||
API es un concepto abstracto importante en informatica. Podemos entenderlo de forma simple asi: **envias una pregunta en el formato que la otra parte exige, y la otra parte devuelve un resultado en un formato acordado**.
|
||||
|
||||
- **Lo que envias**: normalmente incluye una "clave (API Key)" y "lo que quieres generar"
|
||||
- **Lo que recibes**: si todo sale bien, devuelve el resultado; si falla, indica la causa, por ejemplo "clave incorrecta", "saldo insuficiente" o "parametro mal escrito"
|
||||
|
||||
En concreto, necesitas dominar estos elementos centrales:
|
||||
|
||||
1. **API Key**: tu "pase de acceso" y tambien la "llave de tu cartera". Si otra persona la obtiene, puede llamar la API en tu nombre y generar costes.
|
||||
2. **Endpoint (ruta de interfaz)**: la ruta concreta de una solicitud API, que indica al servidor que funcion quieres usar. La direccion completa suele componerse de "URL base + endpoint". Por ejemplo:
|
||||
- Generacion de texto: URL base (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = URL completa `https://api.service.com/v1/chat/completions`
|
||||
- Generacion de imagenes: URL base (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = URL completa `https://api.service.com/v1/images/generations`
|
||||
3. **Llamada/solicitud**: el proceso de enviar una tarea a un servicio de IA y obtener el resultado.
|
||||
4. **Contenido de la solicitud**: el contenido concreto que envias a la IA, por ejemplo el tema del articulo que quieres que escriba o la descripcion de la imagen que quieres generar.
|
||||
5. **Resultado de respuesta**: lo que la IA devuelve tras procesar la solicitud, por ejemplo un articulo o una imagen generada.
|
||||
6. **Manejo de errores**: saber diagnosticar y resolver problemas como API Key incorrecta o demasiadas solicitudes.
|
||||
|
||||
::: info ℹ️ Que es una API
|
||||
Para una explicacion mas profunda de API, consulta el apendice: [Introduccion a API](/es-es/appendix/4-server-and-backend/api-intro).
|
||||
|
||||
::: warning 🔐 **Notas de seguridad sobre API**
|
||||
La API Key es tu "pase de acceso" para solicitar servicios de IA. Es una cadena secreta usada para autenticacion y facturacion.
|
||||
|
||||
Como la API Key esta directamente vinculada a tu cuenta y costes, presta especial atencion:
|
||||
|
||||
- Nunca la **compartas en chats grupales, subas capturas a internet** ni la publiques en foros abiertos.
|
||||
- **No la hardcodees en el codigo** ni la subas a un repositorio Git, especialmente si es publico.
|
||||
- Si sospechas que la clave se filtro, **reemplazala de inmediato**.
|
||||
|
||||
En los siguientes pasos **pegaremos directamente la API KEY en el AI IDE para practicar**. **No hagas esto en un proyecto formal.** Aqui lo hacemos solo porque es un ejercicio. Cuando tengas mas soltura, puedes pedir a la IA que genere un archivo de configuracion y poner la API KEY alli.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Bases de API', description: 'Comprender conceptos clave y normas de seguridad' },
|
||||
{ title: 'Conectar texto', description: 'Practica de generacion de texto con DeepSeek' },
|
||||
{ title: 'Conectar imagenes', description: 'Comprension y generacion de imagenes con VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 2. Conectar una API de generacion de texto: DeepSeek
|
||||
|
||||
Aunque API implica estos conceptos tecnicos, en la etapa de prototipado la operacion real puede ser muy simple y eficiente. La idea central es:
|
||||
|
||||
> **Encontrar el ejemplo oficial, obtener la API Key y pedir al AI IDE que la conecte al boton.**
|
||||
|
||||
Cuando entiendas estos conceptos, veras que conectar un modelo de texto o un modelo de imagen sigue esencialmente el mismo flujo: cuando el usuario hace clic en un boton, el frontend organiza la entrada y envia una solicitud; cuando la interfaz devuelve el resultado, lo muestra en la pagina. A continuacion lo comprobaremos con una practica real.
|
||||
|
||||
En `1.2 Crear un prototipo con tus manos`, ya construiste un prototipo interactivo. Ahora vamos a convertir las funciones que "parecen IA" en capacidades realmente utilizables: **cuando el usuario haga clic en un boton, el prototipo enviara una solicitud a un servicio externo de IA y mostrara el texto devuelto.**
|
||||
|
||||
::: info ℹ️ Ampliacion conceptual
|
||||
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos de lenguaje grandes (LLM)](/es-es/appendix/8-artificial-intelligence/llm-principles).
|
||||
::: details Saber mas: que es DeepSeek
|
||||
|
||||
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, que opera bajo la marca DeepSeek, es una **empresa china de inteligencia artificial dedicada al desarrollo de modelos de lenguaje grandes (LLMs)**. DeepSeek tiene sede en Hangzhou, Zhejiang, y pertenece al fondo cuantitativo chino High-Flyer, que tambien la financia. Fue fundada en julio de 2023 por Liang Wenfeng, cofundador de High-Flyer, quien tambien es CEO de ambas companias. En enero de 2025 lanzo su chatbot homonimo y el modelo DeepSeek-R1.
|
||||
|
||||
Veamos como se compara DeepSeek con otros modelos lideres en el benchmark GPQA. Cabe destacar que DeepSeek es un modelo open source, es decir, cualquiera puede descargarlo desde internet, mientras que otros modelos comunes como Grok, Google Gemini y ChatGPT son cerrados. Como se puede observar, DeepSeek ya se acerca bastante al primer grupo de modelos.
|
||||
|
||||
|
||||
|
||||
GPQA significa "Graduate-Level Google-Proof Q&A Benchmark". Es un benchmark de nivel posgrado para tareas de preguntas y respuestas cientificas. A continuacion va una explicacion mas detallada.
|
||||
|
||||
GPQA contiene 448 preguntas de opcion multiple que cubren subcampos de biologia, fisica y quimica, como mecanica cuantica, quimica organica y biologia molecular. Las preguntas fueron redactadas por 61 expertos con doctorado o en proceso de doctorado y pasaron por un proceso estricto de verificacion.
|
||||
:::
|
||||
|
||||
Con estos 3 pasos puedes integrar rapidamente una API de generacion con modelo grande:
|
||||
|
||||
1. **Crear una API Key en la plataforma de DeepSeek**
|
||||
2. **Encontrar el ejemplo de generacion de texto en la documentacion de DeepSeek** (normalmente hay codigo listo para copiar)
|
||||
3. **Abrir el AI IDE, pegar la API Key + el ejemplo oficial** y decirle a la IA que funcion debe implementar:
|
||||
> Ayudame a conectar esta API del modelo grande para soportar la tarea de generacion de copy en esta aplicacion
|
||||
|
||||
A continuacion haremos una demostracion. Puedes seguir el flujo completo paso a paso. Primero registra una cuenta en [DeepSeek](https://platform.deepseek.com/usage), crea una API Key y recarga una pequena cantidad para verificar la llamada.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Haz clic en "API KEYS" y busca "create new API key" en la parte inferior de la pantalla. Al final obtendras una API key parecida a `sk-8573341c39fc44315aadc071c53rh7d2`.
|
||||
|
||||
|
||||
|
||||
Una vez obtenida la clave, ya tienes permiso para llamar al modelo.
|
||||
|
||||
En este punto puedes leer directamente la documentacion de [API](https://api-docs.deepseek.com/), que normalmente ofrece ejemplos de llamada con curl o Python.
|
||||
|
||||
|
||||
|
||||
Despues de encontrar el ejemplo, puedes copiar el contenido de la documentacion y la clave en el cuadro de dialogo del AI IDE, y pedirle que integre el modelo grande en el prototipo que ya desarrollaste.
|
||||
|
||||
|
||||
|
||||
Puedes usar como referencia este prompt:
|
||||
|
||||
```
|
||||
Toma como referencia este metodo de llamada y ayudame a soportar una funcion de generacion de copy. Debe poder generar copy de ecommerce para Douyin/TikTok a partir de la informacion del producto al hacer clic, con varios estilos.
|
||||
|
||||
Material de referencia:
|
||||
api key：sk-8573341c39aefa1efe
|
||||
Referencia de solicitud API:
|
||||
curl \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
|
||||
-d '{
|
||||
"model": "deepseek-chat",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
Tras un rato de generacion de codigo por parte de la IA, normalmente obtendremos facilmente un boton de generacion de copy para probar. Si no encuentras la entrada, puedes pedir al AI IDE que te indique desde que pagina se accede; si aun asi no la encuentras, puedes pedirle que refactorice y mejore directamente segun tu idea hasta obtener el resultado final de generacion de copy.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Puede que aqui te preguntes: como se si realmente esta llamando al modelo grande y no solo usando respuestas fijas integradas? Puedes introducir un copy personalizado y pedir al modelo que genere el resultado segun el analisis personalizado que acabas de especificar.
|
||||
|
||||
Si ves que cada resultado es diferente y logicamente coherente, puedes considerar que la API ya se esta llamando correctamente. Tambien puedes revisar en la [plataforma de gestion de uso de API](https://platform.deepseek.com/usage) si la llamada fue exitosa, aunque puede tardar unos minutos en aparecer.
|
||||
|
||||
## Mas opciones de modelos de generacion de texto
|
||||
|
||||
Ademas de DeepSeek, tambien puedes probar otros modelos de lenguaje grandes. Como la mayoria ofrece **interfaces compatibles con OpenAI**, cambiar de modelo es muy sencillo: solo necesitas sustituir la API Key, la URL base y el nombre del modelo.
|
||||
|
||||
### Integracion de MiniMax
|
||||
|
||||
::: details Saber mas: que es MiniMax
|
||||
|
||||
**MiniMax** es una empresa china de inteligencia artificial dedicada a la investigacion y desarrollo de tecnologias de inteligencia artificial general. MiniMax lanzo su propia serie de modelos de lenguaje grandes MiniMax-M2.7, que ha mostrado buen rendimiento en varios benchmarks y ofrece una relacion coste-rendimiento muy alta.
|
||||
|
||||
**Principales caracteristicas de la serie MiniMax-M2.7:**
|
||||
|
||||
- **Contexto ultralargo**: soporta una ventana de contexto de 204,800 tokens, adecuada para documentos largos y conversaciones de multiples turnos.
|
||||
- **Alta relacion coste-rendimiento**: precio muy competitivo.
|
||||
- **Interfaz compatible con OpenAI**: se puede llamar directamente con el OpenAI SDK sin aprender un nuevo formato de API.
|
||||
- **Dos modelos disponibles**:
|
||||
- `MiniMax-M2.7`: modelo insignia, adecuado para tareas complejas.
|
||||
- `MiniMax-M2.7-highspeed`: version de alta velocidad, con rendimiento similar pero mas rapida.
|
||||
:::
|
||||
|
||||
La forma de integrarlo es igual que DeepSeek y solo requiere tres pasos:
|
||||
|
||||
1. Ir a la [plataforma abierta de MiniMax](https://platform.minimax.io/), registrar una cuenta y crear una API Key.
|
||||
2. Encontrar un ejemplo de llamada en la documentacion de MiniMax.
|
||||
3. Pegar la API Key + el ejemplo en el AI IDE.
|
||||
|
||||
Como MiniMax ofrece una interfaz compatible con OpenAI, puedes copiar directamente el siguiente ejemplo curl junto con tu API Key y enviarlo al AI IDE para integrarlo:
|
||||
|
||||
```bash
|
||||
curl https://api.minimax.io/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${MINIMAX_API_KEY}" \
|
||||
-d '{
|
||||
"model": "MiniMax-M2.7",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
::: tip ✅ Consejo
|
||||
El formato de API de MiniMax es casi identico al de DeepSeek, ya que ambos son compatibles con OpenAI. Si ya integraste DeepSeek correctamente, cambiar a MiniMax solo requiere modificar tres lugares:
|
||||
1. **URL base**: cambiarla a `https://api.minimax.io/v1`
|
||||
2. **API Key**: usar la API Key de MiniMax
|
||||
3. **Nombre del modelo**: cambiarlo a `MiniMax-M2.7` o `MiniMax-M2.7-highspeed`
|
||||
|
||||
Para mas informacion, consulta la [documentacion de la interfaz compatible con OpenAI de MiniMax](https://platform.minimax.io/docs/api-reference/text-openai-api).
|
||||
:::
|
||||
|
||||
# 3. Conectar una API de imagen a texto: Qwen3 VL
|
||||
|
||||
::: info ℹ️ Ampliacion conceptual
|
||||
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos vision-lenguaje (VLM)](/es-es/appendix/8-artificial-intelligence/multimodal-models).
|
||||
|
||||
::: details Saber mas: que es Qwen3 VL
|
||||
|
||||
**Qwen3 VL** es la version mas reciente de la serie de modelos multimodales vision-lenguaje lanzada por el equipo Tongyi Qianwen de Alibaba Cloud. VL significa "Vision-Language", es decir, modelo vision-lenguaje. Puede entender el contenido de una imagen, generar descripciones textuales a partir de imagenes, responder preguntas sobre imagenes y extraer informacion visual.
|
||||
|
||||
|
||||
|
||||
|
||||
**Las principales capacidades de Qwen3 VL incluyen:**
|
||||
|
||||
- **Comprension de imagenes**: identifica objetos, escenas, personas, texto y otros contenidos dentro de una imagen.
|
||||
- **Preguntas y respuestas visuales**: responde con precision preguntas del usuario sobre una imagen.
|
||||
- **Descripcion de imagenes**: genera descripciones textuales detalladas o concisas.
|
||||
- **Comprension de multiples imagenes**: permite procesar varias imagenes a la vez para compararlas.
|
||||
- **Extraccion de texto**: extrae texto de imagenes mediante capacidades OCR.
|
||||
|
||||
**Por que elegir Qwen3 VL?**
|
||||
|
||||
Comparado con la generacion anterior, Qwen3 VL mejora de forma notable la precision de comprension de imagenes y soporta tareas de analisis visual mas largas y complejas. Tiene buen rendimiento en comprension de chino, costes de API relativamente bajos y una buena relacion coste-rendimiento. Ademas, su ventana de contexto es mayor y puede manejar tareas de razonamiento visual mas complejas.
|
||||
|
||||
**Escenarios de uso tipicos:**
|
||||
|
||||
- Ecommerce: generar automaticamente titulos, descripciones y puntos de venta a partir de imagenes de producto.
|
||||
- Creacion de contenido: generar copy o sugerencias visuales a partir de imagenes de material.
|
||||
- Oficina: extraer contenido de imagenes y reconocer informes automaticamente.
|
||||
- Educacion: analizar automaticamente preguntas en imagenes y extraer puntos de conocimiento.
|
||||
|
||||
:::
|
||||
|
||||
En la seccion anterior explicamos como conectar una API de generacion de texto. Pero en nuestros escenarios anteriores aparece un problema: subimos una imagen, y si usamos solo un modelo de lenguaje, no puede entender bien el contenido visual, por lo que el resultado generado puede desviarse bastante.
|
||||
|
||||
Queremos un modelo que nos ayude a convertir una imagen en descripcion textual. Para eso necesitamos un modelo vision-lenguaje (VLM). En este caso, usaremos un VLM para generar descripciones de puntos de venta del producto y mejorar la experiencia de usuario.
|
||||
|
||||
Para simplificar, usaremos la API ofrecida por la [plataforma cloud SiliconFlow](https://cloud.siliconflow.cn/me) para conectar una API de imagen a texto.
|
||||
|
||||
::: details Saber mas: que es SiliconFlow
|
||||
**SiliconFlow** es una conocida plataforma china de agregacion de modelos de IA que ofrece servicios API para multiples modelos de lenguaje grandes y modelos vision-lenguaje populares.
|
||||
|
||||
**Caracteristicas de la plataforma:**
|
||||
|
||||
- **Soporte multimodelo**: integra multiples modelos de IA populares, incluidos modelos open source como DeepSeek, Qwen y la serie Llama.
|
||||
- **Optimizacion tecnica**: optimiza la inferencia de modelos open source y ofrece servicios API de baja latencia y alta concurrencia.
|
||||
- **Compatibilidad de interfaz**: ofrece APIs compatibles con el formato OpenAI, facilitando la integracion en aplicaciones existentes.
|
||||
- **Pago bajo demanda**: permite facturacion por volumen de llamadas.
|
||||
|
||||
SiliconFlow esta relativamente maduro en servicios de inferencia para modelos open source y es una opcion comun para usar modelos chinos open source de IA.
|
||||
:::
|
||||
|
||||
Al entrar en la pagina principal de SiliconFlow, veras muchos modelos disponibles. Busca el filtro en la esquina superior izquierda, abrelo y selecciona la etiqueta de vision. Alli veras muchos modelos de imagen a texto, por ejemplo GLM-4.6V de Zhipu o Qwen3-VL.
|
||||
|
||||
|
||||
|
||||
Puedes elegir cualquiera para probar. Aqui usaremos `Qwen/Qwen3-VL-8B-Instruct` como ejemplo.
|
||||
|
||||
|
||||
|
||||
Entra en la [plataforma SiliconFlow](https://cloud.siliconflow.cn/me/account/ak), haz clic en "Crear nueva API Key" dentro de la seccion de claves API y crea una nueva API Key.
|
||||
|
||||
Puedes usar directamente el siguiente codigo como referencia y enviarlo junto con la API Key generada al AI IDE para integrar la funcion.
|
||||
|
||||
::: details Codigo de referencia de imagen a texto
|
||||
|
||||
```python
|
||||
from openai import OpenAI
|
||||
from typing import Dict, Any, List
|
||||
import base64
|
||||
import os
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
|
||||
MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
|
||||
|
||||
def encode_image(image_path: str) -> str:
|
||||
with open(image_path, "rb") as image_file:
|
||||
return base64.b64encode(image_file.read()).decode('utf-8')
|
||||
|
||||
def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL_NAME,
|
||||
messages=messages,
|
||||
max_tokens=512,
|
||||
temperature=0.7,
|
||||
top_p=0.7,
|
||||
frequency_penalty=0.5,
|
||||
stream=False,
|
||||
n=1
|
||||
)
|
||||
return response.choices[0].message.content
|
||||
|
||||
def caption_image(image_path: str) -> str:
|
||||
base64_image = encode_image(image_path)
|
||||
messages = [
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Please describe this image in detail."
|
||||
},
|
||||
{
|
||||
"type": "image_url",
|
||||
"image_url": {
|
||||
"url": f"data:image/jpeg;base64,{base64_image}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
client = OpenAI(
|
||||
api_key=SILICONFLOW_API_KEY,
|
||||
base_url=SILICONFLOW_BASE_URL
|
||||
)
|
||||
|
||||
return get_vlm_completion(client, messages)
|
||||
|
||||
image_path = "images.jpg"
|
||||
caption = caption_image(image_path)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
En este escenario, probamos directamente pedir al AI IDE que implemente una funcion para generar automaticamente texto de puntos de venta ecommerce y palabras clave a partir de una imagen subida, como se muestra a continuacion:
|
||||
|
||||
```
|
||||
Basandote en la siguiente API de imagen a texto, ayudanos a implementar una funcion que genere automaticamente texto de puntos de venta ecommerce y palabras clave a partir de imagenes subidas.
|
||||
|
||||
<Codigo omitido aqui; debes pegar por tu cuenta la clave y el codigo de referencia>
|
||||
```
|
||||
|
||||
Finalmente se obtiene el resultado generado:
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Bases de API', description: 'Comprender conceptos clave y normas de seguridad' },
|
||||
{ title: 'Conectar texto', description: 'Practica de generacion de texto con DeepSeek' },
|
||||
{ title: 'Conectar imagenes', description: 'Comprension y generacion de imagenes con VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 4. Conectar una API de generacion de imagenes: Seedream
|
||||
|
||||
En las secciones anteriores trabajamos principalmente con tareas relacionadas con texto. Ahora intentaremos conectar capacidades de generacion de imagenes, para soportar generar imagenes desde descripciones de texto o modificar imagenes existentes.
|
||||
|
||||
::: info ℹ️ Ampliacion conceptual
|
||||
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a la generacion de imagenes](/es-es/appendix/8-artificial-intelligence/image-generation).
|
||||
|
||||
::: details Saber mas: que es [Seedream](https://seed.bytedance.com/en/seedream4_5)
|
||||
|
||||
|
||||
|
||||
> Tal vez ya conozcas Nano Banana, desarrollado por Google, pero no conviene pasar por alto Seedream. Seedream 4.5 es una nueva generacion de modelo de creacion de imagenes desarrollada por ByteDance. Integra generacion y edicion de imagenes en una arquitectura unificada, lo que le permite manejar de forma flexible tareas multimodales complejas, como generacion basada en conocimiento, razonamiento complejo y consistencia con referencias. Ademas, su velocidad de inferencia es mucho mayor que la generacion anterior y puede generar imagenes HD impresionantes con resolucion de hasta 4K.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
**Capacidades principales:**
|
||||
|
||||
- **Texto a imagen**: genera imagenes a partir de descripciones textuales y soporta varios estilos, como realista, cartoon, tinta china o cyberpunk.
|
||||
- **Transferencia de estilo**: convierte una imagen a un estilo artistico especificado.
|
||||
- **Variantes de imagen**: genera nuevas imagenes de estilo similar basadas en una referencia.
|
||||
- **Mejora de resolucion**: aumenta claridad y detalles.
|
||||
- **Edicion de imagenes**: edita y modifica imagenes existentes mediante instrucciones en lenguaje natural.
|
||||
|
||||
**Por que elegir Seedream?**
|
||||
|
||||
- **Red estable en China**: acceso rapido y baja latencia dentro de China.
|
||||
- **Buenos resultados**: rendimiento estable y fiable en ecommerce y escenarios de material visual.
|
||||
- **Optimizacion para chino**: comprende mejor prompts en chino, adecuado para usuarios locales.
|
||||
- **Rapidez**: alta eficiencia de generacion y tiempos de respuesta cortos.
|
||||
- **Calidad estable**: genera imagenes HD de hasta 4K.
|
||||
|
||||
**Escenarios de uso tipicos:**
|
||||
|
||||
- Ecommerce: generar imagen principal, imagenes para pagina de detalle y posters promocionales.
|
||||
- Redes sociales: generar avatar, stickers e imagenes de apoyo.
|
||||
- Diseno: producir rapidamente conceptos, materiales y fondos.
|
||||
- Marketing: crear anuncios, banners de campana y posters festivos.
|
||||
|
||||
**Combinacion con Qwen3 VL:**
|
||||
|
||||
Estas dos APIs pueden encadenarse: primero usar Qwen3 VL para analizar una imagen de referencia y entender su contenido; luego usar Seedream para generar una nueva imagen basandose en el prompt derivado del analisis.
|
||||
:::
|
||||
|
||||
Muchos "posters de IA / imagenes principales de IA / personajes de IA" que ves en Douyin, Bilibili o YouTube usan esencialmente las tecnologias explicadas en esta seccion. Lo que necesitas hacer es sencillo: convertir la entrada del usuario en una frase, solicitar la API de imagenes y mostrar la imagen devuelta. El modelo usado aqui se llama modelo de generacion/edicion de imagenes.
|
||||
|
||||
Mostraremos paso a paso como integrar la API de Seedream en tu proyecto, con ayuda del AI IDE.
|
||||
|
||||
Tras [visitar la pagina inicial](https://www.volcengine.com/experience/ark?launch=seedream), haz clic en iniciar sesion.
|
||||
|
||||
|
||||
|
||||
Despues de iniciar sesion, busca la opcion de recarga en la esquina superior derecha.
|
||||
|
||||
|
||||
|
||||
Para recargar se requiere verificacion de identidad real.
|
||||
|
||||
|
||||
|
||||
Tras completar la verificacion, puedes [recargar 1 yuan para pruebas](https://console.volcengine.com/finance/fund/recharge).
|
||||
|
||||
Vuelve a la [pantalla inicial](https://www.volcengine.com/experience/ark?launch=seedream) y haz clic en acceso API.
|
||||
|
||||
|
||||
|
||||
Primero crea una API key y luego haz clic en la opcion de seleccion.
|
||||
|
||||
|
||||
|
||||
Esto te llevara al paso 2. Alli debes confirmar que el servicio llamado es Seedream 4.5 y copiar el ejemplo de llamada proporcionado. La captura es antigua, por eso la version del modelo aun aparece como 4.0.
|
||||
|
||||
|
||||
|
||||
Despues de preparar la API Key y el ejemplo de llamada, puedes pegarlos directamente en el AI IDE para que genere una demo de interaccion frontend o integre la capacidad en el prototipo existente. Observa que en la pagina puedes elegir entre texto a imagen o generar una sola imagen a partir de varias imagenes; debes seleccionar el codigo de referencia segun tu necesidad actual.
|
||||
|
||||
::: warning ⚠️ Nota importante
|
||||
El ejemplo por defecto aqui es relativamente complejo. Recuerda desactivar **"agregar marca de agua"** y **"respuesta en streaming"** para evitar marcas de agua y posibles fallos de solicitud.
|
||||
:::
|
||||
|
||||
Como luego usaremos el modo de generacion con imagenes de referencia, primero entramos en la funcion de generar una sola imagen a partir de varias imagenes. El codigo de referencia copiado es:
|
||||
|
||||
```
|
||||
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer xxxxxxx" \
|
||||
-d '{
|
||||
"model": "doubao-seedream-4-5-251128",
|
||||
"prompt": "Sustituye la ropa de la imagen 1 por la ropa de la imagen 2",
|
||||
"image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
|
||||
"sequential_image_generation": "disabled",
|
||||
"response_format": "url",
|
||||
"size": "2K",
|
||||
"stream": false,
|
||||
"watermark": true
|
||||
}'
|
||||
```
|
||||
|
||||
Con el codigo de referencia de imagenes, pedimos al AI IDE que soporte funciones de imagen comunes en ecommerce:
|
||||
|
||||
```
|
||||
Basandote en la siguiente API, ayudame a implementar en este proyecto funciones comunes de ecommerce, por ejemplo generacion de posters o generacion de imagen principal para ecommerce en Douyin/TikTok.
|
||||
|
||||
<Pega aqui la API KEY y el codigo de edicion de imagenes>
|
||||
```
|
||||
|
||||
El resultado implementado queda asi:
|
||||
|
||||
|
||||
|
||||
Vale la pena notar que la generacion de imagenes suele encontrarse con problemas raros. Te recomendamos pedir al AI IDE que muestre el mensaje de error completo para poder copiarlo y corregirlo; de lo contrario, puede repetir "generacion fallida" sin decir por que. Por ejemplo, puedes decir:
|
||||
|
||||
```
|
||||
No muestres solo "fallo la generacion de imagen". Muestra siempre la razon completa del fallo, por ejemplo imagenes no compatibles, error de solicitud, timeout, etc.
|
||||
```
|
||||
|
||||
A veces los cambios no se aplican en la pagina despues de actualizar. Si ves que la pagina sigue mostrando errores una y otra vez tras modificarla, tambien puedes probar a decir directamente al AI IDE: reinicia este proyecto.
|
||||
|
||||
En ecommerce, tal vez queramos que la ropa subida por el usuario se pruebe automaticamente sobre una persona, o generar automaticamente imagenes de venta y posters atractivos para un producto. Aqui probamos un prompt que le pide generar un poster ecommerce:
|
||||
|
||||
|
||||
|
||||
Puedes usar APIs de texto a imagen o imagen a imagen para implementar distintas funciones segun el escenario de negocio que imagines.
|
||||
|
||||
## Mas opciones de servicios de imagen
|
||||
|
||||
A continuacion se ofrecen otras opciones. Te recomendamos primero hacer funcionar la generacion de imagenes con Qwen y luego sustituirla por los siguientes servicios segun resultado y coste, de acuerdo con tu experiencia real.
|
||||
|
||||
### Integracion de Recraft
|
||||
|
||||
Si tu prototipo se orienta mas a "produccion de diseno", por ejemplo generar ilustraciones de estilo de marca, posters de marketing o materiales vectoriales, Recraft suele ser mas comodo. El modo de integracion es identico al de la seccion anterior: **obtener la Key + encontrar el ejemplo oficial + pedir al AI IDE que lleve el ejemplo a tu boton/pagina**.
|
||||
|
||||
::: details Saber mas: que es Recraft
|
||||
|
||||
> Recraft es una herramienta de IA para disenadores, ilustradores y profesionales de marketing. Fue fundada en Estados Unidos en 2022 y tiene sede en Londres. Ayuda a generar e iterar efectos visuales, como imagenes, arte vectorial y graficos 3D, con ventajas como salidas de alta calidad, posicionamiento preciso de elementos y diseno consistente con la marca. Cuenta con la confianza de mas de 3 millones de usuarios en 200 paises y regiones, incluidos Ogilvy y Netflix, y ya ha creado mas de 350 millones de imagenes. Su equipo busca convertirla en una herramienta imprescindible para disenadores, permitiendo que los creadores controlen sus flujos de trabajo asistidos por IA.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
Primero, todavia necesitamos encontrar la [entrada de API](https://www.recraft.ai/profile/api) para obtener una API Key.
|
||||
|
||||
Como aqui no hay cuota gratuita, necesitamos recargar 1,000 creditos. El sitio soporta Alipay y WeChat Pay, asi que es facil obtener esos creditos. Nota: no recargues mas de lo necesario.
|
||||
|
||||
|
||||
|
||||
Despues seguimos el mismo metodo: ir a la documentacion oficial y encontrar el ejemplo de solicitud correspondiente:
|
||||
|
||||
- <https://www.recraft.ai/docs/api-reference/getting-started>
|
||||
- <https://www.recraft.ai/docs/api-reference/usage>
|
||||
- <https://www.recraft.ai/docs/api-reference/guides>
|
||||
|
||||
:::
|
||||
|
||||
### Integracion de Qwen Image / Qwen Image Edit
|
||||
|
||||
Si quieres conectar un servicio de generacion de imagenes de una forma mas simple, puedes considerar Qwen Image. La idea no cambia: tratarlo como una "API de generacion de imagenes" y conectarlo al boton de tu prototipo.
|
||||
|
||||
::: details Saber mas: que son Qwen Image / Qwen Image Edit
|
||||
|
||||
**Qwen Image** es una serie de modelos de generacion de imagenes lanzada por el equipo Tongyi de Alibaba Cloud. Incluye principalmente dos modelos:
|
||||
|
||||
**1. Qwen Image: modelo de texto a imagen (Text-to-Image)**
|
||||
|
||||
Genera imagenes completamente nuevas a partir de descripciones textuales. Introduces un prompt, el modelo entiende tu intencion y genera una imagen acorde a la descripcion.
|
||||
|
||||
|
||||
|
||||
**Capacidades principales:**
|
||||
|
||||
- **Texto a imagen**: genera imagenes a partir de descripciones textuales y soporta varios estilos, como realista, cartoon, tinta china o cyberpunk.
|
||||
- **Transferencia de estilo**: convierte una imagen a un estilo artistico especificado.
|
||||
- **Variantes de imagen**: genera nuevas imagenes de estilo similar basadas en una referencia.
|
||||
- **Mejora de resolucion**: aumenta claridad y detalles.
|
||||
|
||||
**2. Qwen Image Edit: modelo de imagen a imagen (Image-to-Image)**
|
||||
|
||||
Edita y modifica imagenes existentes. Mediante instrucciones en lenguaje natural, el modelo entiende tu intencion de edicion y genera el resultado.
|
||||
|
||||
**Capacidades principales:**
|
||||
|
||||
- **Reemplazo local**: sustituye un objeto o una persona en la imagen, por ejemplo "cambia el fondo por la playa".
|
||||
- **Eliminacion de elementos**: elimina elementos no deseados de la imagen.
|
||||
- **Cambio de estilo**: anade filtros o efectos artisticos.
|
||||
- **Expansion de imagen**: extiende los bordes de una imagen y genera nuevo contenido.
|
||||
- **Retoque inteligente**: embellece automaticamente, ajusta luz y sombras y repara imperfecciones.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Por que elegir la serie Qwen Image?**
|
||||
|
||||
- **Optimizacion para chino**: comprende mejor prompts en chino, adecuado para usuarios locales.
|
||||
- **Bajo coste**: mas asequible que muchos competidores internacionales.
|
||||
- **Rapidez**: alta eficiencia de generacion y respuesta corta.
|
||||
- **Calidad estable**: rendimiento fiable en ecommerce y escenarios de material visual.
|
||||
- **Variedad de estilos**: soporta varios estilos artisticos y efectos creativos.
|
||||
|
||||
**Escenarios de uso tipicos:**
|
||||
|
||||
- Ecommerce: generar imagen principal, imagenes de detalle y posters promocionales.
|
||||
- Redes sociales: generar avatar, stickers e imagenes de apoyo.
|
||||
- Diseno: producir rapidamente conceptos, materiales y fondos.
|
||||
- Marketing: crear anuncios, banners de campana y posters festivos.
|
||||
:::
|
||||
|
||||
Consulta el sitio oficial de [SiliconFlow](https://siliconflow.cn/). En la parte izquierda hay una seccion "Playground", donde puedes probar distintos modelos sin hacer llamadas API. En la parte superior de la pagina hay un boton "Filters"; al hacer clic puedes filtrar la lista de modelos de la derecha.
|
||||
|
||||
Si eliges "Image", veras solo los modelos de texto a imagen soportados actualmente. En este caso usaremos Qwen/Qwen-Image.
|
||||
|
||||
|
||||
|
||||
Tras completar la configuracion, necesitamos consultar la documentacion correspondiente de API de generacion de imagenes. En la documentacion oficial puedes encontrar una seccion marcada como "API Reference". Haz clic alli, navega a la [seccion de API de generacion de imagenes](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) y busca el ejemplo de solicitud correspondiente.
|
||||
|
||||
Puedes enviar el siguiente ejemplo de solicitud junto con la API KEY al AI IDE para implementar la funcion de generacion de imagenes.
|
||||
|
||||
```bash
|
||||
curl --request POST \
|
||||
--url https://api.siliconflow.cn/v1/images/generations \
|
||||
--header 'Authorization: Bearer <token>' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data '
|
||||
{
|
||||
"model": "Qwen/Qwen-Image-Edit-2509",
|
||||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||||
}
|
||||
'
|
||||
```
|
||||
|
||||
El modelo aqui puede ser Qwen/Qwen-Image o Qwen/Qwen-Image-Edit-2509.
|
||||
|
||||
::: details Codigo de referencia para edicion de imagenes
|
||||
|
||||
Copia el siguiente codigo y la key, y envialos juntos al AI IDE:
|
||||
|
||||
```python
|
||||
import requests
|
||||
import os
|
||||
from typing import Dict, Any, Optional
|
||||
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
|
||||
QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
|
||||
|
||||
def generate_image_edit(
|
||||
prompt: str,
|
||||
image: Optional[str] = None,
|
||||
image2: Optional[str] = None,
|
||||
image3: Optional[str] = None,
|
||||
negative_prompt: Optional[str] = None,
|
||||
cfg: Optional[float] = 4.0,
|
||||
seed: Optional[int] = None
|
||||
) -> Optional[Dict[str, Any]]:
|
||||
payload: Dict[str, Any] = {
|
||||
"model": QWEN_IMAGE_EDIT_MODEL,
|
||||
"prompt": prompt,
|
||||
}
|
||||
if image:
|
||||
payload["image"] = image
|
||||
if image2:
|
||||
payload["image2"] = image2
|
||||
if image3:
|
||||
payload["image3"] = image3
|
||||
if negative_prompt:
|
||||
payload["negative_prompt"] = negative_prompt
|
||||
if cfg is not None:
|
||||
payload["cfg"] = cfg
|
||||
if seed is not None:
|
||||
payload["seed"] = seed
|
||||
|
||||
headers: Dict[str, str] = {
|
||||
"Authorization": f"Bearer {SILICONFLOW_API_KEY}",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
|
||||
response.raise_for_status()
|
||||
return response.json()
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error generating image: {e}")
|
||||
return None
|
||||
|
||||
def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
|
||||
try:
|
||||
response = requests.get(image_url)
|
||||
response.raise_for_status()
|
||||
os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
|
||||
with open(output_path, "wb") as f:
|
||||
f.write(response.content)
|
||||
print(f"Image saved successfully to: {output_path}")
|
||||
return True
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error downloading image: {e}")
|
||||
return False
|
||||
except Exception as e:
|
||||
print(f"Error saving image: {e}")
|
||||
return False
|
||||
|
||||
prompt: str = "Convierte el cielo en un atardecer, con luna y estrellas, estilo onirico"
|
||||
negative_prompt: str = "borroso, baja calidad, deformado"
|
||||
image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
|
||||
image2_url: Optional[str] = None
|
||||
image3_url: Optional[str] = None
|
||||
|
||||
cfg: float = 4.0
|
||||
seed: int = 12345
|
||||
output_path: str = "edited_image.png"
|
||||
|
||||
print(f"Generating edited image with prompt: {prompt}")
|
||||
print(f"Input image: {image_url}")
|
||||
print(f"CFG: {cfg}, Seed: {seed}")
|
||||
print("-" * 50)
|
||||
|
||||
result = generate_image_edit(
|
||||
prompt=prompt,
|
||||
image=image_url,
|
||||
image2=image2_url,
|
||||
image3=image3_url,
|
||||
negative_prompt=negative_prompt,
|
||||
cfg=cfg,
|
||||
seed=seed
|
||||
)
|
||||
|
||||
if result and "images" in result:
|
||||
images = result["images"]
|
||||
if images and len(images) > 0:
|
||||
image_url_result = images[0]["url"]
|
||||
print(f"Image edit generated successfully. URL: {image_url_result}")
|
||||
success = save_image_from_url(image_url_result, output_path)
|
||||
if success:
|
||||
print(f"Image saved to: {output_path}")
|
||||
else:
|
||||
print("Failed to save image to local file")
|
||||
else:
|
||||
print("No images found in response")
|
||||
else:
|
||||
print("Image generation failed")
|
||||
if result:
|
||||
print(f"Response: {result}")
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# Apendice: como encontrar modelos de IA "mas fuertes actualmente"
|
||||
|
||||
Los modelos de texto, tambien llamados con frecuencia "modelos de lenguaje grandes", evolucionan muy rapido. Siempre necesitamos asegurarnos de usar uno de los modelos con mejor rendimiento. Con los dos sitios siguientes puedes ver facilmente que modelos son mas usados y mejor valorados actualmente.
|
||||
|
||||
En general, estos sitios pueden entenderse como **"arenas de modelos"**: ponen juntas las salidas de dos modelos y votas por la que prefieres. Un modelo con mas votos suele significar que mas personas lo consideran "mas util".
|
||||
|
||||
Ademas, a veces puedes ver modelos anonimos misteriosos ("Unknown Model") en estas arenas. Normalmente significa que alguien ha incluido discretamente un "modelo interno de prueba" para evaluacion ciega, y tal vez tengas la oportunidad de experimentar capacidades mas fuertes antes de tiempo.
|
||||
|
||||
## LMArena
|
||||
|
||||
Sitio web: <https://lmarena.ai/>
|
||||
|
||||
LMArena es mas adecuado para juzgar "que respuesta de modelo prefiere la mayoria". Cuantos mas votos y mayor puntuacion, normalmente mas estable es en escenarios reales.
|
||||
|
||||
Una forma simple de usarlo:
|
||||
|
||||
1. Mira directamente el ranking (Leaderboard)
|
||||
2. Elige primero el area que necesitas, por ejemplo conversacion general, programacion o vision
|
||||
3. Dentro del Top 3, elige el que puedas usar: accesible, coste aceptable y latencia aceptable
|
||||
|
||||
|
||||
|
||||
## Artificial Analysis
|
||||
|
||||
Sitio web: <https://artificialanalysis.ai/>
|
||||
|
||||
Artificial Analysis es mas adecuado para comparar "calidad / precio / velocidad" en una misma tabla. Puedes tratarlo como una tabla de parametros para seleccionar modelos.
|
||||
|
||||
Uso habitual:
|
||||
|
||||
1. Encuentra la categoria de modelo que te interesa, por ejemplo texto o generacion de imagenes
|
||||
2. Revisa calidad (Quality) + precio (Price) + latencia/throughput (Latency/Throughput)
|
||||
3. Elige el modelo cuya relacion global coste-rendimiento encaje mejor con tu producto
|
||||
|
||||
::: tip ✅ Recomendacion
|
||||
No discutas "cual es mas fuerte" solo por intuicion. Un metodo mas fiable es probar 2 o 3 modelos con el mismo conjunto de entradas y luego decidir combinando ranking y precio.
|
||||
:::
|
||||
|
||||
## Resumen
|
||||
|
||||
Al integrar distintos servicios de IA, no hace falta imaginar las APIs como algo demasiado complejo. Si dominas los siguientes conceptos centrales, podras manejar la mayoria de escenarios:
|
||||
|
||||
**La esencia de una API es ser un puente de comunicacion**. Hace algo muy simple: envia tu solicitud y trae de vuelta la respuesta del modelo. No necesitas preocuparte por lo que ocurre detras; solo debes organizar correctamente el formato de la solicitud.
|
||||
|
||||
**Un SDK es una capa de encapsulacion sobre la API**. Si la API es una interfaz raw, el SDK es una caja de herramientas lista para usar: se encarga de detalles tediosos como firma de solicitudes, manejo de errores y validacion de parametros. En el desarrollo diario, priorizar SDK frente a llamadas API directas ahorra muchos problemas.
|
||||
|
||||
**Al leer documentacion, basta con fijarse en tres cosas**: direccion del servicio (endpoint), credencial de identidad (API key) y como rellenar los parametros de llamada. Si entiendes estas tres cosas, hacer funcionar la llamada es cuestion de tiempo.
|
||||
|
||||
El resto del trabajo lo completaran el IDE y las herramientas modernas de desarrollo. Concetrate en tu logica de negocio y deja las llamadas de bajo nivel a SDKs y toolchains maduros.
|
||||
|
||||
# 5. 📚 Tarea: integra tu primera capacidad de IA
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 Reto: integrar capacidades de IA en tu workspace</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Toma como referencia los prompts y contenidos de esta leccion y completa un ciclo cerrado:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Practica de ciclo completo</strong>
|
||||
<ul>
|
||||
<li>Elige e integra un servicio de IA (LLM / texto a imagen / imagen a imagen) → implementa interaccion frontend-backend → integralo en tu prototipo</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Compartir resultados</strong>
|
||||
<ul>
|
||||
<li>Captura la pagina de tu funcion y compartela con los demas</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Pregunta de reflexion</strong>
|
||||
<ul>
|
||||
<li>Reserva espacio mental para la siguiente seccion, "practica de proyecto completo": piensa de antemano como combinar estas capacidades de IA y que funcion interesante quieres crear.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Siguiente paso
|
||||
|
||||
En la siguiente seccion conectaremos estas capacidades de IA dispersas y las combinaremos con un escenario de negocio real para construir un producto completo:
|
||||
|
||||
- Conectar planificacion de contenido, publicacion de productos, analisis de datos y otros pasos en un flujo de negocio completo
|
||||
- Integrar las capacidades de IA aprendidas en esta leccion, como generacion de copy con LLM, texto a imagen y edicion de imagenes, en nodos reales del negocio
|
||||
- Implementar un "workspace de IA para ecommerce" realmente utilizable, no una demo aislada
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Articulos relacionados"
|
||||
description="Ruta recomendada para pasar de capacidades de IA puntuales a un flujo completo de producto."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,275 @@
|
||||
---
|
||||
title: 'De la idea al producto de IA - Ruta de aprendizaje de Easy-Vibe'
|
||||
description: 'Ruta de aprendizaje completa de programación con IA: de cero al desarrollo fullstack. Domina Vibe Coding, Claude Code, Cursor y otras herramientas AI IDE, aprende pensamiento de producto, desarrollo fullstack e integración de capacidades de IA.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['es-es/stage-1/learning-map'] ?? []
|
||||
</script>
|
||||
|
||||
# De la idea al producto de IA
|
||||
|
||||
::: info Agradecimiento especial
|
||||
¡Un agradecimiento especial a los estudiantes de la **Universidad de Tsinghua, Campus de Shenzhen** por sus pruebas, retroalimentación y apoyo a este curso! Sus opiniones y contribuciones han hecho que este curso sea mejor. [👉 Ver lista completa de contribuyentes](https://github.com/datawhlechina/easy-vibe#-contributing--contributors)
|
||||
:::
|
||||
|
||||
Antes, crear software tenía una barrera muy alta: necesitabas saber programar, entender algoritmos y tener años de experiencia en proyectos.
|
||||
Ahora es diferente. Mientras tengas una idea, la IA puede ayudarte a escribir código.
|
||||
|
||||
Este es un cambio enorme: **los lenguajes de programación se están convirtiendo en lenguaje natural**.
|
||||
|
||||
La aparición de los modelos de lenguaje grande (LLM) ha hecho que el desarrollo ya no sea "exclusivo de los gurús técnicos", sino una herramienta que todos pueden utilizar. Antes, lo más difícil era "cómo escribir código"; ahora, lo más difícil es "**qué quieres hacer**".
|
||||
|
||||
> **¿Qué es Vibe Coding?**
|
||||
> En pocas palabras, es "programar hablando". Vibe coding significa que puedes depender únicamente de conversar con la IA, en lugar de escribir código directamente, para completar proyectos de programación.
|
||||
|
||||
Por supuesto, hacer que la IA escriba código es solo el primer paso. Para crear un producto realmente funcional, aún te enfrentarás a estas preguntas:
|
||||
- ¿Cómo hacer que la IA escriba código limpio y mantenible?
|
||||
- ¿Cómo unir código disperso en una aplicación funcional?
|
||||
- ¿Cómo poner la aplicación realmente en línea y que la gente la use?
|
||||
- ¿Cómo integrar capacidades de IA como generación de texto y reconocimiento de imágenes en tu producto?
|
||||
|
||||
Estas preguntas encontrarán respuesta en este curso.
|
||||
|
||||
No importa si eres estudiante, profesor, médico, trabajador o cualquier persona sin conocimientos técnicos, no necesitas aprender a programar durante años; en dos semanas podrás crear un prototipo de producto funcional y demostrable.
|
||||
|
||||
| Tu perfil | Lo que este curso puede hacer por ti |
|
||||
|---------|-------------|
|
||||
| Estudiante | Tareas, competiciones, emprendimiento; haz tus propios proyectos sin depender de nadie |
|
||||
| Profesional | Automatiza trabajos repetitivos, mejora tu eficiencia e incluso desarrolla un negocio secundario |
|
||||
| Product Manager / Diseñador | Tus ideas ya no se quedan en papel; puedes crear demos rápidamente para tu jefe/clientes |
|
||||
| Emprendedor / PyME | Valida ideas a bajo costo; puedes crear un MVP sin gastar miles en outsourcing |
|
||||
| Profesor / Educador | Crea herramientas didácticas, presentaciones y evaluaciones automatizadas, mejorando la eficiencia educativa |
|
||||
| Médico / Abogado / Profesional | Automatiza procesos profesionales y crea tus propias herramientas de eficiencia |
|
||||
| Cualquier persona | Usa IA para resolver problemas específicos de tu vida/trabajo, haciendo lo imposible posible |
|
||||
|
||||
En la era de la IA, la capacidad de ejecución y las ideas siempre son más importantes que la tecnología.
|
||||
|
||||
## Ruta de crecimiento: de "saber usar IA" a "saber crear productos de IA"
|
||||
|
||||
<div class="stage-intro">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎮</div>
|
||||
<h3>Introducción</h3>
|
||||
<p class="stage-role">Experimenta la programación con IA</p>
|
||||
<div class="stage-tags">
|
||||
<span>Mini juego Snake</span>
|
||||
<span>Inicio desde cero</span>
|
||||
<span>Primera experiencia de Vibecoding</span>
|
||||
<span>Generación en minutos</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-grid">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🛠️</div>
|
||||
<h3>Primera Etapa</h3>
|
||||
<p class="stage-role">Product Manager / Operaciones</p>
|
||||
<div class="stage-tags">
|
||||
<span>AI IDE (Cursor/Claude)</span>
|
||||
<span>Descomposición de requisitos y prototipo</span>
|
||||
<span>Integración de capacidades de IA</span>
|
||||
<span>Desarrollo de Demo completo</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Segunda Etapa</h3>
|
||||
<p class="stage-role">Desarrollador junior/intermedio / Desarrollador independiente</p>
|
||||
<div class="stage-tags">
|
||||
<span>De Figma a código</span>
|
||||
<span>Base de datos Supabase</span>
|
||||
<span>Integración de pago Stripe</span>
|
||||
<span>Base de conocimientos Dify</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Tercera Etapa</h3>
|
||||
<p class="stage-role">Desarrollador senior / Arquitecto</p>
|
||||
<div class="stage-tags">
|
||||
<span>Web/Mini-programas/Multiplataforma</span>
|
||||
<span>Herramientas avanzadas MCP</span>
|
||||
<span>RAG y LangGraph</span>
|
||||
<span>Mentalidad de ingeniero senior</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stage-intro {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: var(--vp-c-bg-mute);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stage-role {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stage-tags span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-card:hover .stage-tags span {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
A través de esta ruta de aprendizaje completa, obtendrás:
|
||||
|
||||
- **Capacidad de desarrollo Vibe Coding:** Domina la mentalidad de vibecoding y las herramientas de codificación con IA, multiplicando tu eficiencia de desarrollo. Ya no necesitas memorizar sintaxis, sino aprender a guiar la IA para generar código de alta calidad.
|
||||
- **Habilidades de desarrollo fullstack:** Desde el diseño UI hasta la implementación frontend, desde el diseño de base de datos hasta el desarrollo de API, desde el desarrollo local hasta el despliegue en la nube, domina la pila tecnológica completa de aplicaciones web modernas.
|
||||
- **Integración de capacidades de IA:** Aprende a llamar a diversas APIs multimodales de IA, integrando capacidades de IA como texto, imagen y voz en tus aplicaciones, y construyendo productos inteligentes a través de tecnologías como RAG.
|
||||
- **Pensamiento de producto y capacidad operativa:** Desde la investigación de usuarios hasta la descomposición de requisitos, desde el diseño de MVP hasta la iteración del producto, desde la integración de pagos hasta la gestión de usuarios, formando un ciclo completo de desarrollo y operación de productos.
|
||||
|
||||
# ¿Qué podrás hacer al terminar?
|
||||
|
||||
## Primera Etapa: Crea tu primer prototipo de producto
|
||||
|
||||
Esta etapa es adecuada para personas que no tienen ninguna base de programación, o que solo saben un poco pero no se sienten seguras. No necesitas aprender mucha teoría primero; en su lugar, sigue los pasos directamente y aprende a usar herramientas de IA para escribir código mientras lo haces.
|
||||
|
||||
**Al terminar podrás**:
|
||||
- Completar independientemente una aplicación web con herramientas de programación con IA
|
||||
- Convertir ideas de producto en prototipos clicables e interactivos
|
||||
- Añadir funcionalidades de IA al prototipo (como generación de imágenes desde texto, chat inteligente)
|
||||
- Saber cómo diagnosticar y resolver errores cuando aparezcan
|
||||
|
||||
En pocas palabras, podrás crear algo "que funcione y que puedas demostrar a otros".
|
||||
|
||||
Podemos primero experimentar la programación con IA a través de juegos pequeños, y luego aprender a usar herramientas de programación con IA para ayudarte a escribir código y corregir errores. Luego, comenzando con páginas simples, crearemos gradualmente una aplicación multipágina interactiva, y añadiremos funcionalidades de IA como generación de imágenes desde texto y chat inteligente. Finalmente, completarás independientemente un proyecto completo, permitiendo que tus ideas tengan una posibilidad real de materializarse.
|
||||
|
||||
# ¿Por qué usar un enfoque basado en proyectos para entrenar?
|
||||
|
||||
> **Desafíos del mundo real**
|
||||
>
|
||||
> La razón es bastante simple: según el estado actual de la mayoría de los estudiantes, al entrar directamente al mundo laboral, muy probablemente tendrán dificultades bajo los "golpes de la realidad" de proyectos reales y jefes/clientes. Los escenarios más comunes en el mundo real son:
|
||||
|
||||
> Tu mentor/jefe: Queremos hacer un xxx, el objetivo es alcanzar el efecto yyy.
|
||||
>
|
||||
> ¿Documentación? ¿Frameworks existentes? ¿Especificaciones detalladas de requisitos? Muchas veces no existen.
|
||||
|
||||
Muchas tareas en el trabajo real consisten esencialmente en resolver problemas nunca antes vistos en un entorno de alta incertidumbre: los requisitos son vagos, los límites cambian, nadie te da la respuesta correcta, y necesitas investigar por tu cuenta, hacer experimentos, construir prototipos e iterar constantemente, para finalmente entregar una solución que "funcione, sea usable y pueda ponerse en producción".
|
||||
|
||||
Lo que este curso quiere hacer es darte una "simulación de golpes de la realidad" en un entorno relativamente seguro:
|
||||
|
||||
- A través de tareas de proyecto con cierta dificultad, obligarte a practicar la descomposición de problemas, el diseño de soluciones y la búsqueda independiente de información
|
||||
- A través de andamios y código no tan "simplificados", enseñarte a leer, entender y modificar una base de código mediana o grande
|
||||
- A través del ciclo completo de la idea al despliegue, hacerte experimentar el proceso completo de un producto real de 0 a 1
|
||||
|
||||
A corto plazo, este entrenamiento es bastante exigente; pero a largo plazo, mejorará enormemente tu competitividad en la búsqueda de empleo y el desarrollo profesional: podrás soportar más presión, encontrar puntos de avance en entornos inciertos y tener más capacidad para convertir la IA en productos realmente implementados, en lugar de quedarte en la etapa de "jugar con demos".
|
||||
|
||||
# El arte de preguntar: una habilidad esencial en la era de la IA
|
||||
|
||||
En la era de la IA, preguntar también es una "habilidad fundamental". Con el mismo código y el mismo error, **cómo preguntas casi determina qué tipo de respuesta puede dar la IA**: ¿generalidades o pasos concretos y aplicables?
|
||||
|
||||
**Desarrolla buenos hábitos:** Considera "preguntar a la IA" como parte de tu flujo de desarrollo diario: cuando no entiendas algo o estés atascado, pregunta inmediatamente.
|
||||
|
||||
## ¿Por qué es una habilidad esencial?
|
||||
|
||||
- **Rara vez hay documentación completa en la realidad:** La mayoría de las veces te enfrentas a requisitos poco claros, código a medio hacer, mensajes de error dispersos
|
||||
- **La IA es tu tutor y colega personal:** Quien sabe preguntar puede convertirlo en "programación en pareja de alta calidad"
|
||||
- **Tu límite superior lo determina la comunicación:** Cuanta más información clave puedas proporcionar y mejor puedas limitar el formato de salida, más utilizable será la respuesta
|
||||
|
||||
**Error común:** Preguntar solo "¿por qué da error?" generalmente solo genera conjeturas. Completar el contexto te dará soluciones accionables.
|
||||
|
||||
## Cómo "alimentar" información a la IA: captura de pantalla vs copiar y pegar
|
||||
|
||||
Ambos métodos funcionan, pero tienen usos diferentes:
|
||||
|
||||
| Método | Escenario aplicable | Requisito clave |
|
||||
| ------------ | ----------------------------------------- | ----------------------------------------- |
|
||||
| **Copiar y pegar** | Stack trace de errores, logs, código, configuración, respuestas de API | Intenta ser completo, no copies solo una línea clave |
|
||||
| **Captura de pantalla** | Problemas de layout UI, anomalías de interacción, no encuentras botones en la interfaz de herramientas | Captura completa + anota las áreas clave, preferiblemente con una breve descripción textual |
|
||||
|
||||
::: danger ⚠️ Requisito previo importante
|
||||
**No todos los modelos de IA soportan entrada de imágenes.** La comunicación por capturas de pantalla requiere que la IA tenga capacidades multimodales (es decir, poder entender y analizar imágenes). Actualmente, las IA que soportan entrada de imágenes incluyen: Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google), y algunos modelos nacionales como Tongyi Qianwen, Wenxin Yiyan, etc.
|
||||
|
||||
**Si la IA que usas no soporta entrada de imágenes**, las capturas de pantalla no podrán ser reconocidas; en ese caso, usa el método de copiar y pegar texto para comunicarte.
|
||||
:::
|
||||
|
||||
## Técnicas de prompt para que la IA "explique bien"
|
||||
|
||||
Si no solo quieres la respuesta, sino "aprender" la respuesta. Usar instrucciones como las siguientes puede mejorar significativamente la calidad de las explicaciones:
|
||||
|
||||
> **Ejemplo de pregunta de aprendizaje**
|
||||
>
|
||||
> - "Por favor, primero explica este concepto en 5 frases, y luego hazme algunas preguntas para verificar que lo he entendido correctamente."
|
||||
> - "Por favor, explica detalladamente este mensaje de error, no entiendo por qué da error."
|
||||
|
||||
# He insistido mucho pero aún no lo logro, quiero rendirme
|
||||
|
||||
Puede que tu método de perseverancia no sea el correcto. No luches solo en la oscuridad; puedes venir a hablar con los autores y asistentes: explica honestamente los métodos que ya has probado, los puntos específicos donde estás atascado y tu estado mental actual. Muchas veces, con solo un pequeño ajuste de dirección o completar un conocimiento clave, podrás seguir avanzando.
|
||||
|
||||
# Creo que algunos diseños del tutorial no son razonables
|
||||
|
||||
Siempre eres bienvenido a contactar a los autores, crear un issue o dar retroalimentación directamente en el grupo o en clase. Esperamos mucho trabajar contigo para mejorar este tutorial: qué no está claro, qué tiene mala experiencia de usuario, qué te hizo perder tiempo, todo se puede señalar honestamente. La retroalimentación más real y específica es la que más ayuda a los futuros estudiantes a evitar errores.
|
||||
|
||||
# Referencia
|
||||
|
||||
- [Universidad de Nanjing, Departamento de Ciencias de la Computación y Tecnología, Curso de Fundamentos de Sistemas Informáticos](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Qué aprender a continuación"
|
||||
description="Continúa avanzando siguiendo la ruta de 'de saber usar IA a saber crear productos'."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,82 @@
|
||||
# Presentation du projet
|
||||
|
||||
En 2025, de nombreuses personnes considèrent cette année comme le point de départ de la programmation par IA. De plus en plus de gens commencent à utiliser l'IA pour écrire du code, mais les résultats restent souvent au stade de prototype -- sans savoir comment organiser un processus de développement avec le Vibe Coding, quels outils choisir, et encore moins quelles étapes clés séparent le prototype de la mise en production.
|
||||
|
||||
Nous adoptons une **approche pratique en trois étapes** : l'étape débutant permet de se familiariser rapidement avec la programmation par IA grâce à des mini-jeux ; la première étape permet de maîtriser le flux de travail du Vibe Coding et de réaliser un prototype d'application Web ; la deuxième étape couvre le développement full-stack et le déploiement en production ; la troisième étape permet de construire des applications complexes multiplateformes.
|
||||
|
||||
Chaque étape est accompagnée d'un projet pratique complet, vous permettant de passer du prototype au produit grâce à des défis concrets, et d'acquérir finalement la capacité à **transformer n'importe quelle idée en une application fonctionnelle**.
|
||||
|
||||
Nous sommes convaincus qu'en maîtrisant le Vibe Coding associé à une formation systématique, vous pouvez devenir à vous seul un **développeur polyvalent, combinant développement front-end et back-end, intégration de capacités IA et conception de produits**.
|
||||
|
||||
Ce projet s'adresse principalement à trois types d'apprenants :
|
||||
|
||||
- **Débutants (grand public / côté produit et operations)** : aider les profils non techniques et les apprenants débutants à comprendre les concepts clés et à réaliser un premier petit outil IA ou prototype de produit.
|
||||
- **Développeurs intermédiaires (étudiants et développeurs ayant quelques bases)** : maîtriser systématiquement le Vibe Coding et le développement d'applications IA natives.
|
||||
- **Développeurs avancés (entreprises et startups, open source et développeurs indépendants)** : accompagner les équipes et les individus dans la création, la validation et l'itération rapide d'applications IA natives.
|
||||
|
||||
## 📖 Navigation du contenu
|
||||
|
||||
### Appendice général
|
||||
|
||||
[Dictionnaire des capacités IA : explication des concepts clés, termes et scénarios courants](/fr-fr/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### Étape 0 : Maternelle
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
|
||||
| [Guide debutant : carte d'apprentissage](/fr-fr/stage-1/learning-map/) | Aperçu global du parcours d'apprentissage | ✅ |
|
||||
| [Guide debutant : À l'ère de l'IA, savoir parler, c'est savoir coder](/fr-fr/stage-1/ai-capabilities-through-games/) | Découvrir les capacités de la programmation IA grâce à des exemples comme le jeu du serpent | ✅ |
|
||||
|
||||
### Étape 1 : Chef de produit IA
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
|
||||
| [Niveau 1 chapitre 2 : Decouvrir les outils AI IDE](/fr-fr/stage-1/introduction-to-ai-ide/) | Apprendre à utiliser un IDE, maîtriser la structure de l'interface et les méthodes de prompting efficaces | ✅ |
|
||||
| [Niveau 1 chapitre 3 : Creer un prototype](/fr-fr/stage-1/building-prototype/) | De l'analyse produit au prototype multipage, un cycle complet | ✅ |
|
||||
| [Niveau 1 chapitre 4 : Ajouter des capacites IA au prototype](/fr-fr/stage-1/integrating-ai-capabilities/) | Comprendre et intégrer les API de capacités IA courantes (texte, image, vidéo) | ✅ |
|
||||
| [Niveau 1 chapitre 5 : Projet complet pratique](/fr-fr/stage-1/complete-project-practice/) | Simuler des scénarios réels, itérer à partir des retours utilisateurs et finaliser la présentation du projet (projet de fin de parcours inclus) | ✅ |
|
||||
|
||||
#### Annexes
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
|
||||
| [Annexe A : Complement sur la pensee produit](/fr-fr/stage-1/appendix-a-product-thinking/) | Du cadrage des idées à la réflexion produit en passant par le MVP | ✅ |
|
||||
| [Annexe B : Erreurs courantes et solutions](/fr-fr/stage-1/appendix-b-common-errors/) | Erreurs fréquentes en Vibe Coding et méthodes de dépannage | ✅ |
|
||||
| [Annexe : Ou trouver des idees](/fr-fr/stage-1/appendix-idea-sources/) | Identifier des directions à partir d'applications de référence, de tendances et de listes de VC | ✅ |
|
||||
| [Annexe : Le modele Double Diamond](/fr-fr/stage-1/appendix-double-diamond/) | Comprendre le rythme complet : définir d'abord le problème, puis concevoir la solution | ✅ |
|
||||
| [Annexe : Jobs to Be Done](/fr-fr/stage-1/appendix-jobs-to-be-done/) | Utiliser la méthode JTBD pour comprendre ce que l'utilisateur veut vraiment accomplir | ✅ |
|
||||
| [Annexe : The Mom Test - Entretiens utilisateurs](/fr-fr/stage-1/appendix-mom-test/) | Méthode de recherche pour valider les besoins via des entretiens utilisateurs | ✅ |
|
||||
|
||||
### Étape 2 : Développeur intermédiaire
|
||||
|
||||
#### Partie front-end
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
|
||||
| Utiliser lovart pour produire des ressources | Apprendre à utiliser lovart pour générer en masse des visuels (personnages, décors, etc.), fournissant une base de ressources pour le design UI et le développement front-end | 🚧 |
|
||||
| Introduction à Figma et MasterGo | Utiliser les outils de design pour structurer l'architecture de l'information et la mise en page, posant les bases de l'implémentation front-end | 🚧 |
|
||||
| Construire une premiere application moderne - Design UI | Réaliser une interface basée sur les composants à partir des maquettes, établissant le premier lien entre design et code | 🚧 |
|
||||
| Concevoir des pages et boutons selon les normes UI | Apprendre à organiser la structure des pages et la hiérarchie des boutons selon les standards de design dominants, et utiliser l'IA pour générer des propositions | 🚧 |
|
||||
| [Creer des portraits de Poudlard ensemble](/fr-fr/stage-2/frontend/hogwarts-portraits/) | Créer de A à Z une application front-end intégrant des capacités IA, en combinant design et développement | 🚧 |
|
||||
|
||||
#### Partie back-end
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| Qu'est-ce qu'une API | Comprendre les interfaces HTTP et le modèle requête/réponse, en préparation de l'intégration et des tests back-end | 🚧 |
|
||||
| [De la base de données à Supabase](/fr-fr/stage-2/backend/database-supabase/) | Implémenter une base de données et une API sur Supabase, relier le modèle de données aux pages front-end | 🚧 |
|
||||
| Rediger du code d'interface et de la documentation assistee par LLM | Utiliser les LLM pour générer du code d'interface et de la documentation de base de données, réalisant un back-end lisible et testable | 🚧 |
|
||||
| Flux de travail Git et deploiement Zeabur | Gérer le code avec un flux Git et déployer l'application sur Zeabur pour la mise en production | 🚧 |
|
||||
| Outils de développement CLI modernes | Utiliser les outils CLI de programmation IA pour accélérer le développement et le débogage, et établir un flux de travail personnel industrialisé | 🚧 |
|
||||
| Comment integrer un systeme de paiement comme stripe | Intégrer un système de paiement et compléter le circuit de facturation et le processus de règlement de base | 🚧 |
|
||||
| Construire une premiere application moderne - Application full-stack | Combiner front-end, back-end et module de paiement pour livrer une application Web full-stack déployable | 🚧 |
|
||||
| Bibliotheque de composants front-end modernes + Trae en pratique | Utiliser une bibliothèque de composants front-end modernes et Trae pour réaliser de manière autonome un produit avec connexion/inscription et support de paiement | 🚧 |
|
||||
|
||||
#### Appendice capacites IA
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [Introduction à Dify et integration de base de connaissances](/fr-fr/stage-2/ai-capabilities/dify-knowledge-base/) | Créer un produit de type outil avec Dify Workflow et un RAG basique, en préparation des évolutions futures de l'application | 🚧 |
|
||||
| Apprendre à consulter le dictionnaire IA et integrer des API multimodales | Apprendre à trouver les modèles et API appropriés, et intégrer les capacités multimodales (texte, image, etc.) dans le produit | 🚧 |
|
||||
|
||||
### Étape 3 : Développeur avancé
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/ai-capabilities-through-games/images
|
||||
@@ -0,0 +1,679 @@
|
||||
# Niveau 1 : À l'ère de l'IA, savoir parler, c'est savoir programmer
|
||||
|
||||
Ceci est un tutoriel basé sur l'<strong>apprentissage par projet</strong>. Nous vous encourageons à suivre les étapes une par une et à essayer de reproduire les résultats.
|
||||
Ne craignez pas de faire des erreurs ou de modifier le contenu, nous croyons toujours que vous pouvez y arriver. N'oubliez jamais :
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
|
||||
<span style="font-size: 15px; font-weight: 500; color: #666;">Terminer vaut mieux que parfait 🐣</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Environ <strong>4 heures</strong>, réalisables en plusieurs sessions'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['zh-cn/stage-1/ai-capabilities-through-games'] ?? []
|
||||
</script>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Programmation conversationnelle par IA', 'Mini-jeu IA-native', 'Projet pratique : Snake']" coreOutput="Snake IA-native + mini-jeu original" expectedOutput="1 Snake IA-native fonctionnel + (optionnel) 1 mini-jeu ou démo IA-native de votre création">
|
||||
|
||||
Si vous <strong>ne savez absolument pas programmer</strong>, ou que vous ne connaissez que les bases, ce chapitre est fait pour vous. Nous commencerons par les fondamentaux : utiliser la <strong>conversation</strong> pour demander à l'IA d'écrire du code, sans avoir besoin de mémoriser la syntaxe, de configurer un environnement, et en faisant tourner le tout directement dans le navigateur.
|
||||
|
||||
Vous créerez de vos propres mains <strong>votre premier programme fonctionnel</strong> — un jeu de Snake qui « mange des mots, écrit des poèmes et dessine ». À travers ce projet pratique, vous découvrirez ce que signifie vraiment la programmation par IA : ce n'est pas l'IA qui pense à votre place, c'est vous qui exprimez vos idées et l'IA qui les réalise.
|
||||
|
||||
Toute création commence par un passage de 0 à 1, et nous sommes ravis de transmettre confiance et expertise à chaque étape. Pour vous, <strong>l'exécution is all you need</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
|
||||
{ title: 'Premier contact', description: 'Développement express en 60 secondes' },
|
||||
{ title: 'Projet pratique', description: 'Créer un Snake IA-native' },
|
||||
{ title: 'Explorer et créer', description: 'Réinventer le jeu' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Le défi et l'opportunité pour les non-programmeurs
|
||||
|
||||
Beaucoup de gens ont la tête pleine d'idées de produits : un petit outil pour gérer ses comptes, une page web pour suivre la croissance de leur enfant, voire un mini-jeu. Mais dès qu'ils pensent au code à écrire, au développeur à trouver, ils abandonnent tout de suite.
|
||||
|
||||
Depuis l'apparition de l'IA, une toute nouvelle possibilité s'est offerte pour la première fois aux non-techniciens : vous n'avez pas besoin de savoir coder, il vous suffit de savoir exprimer clairement à l'IA ce que vous voulez. Les [données de GitHub Copilot](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics) montrent que plus de 15 millions de développeurs utilisent déjà l'IA pour les aider à coder, et qu'en moyenne 46 % du code est généré par l'IA ! Sur les projets Java, cette proportion atteint 61 %.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">🚀</span>
|
||||
<span style="font-weight: bold; font-size: 16px;">Bond en efficacité et taux d'adoption</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" style="margin-bottom: 24px;">
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55 %</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Gain de vitesse</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2,4 <span style="font-size: 14px;">jours</span></div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Durée des tâches (contre 9,6 jours)</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81 %</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Taux d'installation dès le premier jour</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96 %</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Taux d'adoption des suggestions</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="line-height: 1.8; color: #606266;">
|
||||
Ce qui est vraiment excitant, c'est le bond en efficacité : la vitesse à laquelle les développeurs accomplissent leurs tâches a augmenté de <b>55 %</b>. Ce qui prenait 9,6 jours à livrer ne nécessite plus que <b>2,4 jours</b>. Cette amélioration visible montre que l'IA n'est plus un « outil optionnel », mais un assistant de programmation devenu indispensable dans le flux de développement. Les chiffres d'adoption le confirment : le jour même où ils ont obtenu l'accès, <b>81 %</b> des développeurs l'ont installé et commencé à l'utiliser immédiatement ; parmi eux, <b>96 %</b> ont adopté les suggestions de code dès le premier jour. En d'autres termes, les développeurs ont quasi instantanément intégré l'IA dans leur travail quotidien.
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
Pour les non-programmeurs, cette tendance est encore plus significative : si les développeurs professionnels s'appuient massivement sur l'IA pour coder, <strong>pourquoi ne pas simplement discuter avec l'IA pour concrétiser nos propres idées ?</strong>
|
||||
|
||||
L'objectif de ce cours est de vous former à une nouvelle compétence : créer des applications grâce au dialogue en langage naturel. Nous vous apprendrons à communiquer avec l'IA dans le langage des ordinateurs, et comment la laisser transformer vos idées en produits réels et utilisables.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
|
||||
{ title: 'Premier contact', description: 'Développement express en 60 secondes' },
|
||||
{ title: 'Projet pratique', description: 'Créer un Snake IA-native' },
|
||||
{ title: 'Explorer et créer', description: 'Réinventer le jeu' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Jusqu'où l'IA peut-elle vous aider ?
|
||||
|
||||
Dans cette section, nous n'aborderons qu'une seule question : si vous ne savez pas coder du tout, jusqu'où l'IA actuelle peut-elle vous aider ?
|
||||
|
||||
Globalement, vous pouvez comprendre les capacités des modèles actuels comme suit : ils sont capables de développer des <strong>outils internes simples</strong>, des <strong>tableaux de bord de data visualisation</strong>, ainsi que quelques <strong>mini-jeux légers</strong>. Ces capacités suffisent pour créer des <strong>outils personnels</strong> et <strong>valider des besoins du point de vue produit</strong>. Mais si vous espérez générer en un clic un <strong>produit commercial mature</strong>, il faudra généralement encore un travail humain pour <strong>la conception du flux</strong>, <strong>le polissage des détails</strong>.
|
||||
|
||||
Voyons concrètement, avec l'exemple du jeu de Snake, ce que la programmation par IA peut accomplir aujourd'hui.
|
||||
|
||||
### 2.1 Créer un Snake en 60 secondes
|
||||
|
||||
Commencez par ouvrir la page expérimentale utilisée dans ce cours : [z.ai](https://chat.z.ai/). `z.ai` est une plateforme IA développée par Zhipu AI (l'une des principales entreprises chinoises de grands modèles de langage), dont les capacités sont fournies par la série de modèles GLM développée en interne. La plateforme intègre plusieurs fonctionnalités IA, notamment la génération de diapositives, la conception d'affiches et le développement full-stack. Dans ce tutoriel, nous nous concentrerons sur l'utilisation du module de développement full-stack.
|
||||
|
||||
::: details 💡 Qu'est-ce que le nouveau mode « coder dans le navigateur » ?
|
||||
|
||||
Autrefois, développer une application web nécessitait :
|
||||
- Installer un environnement de programmation (Python, Node.js, etc.)
|
||||
- Configurer un éditeur de code
|
||||
- Apprendre HTML/CSS/JavaScript
|
||||
- Gérer les dépendances et les erreurs
|
||||
|
||||
Maintenant, grâce aux plateformes de programmation par IA, il vous suffit de :
|
||||
- Ouvrir votre navigateur et accéder à la page
|
||||
- Décrire ce que vous voulez en langage naturel
|
||||
- L'IA génère le code et affiche un aperçu en temps réel
|
||||
|
||||
Ce mode « dialoguer pour coder » transforme la programmation : au lieu « d'écrire du code », vous « décrivez vos besoins ». Vous n'avez pas besoin de comprendre les détails techniques, il vous suffit d'expliquer clairement à l'IA ce que vous souhaitez, et elle transforme vos idées en un programme fonctionnel. C'est le nouveau paradigme de la programmation à l'ère de l'IA — le <strong>Vibe Coding</strong>.
|
||||
:::
|
||||
|
||||
|
||||
|
||||
Après avoir saisi vos besoins et cliqué sur le bouton **Développement full-stack**, vous pouvez observer en temps réel le processus complet de création de la page. En général, le temps de préparer un café suffit pour que la page soit générée automatiquement !
|
||||
|
||||
```
|
||||
Crée-moi un jeu de Snake :
|
||||
1. Contrôler le serpent avec les flèches directionnelles
|
||||
2. Le serpent grandit et le score augmente quand il mange la nourriture
|
||||
3. Le jeu se termine si le serpent heurte un mur ou son propre corps
|
||||
4. Il faut des boutons Démarrer et Recommencer
|
||||
5. L'interface doit être simple et élégante
|
||||
```
|
||||
|
||||
|
||||
|
||||
Une fois la génération terminée, vous verrez apparaître à droite une interface navigable. Vous pouvez faire défiler la page ou cliquer sur le bouton 🧭 en haut à droite pour passer en mode plein écran.
|
||||
|
||||
> Les boutons de gauche à droite ont les fonctions suivantes : le bouton flèche ouvre la barre latérale de l'historique des conversations, le bouton crayon crée une nouvelle conversation, le bouton flèche circulaire rafraîchit la page, le bouton boussole bascule en mode plein écran, le bouton Download télécharge le projet, le bouton <> bascule vers la vue code, et le bouton Publish publie le projet.
|
||||
|
||||
|
||||
|
||||
Si vous souhaitez consulter le code source de la page, cliquez sur l'icône de code en haut à droite pour voir le code complet.
|
||||
|
||||
|
||||
|
||||
::: tip 🌐 Explorer d'autres outils de programmation par IA
|
||||
|
||||
Outre z.ai, nous vous recommandons également d'essayer les plateformes suivantes :
|
||||
|
||||
| Outil | Adresse | Caractéristiques |
|
||||
|------|---------|-----------------|
|
||||
| **Google AI Studio** (recommandé) | [aistudio.google.com/apps](https://aistudio.google.com/apps) | Proposé par Google, avec le modèle Gemini, idéal pour le prototypage rapide |
|
||||
| **Figma Make** | [figma.com/make](https://www.figma.com/make) | Intégré à l'outil de design, adapté aux designers pour des prototypes interactifs |
|
||||
| **Coze** | [coze.com](https://www.coze.cn) | Plateforme de création de bots IA par ByteDance, développement sans code, intégration avec Doubao, Kimi et d'autres modèles chinois |
|
||||
| **v0.dev** | [v0.dev](https://v0.dev) | Outil de génération d'UI par Vercel, génère des composants React fonctionnels à partir d'une description |
|
||||
| **Bolt.new** | [bolt.new](https://bolt.new) | Plateforme de développement full-stack par StackBlitz, génère et déploie des applications web complètes |
|
||||
| **Lovable** | [lovable.dev](https://lovable.dev) | Spécialisé dans les applications React de haute qualité, avec intégration GitHub et déploiement en un clic |
|
||||
| **Replit Agent** | [replit.com](https://replit.com) | IDE en ligne avec assistant de programmation IA, supporte plusieurs langages et collaboration en temps réel |
|
||||
|
||||
Pour en savoir plus sur la comparaison détaillée des outils de programmation en ligne, consultez notre lecture complémentaire : [Comparaison de 7 plateformes Vibe Coding](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
|
||||
:::
|
||||
|
||||
### 2.2 Ce que la programmation conversationnelle peut et ne peut pas faire
|
||||
|
||||
Cette section se concentre sur une question précise : lorsque vous dépendez uniquement d'une IA conversationnelle, sans écrire aucune ligne de code, jusqu'où pouvez-vous réellement aller ?
|
||||
|
||||
En pratique, une conclusion relativement stable est la suivante : elle peut vous aider à réaliser quelque chose de « petit mais complet », mais la notion de « suffisant » reste à votre appréciation à chaque étape.
|
||||
|
||||
#### Plus performant pour les applications « petites et claires »
|
||||
|
||||
À partir de l'exemple du Snake ci-dessus, vous avez déjà observé un schéma typique : tant que vous pouvez décrire clairement l'interface et les interactions, l'IA peut généralement, en quelques tours de conversation, assembler une page web complète, navigable et jouable.
|
||||
|
||||
Ce type de tâche présente souvent plusieurs caractéristiques communes :
|
||||
|
||||
- Périmètre clair : une page web, un outil interne simple, un petit jeu
|
||||
- Résultat visible : vous pouvez immédiatement vérifier dans le navigateur si cela fonctionne comme prévu
|
||||
- Correction directe : en cas de problème, vous pouvez le signaler dans la conversation suivante et demander une correction (en copiant l'erreur ou en envoyant une capture d'écran à l'IA)
|
||||
|
||||
Dans ces limites, vous pouvez considérer l'IA conversationnelle comme un « développeur assistant » efficace. Il vous suffit d'affiner et de corriger les besoins à chaque tour en langage naturel pour obtenir rapidement un prototype utilisable.
|
||||
|
||||
**Taux de réussite de l'IA pour les petits projets :**
|
||||
<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
|
||||
|
||||
#### Les grands projets nécessitent une « vision de flux »
|
||||
|
||||
Dès que vous dépassez le cadre des applications petites et claires, espérer qu'une IA termine un système complexe de bout en bout en quelques conversations atteint vite ses limites. Les grands projets impliquent souvent un backend, une base de données, l'intégration de services tiers, ainsi que des questions de permissions, de sécurité, de concurrence et de nombreuses règles métier, avec pour objectif de livrer un système complet intégré aux opérations existantes, et non une simple page web.
|
||||
|
||||
Dans ce cas, l'approche la plus raisonnable n'est pas de tout jeter à l'IA d'un coup, mais de commencer par cartographier clairement le flux global : quelles sont les étapes clés, quelles sont les entrées/sorties et les changements d'état à chaque étape, quels nœuds sont les plus sensibles en termes de performance et de sécurité. Ensuite, sur la base de ce diagramme de flux, séparer les étapes relativement indépendantes et les confier à l'IA conversationnelle pour générer des interfaces, des modules, des scripts et des tests.
|
||||
|
||||
Avec les capacités actuelles, l'IA est plus performante pour accélérer une série de petites étapes, tandis que vous (ou votre équipe) décidez comment les découper, les enchaîner, et vous chargez de l'architecture, de l'intégration système et de la maintenance.
|
||||
|
||||
#### La différence entre « écrire » et « utiliser »
|
||||
|
||||
À première vue, l'IA semble capable de tout faire, mais dans la pratique, jusqu'où ces résultats sont-ils réellement utilisables ?
|
||||
|
||||
Une référence utile est la suivante :
|
||||
|
||||
::: warning ⚠️ Guide des scénarios d'utilisation
|
||||
|
||||
- **Prototype / Démo / Outil interne** : très adapté pour confier à l'IA la première version, puis itérer les détails vous-même.
|
||||
- **Produit grand public** : nécessite généralement un investissement continu de la part d'ingénieurs sur l'architecture, l'abstraction, les performances et la maintenance.
|
||||
- **Systèmes critiques / fortement réglementés (paiement, contrôle des risques, santé, etc.)** : à ce stade, il ne faut pas « déployer directement après génération » ; un processus strict de revue et de test est indispensable.
|
||||
:::
|
||||
|
||||
À l'heure actuelle, vous pouvez relativement sereinement considérer l'IA comme un partenaire efficace pour les démos et les outils internes : tant que vous êtes prêt à tester, itérer et poser des questions supplémentaires (« c'est faux ici, corrige et explique pourquoi »), la qualité globale au niveau prototype et outil interne est généralement suffisante et pertinente.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
|
||||
{ title: 'Premier contact', description: 'Développement express en 60 secondes' },
|
||||
{ title: 'Projet pratique', description: 'Créer un Snake IA-native' },
|
||||
{ title: 'Explorer et créer', description: 'Réinventer le jeu' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Pratique : votre première application IA-native
|
||||
|
||||
Revenons à la pratique. Dans la partie précédente, nous avons rapidement créé un prototype jouable de Snake avec l'IA, et nous avons compris ce que l'IA peut et ne peut pas faire. Nous allons maintenant apprendre à utiliser les techniques de base du <strong>vibe coding</strong> pour créer un jeu de Snake <strong>moderne</strong> version IA-native. Nous allons faire en sorte que le serpent mange des caractères textuels au lieu de haricots. Enfin, le jeu générera un poème d'après les mots mangés, puis dessinera une image.
|
||||
À travers ce cas concret, vous comprendrez le concept fondamental de ce nouveau mode de programmation : comment exprimer clairement vos besoins en langage naturel.
|
||||
|
||||
### 3.1 Snake IA-native
|
||||
|
||||
Au début, nous pouvons dialoguer avec le modèle de la manière la plus simple possible, ce qui nous aidera à obtenir rapidement un prototype de produit. Nous pouvons saisir directement dans la boîte de dialogue :
|
||||
|
||||
> **💡 Exemple de prompt :** Crée-moi un jeu de Snake
|
||||
>
|
||||
> 
|
||||
|
||||
> **💡 Exemple de prompt :** Crée-moi un jeu de Snake qui supporte :
|
||||
>
|
||||
> 1. Je peux manger différents mots, ils seront collectés dans une boîte
|
||||
> 
|
||||
|
||||
> **💡 Exemple de prompt :** Crée-moi un jeu de Snake qui supporte :
|
||||
>
|
||||
> 1. Je peux manger différents mots, ils seront collectés dans une boîte
|
||||
> 2. Quand le serpent a mangé 8 mots, le LLM doit créer un poème à partir de ces mots, et nous pouvons le remixer selon nos besoins.
|
||||
> 3. Une fois le poème terminé, l'étape suivante créera automatiquement une image basée sur ce poème.
|
||||
>
|
||||
> 
|
||||
|
||||
Notez que pendant le développement, vous pouvez rencontrer des problèmes : boutons sans réaction, erreurs lors de l'utilisation de fonctionnalités, comportement inattendu, ou interface qui ne correspond pas au design attendu.
|
||||
|
||||
Dans ce cas, vous devez poser des questions supplémentaires au modèle pour l'aider à résoudre ces problèmes imprévus.
|
||||
|
||||
|
||||
|
||||
### 3.2 Ajouter de nouvelles fonctionnalités au jeu
|
||||
|
||||
Une fois les fonctionnalités de base terminées, vous pouvez essayer d'ajouter des nouveautés à votre programme ! Si vous trouvez que le fait que le serpent mange des mots ou des caractères est un peu ennuyeux, vous pouvez faire manger des mots de différentes couleurs au serpent et changer sa couleur en conséquence.
|
||||
|
||||
Vous pouvez également ajouter des effets spéciaux au processus de « mangeage », ou introduire des « mots magiques » qui déclenchent des effets — par exemple en augmentant la vitesse ou la taille du serpent. Une autre idée est de faire générer un poème et une image par le modèle à chaque fois que le serpent mange un mot, plutôt que d'attendre qu'il en mange huit.
|
||||
|
||||
Si cela vous semble trop difficile, vous pouvez demander directement au modèle de langage de l'aide ! Il peut fournir des suggestions créatives pour rendre votre jeu plus amusant. Essayez !
|
||||
|
||||
```
|
||||
1. Mécanique "Les mots déverrouillent des mondes"
|
||||
Chaque fois que le serpent mange un mot, le LLM fait une association poétique (par exemple, "arbre" → "forêt", "ombrage"), et le modèle d'image génère instantanément une petite œuvre d'art pour ce mot. Ces images s'assemblent progressivement en un panorama unique créé par le joueur.
|
||||
|
||||
2. Jouabilité "Puzzle poétique"
|
||||
Chaque mot mangé par le serpent déclenche la génération d'un vers court par le LLM et une illustration par le modèle d'image. Ces vers et images se combinent comme un puzzle pour former, à la fin de la partie, un poème et un tableau collaboratifs avec l'IA.
|
||||
|
||||
3. "Mots magiques" et "Branches narratives"
|
||||
Des "mots magiques" spéciaux (par exemple, "vent", "nuit", "rêve") ne déclenchent pas seulement de la poésie, mais changent aussi l'ambiance ou le thème — transformant le style de l'image générée en nocturne, tempête ou ambiance onirique.
|
||||
|
||||
4. "Génération en temps réel"
|
||||
Après chaque mot, le LLM génère une ligne de dialogue ou de description, un NPC dans le jeu peut "parler" au joueur, ou l'environnement change en conséquence.
|
||||
|
||||
5. "Créer et partager"
|
||||
Les joueurs peuvent sauvegarder et partager leurs poèmes et images créés par l'IA à la fin de la session.
|
||||
|
||||
6. "Snake par phrase" — mode inversé
|
||||
Le LLM donne un vers ou une énigme, le joueur doit guider le serpent pour manger les mots dans le bon ordre pour reconstituer la phrase.
|
||||
|
||||
7. "Niveaux thématiques" et "Sélection de style"
|
||||
Au début, le joueur choisit un thème (par exemple, "conte de fées", "science-fiction", "poésie Tang"), et le LLM ainsi que le modèle d'image adaptent les mots, le style poétique et les effets visuels en conséquence.
|
||||
|
||||
8. "Co-création en direct"
|
||||
Quand un mot spécial est mangé, le LLM peut inviter le joueur à saisir une phrase ou à choisir un style, puis l'IA génère les vers et illustrations correspondants.
|
||||
|
||||
9. "Easter eggs IA" et "Succès"
|
||||
Certaines combinaisons de mots sont identifiées par le LLM comme des thèmes spéciaux, déclenchant des vers et illustrations rares.
|
||||
|
||||
10. "Histoire qui grandit"
|
||||
Au fil de la croissance du serpent, le LLM génère un poème narratif continu, et le modèle d'image crée un long parchemin panoramique.
|
||||
```
|
||||
|
||||
De plus, nous pouvons demander au LLM de générer directement un prompt de niveau projet. Dans la section précédente, nous n'avons écrit nous-mêmes que le prompt du Snake. Maintenant, essayons de demander au modèle de générer un prompt avec un cadre d'ensemble et un chemin de réalisation (vous pouvez utiliser z.ai directement).
|
||||
|
||||
Si vous souhaitez apprendre à écrire de meilleurs prompts, consultez [l'annexe sur le Prompt Engineering](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering).
|
||||
|
||||
> Je veux que l'IA génère un jeu de Snake en page web, avec un prompt plus complet pour un résultat plus impressionnant et amusant. Génère le prompt correspondant. L'objectif actuel : créer un jeu de Snake avec la fonctionnalité de génération de poèmes à partir de mots mangés, incluant un module de génération d'images.
|
||||
|
||||
La réponse de z.ai ressemblera à ceci :
|
||||
|
||||
|
||||
|
||||
Nous pouvons utiliser ce prompt en mode développement full-stack pour régénérer le projet :
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
|
||||
{ title: 'Premier contact', description: 'Développement express en 60 secondes' },
|
||||
{ title: 'Projet pratique', description: 'Créer un Snake IA-native' },
|
||||
{ title: 'Explorer et créer', description: 'Réinventer le jeu' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
### 3.3 Essayer de créer d'autres mini-jeux
|
||||
|
||||
Outre le Snake, nous pouvons laisser libre cours à notre imagination.
|
||||
|
||||
Créer tout ce que nous voulons, même essayer de tout casser ! Puis recommencer à zéro !
|
||||
|
||||
```
|
||||
1. Galerie d'art IA
|
||||
Description : une galerie en ligne présentant des œuvres d'art générées par IA, avec upload, partage et commentaires.
|
||||
Fonctionnalités : comptes utilisateurs, upload et affichage d'œuvres, système de notation, navigation par catégorie, intégration d'outils de génération IA.
|
||||
|
||||
2. Archives de jeux rétro
|
||||
Description : un site rendant hommage aux jeux classiques, avec historique, guides de jeu et jeux rétro jouables en ligne.
|
||||
|
||||
3. Suivi de vie durable
|
||||
Description : un site aidant à suivre et réduire l'empreinte carbone grâce à des conseils écologiques et des défis communautaires.
|
||||
|
||||
4. Assistant culinaire virtuel
|
||||
Description : une plateforme de cuisine assistée par IA avec recommandations de recettes personnalisées et instructions étape par étape.
|
||||
|
||||
5. Plateforme de découverte musicale underground
|
||||
Description : un service de streaming musical centré sur les artistes indépendants et émergents.
|
||||
|
||||
6. Gestionnaire de tâches minimaliste
|
||||
Description : un outil de gestion de tâches avec une esthétique zen, axé sur la simplicité et l'efficacité.
|
||||
|
||||
7. Atelier d'écriture science-fiction
|
||||
Description : une plateforme offrant des outils créatifs et de l'inspiration aux écrivains de SF, incluant la construction d'univers et le développement de personnages.
|
||||
|
||||
8. Graphe de connaissances personnel
|
||||
Description : un outil permettant de construire un réseau de connaissances personnel, avec visualisation et connexion d'idées.
|
||||
|
||||
9. Jardin botanique virtuel
|
||||
Description : une encyclopédie interactive des plantes où les utilisateurs peuvent explorer le monde végétal et créer un jardin virtuel.
|
||||
|
||||
10. Arène de défis de programmation
|
||||
Description : une plateforme de compétition en ligne pour programmeurs avec des défis de différents niveaux de difficulté.
|
||||
```
|
||||
|
||||
Et aussi... si vous aimez les jeux, essayons ensemble d'en créer !
|
||||
|
||||
```
|
||||
1. RPG monde ouvert 3D
|
||||
2. FPS arène multijoueur
|
||||
3. Échecs IA et multijoueur
|
||||
4. Mahjong en ligne multijoueur
|
||||
5. Jeu de stratégie au tour par tour
|
||||
6. Course automobile contre la montre
|
||||
7. Jeu de cartes à collectionner
|
||||
8. Battle royale (vue 2D du dessus)
|
||||
9. Jeu d'horreur survival (vue à la première personne)
|
||||
10. Jeu de rythme musical (3D)
|
||||
```
|
||||
|
||||
## 📚 Devoir
|
||||
|
||||
<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🎯 Devoir du chapitre : réaliser vos premiers mini-jeux IA-native</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Dans cette section, vous avez suivi les étapes du processus complet : de la « génération conversationnelle d'un Snake » à la « compréhension des principes de conception d'un mini-jeu IA-native ». Le devoir ci-dessous vous aide à transformer cette compréhension en compétence réelle.
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Reproduire intégralement le jeu de Snake IA-native</strong>
|
||||
<ul>
|
||||
<li>Au minimum : le serpent peut se déplacer, sa longueur et son score changent quand il mange de la « nourriture », et le jeu se termine s'il heurte un mur ou son propre corps.</li>
|
||||
<li>Lors de la reproduction, pratiquez en envoyant à l'IA le phénomène erroné + le message d'erreur + l'extrait de code clé, en demandant une correction en « mode débutant ».</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>(Optionnel) Créer 1 mini-jeu ou démo IA-native original</strong>
|
||||
<ul>
|
||||
<li>Il peut s'agir de n'importe quel gameplay léger autour de texte, images, musique, rythme, etc.</li>
|
||||
<li>L'important n'est pas la qualité visuelle, mais de pouvoir expliquer clairement : en quoi l'IA vous a concrètement aidé, et ce qu'elle a résolu de « difficile ou fastidieux à faire manuellement ».</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
Voilà pour le tutoriel complet ! Il vous faudra peut-être <strong>4 heures</strong> pour terminer tout le contenu et construire votre propre jeu de Snake. Ne vous pressez pas — explorez, expérimentez et profitez du processus. Si vous rencontrez des concepts difficiles à comprendre, n'hésitez pas à consulter les annexes ci-dessous.
|
||||
</p>
|
||||
</el-card>
|
||||
|
||||
## Annexes
|
||||
|
||||
<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">Navigation des annexes</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Voici quelques concepts de base liés à ce chapitre : si vous rencontrez des questions comme « qu'est-ce que le frontend ? » ou « qu'est-ce que le Vibe Coding ? », vous pouvez revenir ici à tout moment.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>Annexe 1 : Avons-nous besoin de connaissances en développement frontend ?</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Comprendre la place du frontend dans une application, savoir ce qui est « visible ».</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>Annexe 2 : Qu'est-ce que le Vibe Coding exactement ?</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Comprendre les principes du « développement conversationnel » et comment collaborer avec l'IA.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" style="margin-top: 10px;">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>Annexe 3 : Contexte des modèles</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Clarifier les concepts souvent entendus mais facilement confondus comme la « longueur de contexte ».</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>Annexe 4 : Capacité de suivi des instructions</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Comprendre pourquoi le modèle « ne comprend pas » parfois, et comment écrire plus clairement.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 12px; font-size: 12px; color: #909399;">
|
||||
Astuce : vous pouvez utiliser Ctrl/⌘+F pour rechercher des mots-clés, ou copier les passages que vous ne comprenez pas et les donner à l'IA en lui demandant de les réexpliquer « de façon compréhensible pour un vrai débutant ».
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## <span id="appendix-1">[Annexe 1 : Avons-nous besoin de connaissances en développement frontend ?](#appendix-nav)</span>
|
||||
|
||||
::: tip 💡 En résumé
|
||||
Vous n'avez pas besoin de savoir coder, mais connaître les concepts de base vous aidera à mieux décrire vos besoins à l'IA.
|
||||
:::
|
||||
|
||||
<el-row :gutter="16" style="margin: 20px 0;">
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">👁️</span>
|
||||
<span style="font-weight: bold;">Frontend</span>
|
||||
<el-tag type="success" size="small">Visible</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
Tout ce que l'utilisateur peut <strong>voir et cliquer</strong>
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>Titres, textes, images de la page</li>
|
||||
<li>Boutons, champs de saisie, menus déroulants</li>
|
||||
<li>Interface de jeu, animations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">⚙️</span>
|
||||
<span style="font-weight: bold;">Backend</span>
|
||||
<el-tag type="info" size="small">Invisible</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
Traitement des données sur le serveur
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>Stockage des scores</li>
|
||||
<li>Vérification de connexion</li>
|
||||
<li>Attribution des niveaux</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### La trinité du frontend
|
||||
|
||||
Le navigateur construit les pages à partir de trois types de « code » :
|
||||
|
||||
<el-tabs type="border-card" style="margin: 20px 0;">
|
||||
<el-tab-pane label="🏗️ HTML - La structure">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Rôle :</strong> Définir <strong>quels éléments</strong> se trouvent sur la page</p>
|
||||
<p><strong>Analogie :</strong> Le plan de la maison (où sont les murs, les portes, les fenêtres)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code><button>Cliquez ici</button>
|
||||
<h1>Titre</h1>
|
||||
<img src="photo.png"></code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="🎨 CSS - Le style">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Rôle :</strong> Contrôler <strong>l'apparence</strong> des éléments</p>
|
||||
<p><strong>Analogie :</strong> La décoration de la maison (couleurs, matériaux, agencement)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button {
|
||||
background: blue;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="⚡ JavaScript - Le comportement">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Rôle :</strong> Rendre la page <strong>interactive</strong></p>
|
||||
<p><strong>Analogie :</strong> L'électricité de la maison (la réponse au clic)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button.onclick = () => {
|
||||
alert('Vous avez cliqué !')
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
### Comment le code devient-il une page ?
|
||||
|
||||
Quand vous ouvrez une page web, le navigateur traite les trois types de code dans l'ordre :
|
||||
|
||||
**1. HTML — Définir la structure de la page**
|
||||
Le navigateur analyse d'abord le HTML pour comprendre quels éléments se trouvent sur la page (titres, paragraphes, images, boutons, etc.) et leurs relations hiérarchiques.
|
||||
|
||||
**2. CSS — Appliquer les styles**
|
||||
Ensuite, le navigateur applique les règles CSS pour ajouter des styles aux éléments : couleurs, tailles, positions, espacements, etc.
|
||||
|
||||
**3. JavaScript — Ajouter de l'interactivité**
|
||||
Enfin, le code JavaScript est exécuté pour rendre la page « vivante » : répondre aux clics, soumettre des formulaires, lire des animations, etc.
|
||||
|
||||
**4. Affichage de la page**
|
||||
La combinaison de ces trois éléments produit la page web que vous voyez finalement.
|
||||
|
||||
### Les frameworks frontend modernes : de HTML à React/Vue
|
||||
|
||||
HTML, CSS et JavaScript constituent la « trinité » du développement frontend ; ils sont la base de toutes les pages web. Mais quand les pages deviennent complexes, les utiliser directement devient difficile : le code est dur à maintenir, il y a beaucoup de travail répétitif, et la synchronisation des données est problématique.
|
||||
|
||||
Les <strong>frameworks frontend modernes</strong> (React, Vue, Angular) s'appuient sur HTML/CSS/JS pour rendre le développement plus efficace :
|
||||
|
||||
**1. HTML/CSS/JS (stade de base)**
|
||||
Manipulation directe des éléments de la page, adapté aux pages simples. Mais quand le volume de code augmente, toute la logique est mélangée, ce qui rend la maintenance difficile.
|
||||
|
||||
**2. jQuery (stade de transition)**
|
||||
Simplifie les manipulations du DOM, rendant le code plus concis. Mais il faut toujours gérer manuellement l'état de la page et mettre à jour manuellement les éléments correspondants quand les données changent.
|
||||
|
||||
**3. React/Vue (stade moderne)**
|
||||
Adopte une conception par composants et pilotée par l'état :
|
||||
- **Composants** : découper la page en modules indépendants et réutilisables (boutons, cartes, barres de navigation)
|
||||
- **Pilotage par l'état** : quand les données changent, le framework met à jour automatiquement l'interface correspondante
|
||||
|
||||
::: tip 💡 Pour comprendre simplement
|
||||
- **HTML/CSS/JS** = matériaux de base (briques, ciment, acier)
|
||||
- **React/Vue** = charpente de construction (fournit les normes et outils pour bâtir)
|
||||
|
||||
À l'ère de la programmation assistée par IA, vous n'avez pas besoin de maîtriser tous les détails des frameworks ; il vous suffit de comprendre leurs concepts de base pour pouvoir utiliser le langage naturel pour demander à l'IA de générer du code.
|
||||
:::
|
||||
|
||||
### Dans le Vibe Coding
|
||||
|
||||
**Point clé : vous n'avez pas besoin de coder, juste de savoir décrire.**
|
||||
|
||||
Une fois les concepts frontend compris, vous pouvez décrire vos besoins à l'IA ainsi :
|
||||
|
||||
> « Crée une page de classement avec React, avec la liste des scores à droite, et en cliquant sur une ligne, affiche les détails du joueur en dessous, dans un style épuré et moderne. »
|
||||
|
||||
Pour approfondir les bases du frontend (HTML, CSS, JavaScript), consultez [l'annexe sur les fondamentaux du Web](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive). Pour comprendre l'évolution historique du frontend, consultez [l'annexe sur l'évolution des frameworks frontend](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks).
|
||||
|
||||
## <span id="appendix-2">[Annexe 2 : Qu'est-ce que le Vibe Coding exactement](#appendix-nav)</span>
|
||||
|
||||
> 💡 Qu'est-ce que le Vibe Coding ? L'informaticien [Andrej Karpathy](https://karpathy.ai/) (co-fondateur d'OpenAI, ancien responsable IA chez Tesla) a introduit le terme **vibe coding** en février 2025. Ce concept désigne une méthode de programmation reposant sur les LLM, <strong>permettant aux développeurs de générer du code fonctionnel en fournissant des descriptions en langage naturel plutôt qu'en écrivant manuellement du code.</strong>
|
||||
|
||||
|
||||
|
||||
Littéralement, le Vibe Coding peut être compris comme une façon de « développer en parlant ». Son changement fondamental est le suivant : vous n'avez plus besoin d'écrire du code ligne par ligne, de vérifier la syntaxe, de déboguer ; vous décrivez simplement ce que vous voulez en langage naturel, par exemple :
|
||||
|
||||
« J'ai besoin d'une page de connexion, avec un champ pour le numéro de téléphone et un champ pour le code de vérification. »
|
||||
« Après une connexion réussie, rediriger vers la page d'accueil et afficher le nom d'utilisateur en haut à droite. »
|
||||
« Donne-moi un simple jeu de Snake contrôlable au clavier avec les flèches directionnelles. »
|
||||
Les grands modèles de langage (LLM) traduisent automatiquement ces descriptions en code réellement exécutable et génèrent les pages, la logique et les structures de données correspondantes. Après avoir vu le résultat, vous exprimez vos modifications en langage naturel : « rends le bouton plus grand », « change le fond en sombre », « enregistre le score et affiche un classement », et l'IA continue à ajuster l'implémentation selon vos demandes.
|
||||
|
||||
Dans ce mode, vous n'avez pas besoin d'apprendre un langage de programmation avant de coder ; vous concentrez votre énergie sur : décrire clairement ce que vous voulez faire, évaluer le résultat « est-ce que ça correspond ? », puis proposer de nouvelles modifications. L'IA se charge de traduire ces idées de haut niveau en implémentation concrète, réduisant ainsi considérablement le travail de codage mécanique et répétitif.
|
||||
|
||||
Pour plus de détails sur le Vibe Coding : [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
|
||||
|
||||
Pour plus de contenu de Karpathy : [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
|
||||
|
||||
### Comment faire semblant d'être un maître du Vibe Coding
|
||||
|
||||
En réalité, dans un vrai processus de vibe coding, on n'utilise généralement pas de prompts très complexes. Peut-être qu'au début on doit fournir un prompt global précis et modérément complexe pour l'ensemble du programme, mais ensuite, à chaque étape, vous n'aurez probablement besoin que de ce type de prompts :
|
||||
|
||||
```
|
||||
"Il y a un bug dans le code, corrige-le."
|
||||
"Je ne veux pas un bout de code, donne-moi le code corrigé complet."
|
||||
"Ton code a toujours des problèmes."
|
||||
"Corrige à nouveau et donne-moi le code corrigé complet."
|
||||
"Ça marchait tout à l'heure, pourquoi ça ne marche plus ?"
|
||||
"Tu n'as pas compris ce que je voulais ? Ne modifie pas mon code d'origine."
|
||||
"N'ajoute pas de fonctionnalités de débogage."
|
||||
"Ne fais pas ce que je ne t'ai pas demandé."
|
||||
"Où est la fonctionnalité que je t'ai demandée ?"
|
||||
"Tu ne me comprends pas ?"
|
||||
"Je veux juste une fonction."
|
||||
"Je t'ai dit de te référer à mon code précédent."
|
||||
"N'ajoute pas de commentaires inutiles."
|
||||
"Ne modifie pas la logique de base de mon code."
|
||||
"Aide-moi à modifier le code."
|
||||
"Modifie en te basant sur mon code..."
|
||||
"Ne change pas mes noms de variables !!!"
|
||||
"Ne change pas les noms de fonctions originaux !"
|
||||
"Ne touche pas à mes variables."
|
||||
"N'ajoute pas de fonctionnalités supplémentaires."
|
||||
"Ne génère pas juste un squelette, génère le code complet."
|
||||
```
|
||||
|
||||
Cela peut paraître exagéré, mais en réalité, ce sont les types de prompts que nous utilisons couramment dans notre travail quotidien. En raison de la <strong>limite de longueur de contexte</strong> des grands modèles de langage, ou parfois de leur <strong>capacité de suivi des instructions</strong> qui n'est pas très forte, le modèle peut oublier des contenus discutés plus tôt dans la conversation. En vibe coding, nous préférons les modèles à contexte long et ceux avec une forte capacité de suivi des instructions.
|
||||
|
||||
## <span id="appendix-3">[Annexe 3 : Contexte des modèles](#appendix-nav)</span>
|
||||
|
||||
Le contexte d'un modèle peut être compris comme la mémoire à court terme de l'IA. Il désigne tout le contenu textuel que le modèle peut « voir » et « retenir » au cours d'une conversation ou d'une tâche, y compris vos questions précédentes, les instructions système, les documents de référence, etc.
|
||||
|
||||
C'est précisément grâce au contexte que l'IA peut comprendre que vous poursuivez sur le sujet précédent, et mener des conversations tour par tour qui semblent cohérentes et naturelles. Sans contexte, chaque phrase serait pour le modèle une question entièrement nouvelle, incapable de savoir ce que vous avez dit avant.
|
||||
|
||||
Chaque modèle a sa propre longueur de contexte effective (context window), généralement mesurée en tokens (une unité correspondant approximativement à des « fragments de mots »). Les modèles actuels se situent généralement entre 32k et 128k tokens. Plus le contexte est long, plus le modèle peut « lire » de contenu en une seule fois.
|
||||
|
||||
Quand le contenu que vous saisissez approche ou dépasse la limite de contexte du modèle, plusieurs phénomènes courants peuvent apparaître :
|
||||
|
||||
- Le modèle commence à oublier des détails ou des informations clés dans les longs textes
|
||||
- La conversation dévie progressivement de l'objectif initial
|
||||
- Les contenus cités deviennent incohérents entre différentes questions
|
||||
|
||||
Ces phénomènes ne signifient pas que le modèle est soudainement « devenu bête », mais résultent naturellement lorsque la capacité de contexte est saturée ou presque saturée.
|
||||
|
||||
Dans la pratique, nous souhaitons un contexte aussi long que possible, tout en étant conscients que :
|
||||
|
||||
- Plus le contexte est long, plus les ressources de calcul sont importantes
|
||||
- Le coût d'appel augmente en conséquence
|
||||
|
||||
Il faut donc trouver un équilibre entre laisser le modèle voir suffisamment de contenu et maîtriser les coûts et l'efficacité.
|
||||
|
||||
## <span id="appendix-4">[Annexe 4 : Capacité de suivi des instructions](#appendix-nav)</span>
|
||||
|
||||
La capacité de suivi des instructions désigne la capacité du modèle, après avoir compris vos instructions, à les exécuter de manière précise et complète. Cela inclut non seulement la capacité à répondre à des questions, mais aussi à accomplir des tâches selon un format, un style et des étapes spécifiés.
|
||||
|
||||
Un modèle avec une forte capacité de suivi des instructions présente généralement les caractéristiques suivantes :
|
||||
|
||||
- Il produit le contenu dans la quantité demandée
|
||||
- Il couvre tous les éléments spécifiés
|
||||
- Il respecte le format et le ton spécifiés
|
||||
- Il ne fait pas d'extensions inutiles
|
||||
|
||||
En pratique, une forte capacité de suivi des instructions est très importante car elle améliore la stabilité, la reproductibilité et facilite l'intégration système.
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Continuer l'apprentissage"
|
||||
description="À partir de l'« expérience ludique », nous vous recommandons de poursuivre vers le développement local et la pratique produit."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
---
|
||||
title: 'Debutant 1 : A l ere de l IA, parler c est programmer'
|
||||
description: 'Creer un jeu du serpent AI-native par conversation, puis reutiliser la methode pour construire ton propre mini jeu ou demo.'
|
||||
---
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/appendix-a-product-thinking/images
|
||||
File diff suppressed because it is too large
Load Diff
+359
@@ -0,0 +1,359 @@
|
||||
# Comparaison de sept outils de programmation AI
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
Face à la multitude d'outils de programmation AI, lequel est le plus adapté à vos besoins ? Ce chapitre propose une évaluation comparative approfondie de 7 plateformes Web Vibe Coding grand public — Lovable, Replit, Z.ai et autres — à travers une tâche pratique commune : développer un jeu « Snake + Poésie AI ». Nous comparerons la convivialité pour les débutants, la maîtrise du code et la facilité de déploiement pour vous aider à choisir rapidement le meilleur outil d'assistance au développement.
|
||||
|
||||
---
|
||||
|
||||
# 1. Construire un jeu Snake avec Vibe Coding : Tutoriel complet
|
||||
|
||||
Cet article présente une pratique de développement émergente — le « Vibe Coding (codage ambiance) » — qui utilise l'intelligence artificielle pour accélérer le processus de construction d'applications.
|
||||
|
||||
Nous présenterons successivement les concepts fondamentaux du Vibe Coding, expliquerons ce qu'est un AI Agent, et proposerons des méthodes pratiques pour écrire des prompts. Enfin, nous construirons de zéro un jeu « Snake » complet, et comparerons en détail plusieurs plateformes Vibe Coding pour vous aider à choisir la combinaison d'outils la plus adaptée.
|
||||
|
||||
## Vous apprendrez :
|
||||
|
||||
- **Qu'est-ce que le Vibe Coding :** comprendre sa définition, son flux de travail et ses avantages clés.
|
||||
- **Le rôle de l'AI Agent :** comprendre le fonctionnement d'un AI Agent et sa différence avec les programmes traditionnels.
|
||||
- **Comment écrire de bons prompts :** maîtriser l'écriture de prompts clairs et spécifiques pour obtenir de meilleurs résultats.
|
||||
- **Outils Vibe Coding :** découvrir un ensemble de plateformes AI de programmation et de design.
|
||||
- **Comparaison de plateformes :** évaluer et comparer les forces et faiblesses de 7 plateformes AI Agent du point de vue d'un débutant.
|
||||
- **Outils UI / UX :** apprendre à intégrer Figma, Mastergo et autres outils UI/UX dans le flux de travail global.
|
||||
|
||||
## 1. Introduction
|
||||
|
||||
Dans les cours précédents, nous avons toujours utilisé le modèle de développement full-stack de z.ai pour accomplir les tâches de programmation.
|
||||
|
||||
Mais nous sommes-nous demandé : son cœur est en réalité un « AI Agent » (différent de l'AI chatbot classique, et bien plus intelligent) ? Parce qu'il ne fait pas que dialoguer avec vous — il peut réfléchir (quand vous lui donnez une tâche, il élabore d'abord un plan), et aussi prendre des initiatives (comme appeler une recherche web, exécuter des commandes système, ouvrir des pages web, etc.). Nous détaillerons cela plus tard.
|
||||
|
||||
## 1. Qu'est-ce que le Vibe Coding ?
|
||||
|
||||
Le Vibe Coding est une nouvelle approche de développement logiciel qui utilise l'IA pour accélérer le processus de développement d'applications. Ce n'est pas un remplacement de la programmation traditionnelle, mais un mode de programmation plus « conversationnel ». Ce concept a été proposé par le chercheur en IA Andrej Karpathy : dans ce flux de travail, les développeurs n'écrivent plus le code ligne par ligne, mais s'appuient principalement sur la direction d'un AI Agent pour générer, optimiser et déboguer des applications.
|
||||
|
||||
L'idée centrale du Vibe Coding est de passer d'une approche **« centrée sur le code (code-first) »** à une approche **« centrée sur l'intention (intent-first) »**. Vous n'avez plus besoin de concevoir à partir de la première ligne de code, mais vous décrivez le résultat souhaité en langage naturel.
|
||||
|
||||
Le flux de travail typique du Vibe Coding est un cycle itératif :
|
||||
|
||||
- **Décrire l'objectif :** décrivez d'abord en une phrase ou un paragraphe la fonctionnalité que vous souhaitez implémenter, par exemple : « Crée un jeu Snake simple avec un backend Python qui peut générer de la poésie. »
|
||||
- **L'IA génère le code :** l'AI Agent analyse votre besoin, génère le code initial, incluant la structure de base, les pages frontend et la logique backend.
|
||||
- **Exécuter et observer :** exécutez le code généré, vérifiez s'il fonctionne comme prévu, et identifiez les bugs ou les lacunes.
|
||||
- **Retourner et itérer :** s'il y a des erreurs ou des résultats insatisfaisants, continuez à donner des instructions dans la conversation, par exemple : « Le serpent se déplace trop lentement, accélère-le », ou « Le fichier `.env` ne lit pas correctement la clé API, corrige le code backend. »
|
||||
- **Répéter les étapes ci-dessus :** itérez continuellement dans le cycle « description → génération → exécution → retour » jusqu'à ce que l'application atteigne un état satisfaisant.
|
||||
|
||||
### Avantages principaux du Vibe Coding :
|
||||
|
||||
- **Réduction de la barrière d'entrée :** permet aux designers, entrepreneurs, étudiants et autres personnes sans expérience en programmation de participer au développement d'applications via le langage naturel.
|
||||
- **Prototypage rapide :** le temps entre l'idée et le produit minimum viable (MVP) est considérablement réduit.
|
||||
- **Amélioration de l'efficacité :** traitement automatique d'une grande quantité de travail de codage répétitif et mécanique (comme le code boilerplate), permettant aux développeurs de se concentrer sur la conception architecturale et l'abstraction des problèmes.
|
||||
- **Favorise l'expérimentation :** encourage une approche « produire d'abord rapidement, puis perfectionner », facilitant les essais de nouvelles idées et fonctionnalités.
|
||||
|
||||
## 2. Qu'est-ce qu'une plateforme Vibe Coding en ligne (Web-based) ?
|
||||
|
||||
Dans ce test pratique, vous remarquerez que les outils évalués sont divisés en deux catégories : **Web-based (plateformes en ligne)** et **IDE (environnements de développement locaux)**.
|
||||
|
||||
Bien que leur cœur soit le même — utiliser l'IA pour vous aider à écrire du code — ils diffèrent considérablement en termes d'expérience utilisateur et de scénarios d'utilisation :
|
||||
|
||||
### Plateformes Vibe Coding en ligne (Web-based)
|
||||
|
||||
**Outils représentatifs :** Lovable, Replit, Z.ai, v0
|
||||
|
||||
C'est comme un appartement hôtel meublé « prêt à emménager ».
|
||||
|
||||
- **Pas de configuration d'environnement :** vous n'avez pas besoin de vous soucier de l'environnement Python, de la version Node.js, ni de l'installation des dépendances. Ouvrez le navigateur, entrez l'URL, et vous pouvez commencer à coder immédiatement.
|
||||
- **Prévisualisation et déploiement en un clic :** une fois le code généré, la plateforme affiche généralement automatiquement le résultat dans la fenêtre de droite. Une fois terminé, un seul clic génère un lien partageable avec vos amis.
|
||||
- **Scénarios adaptés :**
|
||||
- **Validation rapide d'idées (MVP) :** vous avez une idée en tête et voulez passer une demi-heure à voir si c'est faisable.
|
||||
- **Débutants :** vous ne voulez surtout pas être découragé par des erreurs d'environnement complexes, vous voulez juste expérimenter le plaisir de la programmation AI.
|
||||
- **Applications légères :** créer une page d'outil simple, un petit jeu ou une page de présentation personnelle.
|
||||
|
||||
### AI IDE (environnement de développement local)
|
||||
|
||||
**Outils représentatifs :** Cursor, Trae, VS Code + plugins AI
|
||||
|
||||
C'est comme une maison en propriété « entièrement rénovée ».
|
||||
|
||||
- **Puissantes capacités locales :** il s'exécute sur votre ordinateur, peut accéder directement à tous vos fichiers locaux et exploiter la puissance de calcul de votre machine.
|
||||
- **Intégration transparente avec les flux professionnels :** adapté aux projets volumineux, vous pouvez installer librement divers plugins, vous connecter à des bases de données locales, et effectuer des débogages complexes.
|
||||
- **Scénarios adaptés :**
|
||||
- **Développement de projets professionnels :** projets commerciaux nécessitant une maintenance à long terme et une structure complexe.
|
||||
- **Personnalisation approfondie :** besoin d'un contrôle extrême sur les détails du code, ou nécessité de s'intégrer profondément avec les flux de travail locaux existants (comme Git, Docker).
|
||||
- **Confidentialité des données :** le code reste entièrement en local, plus conforme aux normes de sécurité de certaines entreprises.
|
||||
|
||||
**En résumé :** si vous découvrez tout juste la programmation AI, ou si vous voulez juste créer rapidement un petit projet pour vous amuser, les **plateformes en ligne** sont un excellent point de départ. Si vous êtes un développeur professionnel, ou si votre projet devient de plus en plus complexe, un **IDE local** vous offrira un plafond plus élevé.
|
||||
|
||||
---
|
||||
|
||||
## 3. Qu'est-ce qu'un AI Agent ?
|
||||
|
||||
### Qu'est-ce qu'un AI Agent ?
|
||||
|
||||
Un AI Agent est un système logiciel capable de percevoir son environnement, de prendre des décisions et d'agir de manière autonome pour atteindre un objectif spécifique. Comparé aux logiciels traditionnels qui suivent des instructions fixes et des flux uniques, l'AI Agent est plus flexible et adaptatif.
|
||||
|
||||
Voici quelques caractéristiques clés qui distinguent un AI Agent d'un programme traditionnel :
|
||||
|
||||
- **Autonomie :** l'AI Agent possède un haut degré d'indépendance. Les programmes traditionnels nécessitent généralement une intervention humaine étape par étape, tandis que l'Agent peut décider de lui-même de la prochaine action en fonction de l'objectif.
|
||||
- **Perception et mémoire :** l'Agent collecte des données depuis l'environnement (par exemple, réponses API, données de capteurs, entrées utilisateur, etc.) et conserve le contexte grâce à la « mémoire », permettant de réutiliser l'expérience dans les actions ultérieures et d'améliorer continuellement les résultats.
|
||||
- **Rationalité et orientation objectif :** l'Agent analyse et planifie autour de l'objectif donné, choisissant la séquence d'actions la plus appropriée pour optimiser les « indicateurs de performance ».
|
||||
- **Utilisation d'outils :** une caractéristique majeure des AI Agents modernes est la capacité d'appeler des outils externes, au-delà de la simple « génération de texte ». Par exemple, il peut naviguer sur le web, exécuter du code, interroger des bases de données, envoyer des emails, etc. — c'est un « cerveau qui orchestre des outils ».
|
||||
|
||||
Analogie pour comprendre :
|
||||
|
||||
- Un **programme traditionnel** est comme une calculatrice. Vous lui donnez des nombres et des opérateurs, il n'exécute le calcul que lorsque vous appuyez sur un bouton.
|
||||
- Un **assistant AI** est comme un assistant humain. Vous lui demandez « Trouve-moi un restaurant à proximité », il vous donne les résultats de recherche et liste les options, mais c'est vous qui prenez la décision finale.
|
||||
- Un **AI Agent** est plutôt comme une équipe de recherche automatisée. Vous donnez simplement un objectif de haut niveau (comme « Planifie-moi un voyage au Japon »), et il décompose les tâches, cherche des informations en ligne, réserve des vols et hôtels (via API), organise l'itinéraire, et vous livre le résultat — le tout presque sans intervention de votre part sur les détails.
|
||||
|
||||
---
|
||||
|
||||
# 2. À propos de la rédaction des prompts
|
||||
|
||||
## 1. Mieux vaut-il écrire un prompt parfait d'un coup ou procéder par étapes ?
|
||||
|
||||
Beaucoup de gens sont tentés de tout expliquer en un seul prompt pour « créer une application full-stack complète ». En fait, les outils actuels sont suffisamment puissants pour potentiellement produire un résultat décent en une seule fois. Mais en termes d'expérience globale et de taux de réussite, décomposer le travail en petites étapes et itérer par phases donne souvent de meilleurs résultats, et réduit le risque de se retrouver coincé dans une impasse « impossible à modifier ».
|
||||
|
||||
> **Petit conseil :** au lieu d'espérer « tout faire en une fois », décomposez le grand objectif en petites tâches exécutables (To-do).
|
||||
> Par exemple, au lieu de dire directement « build me a Snake game », décomposez en :
|
||||
> « 1. D'abord, crée le frontend d'un jeu Snake »,
|
||||
> « 2. Ensuite, implémente un backend pour enregistrer les scores »,
|
||||
> « 3. Enfin, connecte le frontend et le backend ».
|
||||
> Cela permet à l'IA de comprendre plus précisément vos besoins et de produire un résultat plus fiable.
|
||||
|
||||
## 2. Plus c'est clair, mieux c'est
|
||||
|
||||
- En Vibe Coding, les prompts que vous écrivez sont aussi importants que le code que vous écrivez. Plus le prompt est clair et spécifique, plus le résultat sera proche de ce que vous avez en tête.
|
||||
- Définir clairement les objectifs et les contraintes dès le début réduit le nombre de modifications ultérieures — ce qui fait gagner du temps et économise les crédits et les coûts.
|
||||
|
||||
---
|
||||
|
||||
# 3. Panorama des outils (Vibe Coding / Outils UIUX)
|
||||
|
||||
## 1. Plateformes AI Agent
|
||||
|
||||
| **Nom** | **Plateforme** |
|
||||
| ------------------------------------------ | ------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
|
||||
## 2. Plateformes AI UIUX
|
||||
|
||||
| **Nom** | **Plateforme** |
|
||||
| ------------------------------------- | -------------------- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[FIgma](https://www.figma.com/)** | Web-based, PC Plugin |
|
||||
|
||||
---
|
||||
|
||||
# 4. Tutoriel pratique (Vibe Coding + UI combiné)
|
||||
|
||||
1. Dans la fenêtre de chat de la plateforme Vibe Coding de votre choix, entrez la description du programme que vous souhaitez.
|
||||
Exemple :
|
||||
|
||||
> Merci de construire une application web Snake simple avec frontend et backend.
|
||||
>
|
||||
> 1. Frontend
|
||||
>
|
||||
> - Page 1 : Page de jeu
|
||||
> - Contrôler le déplacement du serpent avec le clavier.
|
||||
> - Le serpent ne mange pas de la nourriture, mais des mots anglais.
|
||||
> - La barre latérale affiche les mots collectés et leur nombre.
|
||||
> - Après la fin du jeu, les mots collectés sont conservés et continuent dans la nouvelle partie.
|
||||
> - Page 2 : Page de poésie (Make Poem)
|
||||
> - Afficher la même liste de mots que la page de jeu (données cohérentes).
|
||||
> - Fournir un bouton pour envoyer les mots collectés au backend afin de générer un poème.
|
||||
> - Après génération du poème, les mots utilisés sont retirés de la liste ou leur compteur est décrémenté.
|
||||
>
|
||||
> * Ajouter une navigation simple pour basculer entre les pages Game et Make Poem.
|
||||
> * S'assurer que les mots collectés sont visibles sur les deux pages.
|
||||
>
|
||||
> 2. Backend
|
||||
>
|
||||
> - Fournir une API backend qui reçoit les mots collectés et retourne un poème.
|
||||
> - Utiliser l'API DeepSeek pour générer la poésie.
|
||||
> - Stocker la clé API dans un fichier `.env`, et ignorer ce fichier dans `.gitignore`.
|
||||
|
||||
2. Entrez votre clé API DeepSeek. (Vous pouvez l'obtenir sur [https://platform.deepseek.com/](https://platform.deepseek.com/))
|
||||
1. La clé API du LLM est utilisée pour appeler le grand modèle dans votre propre projet. Étant une information sensible, elle ne peut pas être publique et doit être écrite séparément dans un fichier de configuration.
|
||||
**Pourquoi utiliser un fichier `.env` et ne pas le pousser sur GitHub ?**
|
||||
- Le fichier `.env` est spécifiquement conçu pour stocker des **clés ou mots de passe** (comme la clé API DeepSeek).
|
||||
- Si ce fichier est poussé sur GitHub, tout le monde pourra voir votre clé et l'utiliser frauduleusement.
|
||||
- Pour des raisons de sécurité, nous devons déclarer dans le fichier `.gitignore` d'ignorer `.env`, pour que Git ne le suive pas.
|
||||
- Ainsi, votre projet peut toujours utiliser ces clés localement, sans les divulguer dans le dépôt.
|
||||
|
||||
3. Après avoir consulté le résultat généré, si vous trouvez des erreurs ou des points à modifier, vous pouvez directement entrer vos demandes de modification dans la fenêtre de chat.
|
||||
4. Si vous n'êtes pas satisfait du design de la page, vous pouvez également choisir de redessiner l'interface dans Figma ou Mastergo, puis transmettre les idées de design à l'Agent.
|
||||
|
||||
- **Exemple**
|
||||
|
||||
> Merci de concevoir une **application Web à deux pages** nommée _Word-Snake_.
|
||||
>
|
||||
> - **Page Game :**
|
||||
> - Le serpent est contrôlé par le clavier.
|
||||
> - Le serpent mange des mots anglais, pas de la nourriture classique.
|
||||
> - Le panneau latéral affiche les mots collectés et leur nombre.
|
||||
> - Après la fin du jeu, l'inventaire des mots n'est pas vidé, il continue dans la nouvelle partie.
|
||||
> - **Page Make Poem :**
|
||||
> - Afficher le même inventaire partagé de mots.
|
||||
> - L'utilisateur sélectionne certains mots et clique sur le bouton **Generate Poem**.
|
||||
> - Ces mots sont envoyés au backend, où l'API DeepSeek génère un poème.
|
||||
> - Après génération du poème, les mots utilisés sont retirés de l'inventaire.
|
||||
> - **Navigation :** basculer entre les deux pages via des onglets simples ou un menu en haut.
|
||||
> - **État partagé :** s'assurer que les mots collectés restent toujours synchronisés et visibles sur les deux pages.
|
||||
|
||||
- **Exemple de résultat**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Comparaison des plateformes AI Agent (comment choisir la meilleure combinaison pour un projet simple)
|
||||
|
||||
Différentes plateformes Vibe Coding ont chacune leurs particularités et leur flux de travail. Nous avons testé la même exigence « jeu Snake avec API DeepSeek » sur plusieurs plateformes, et évalué leurs forces et faiblesses du point de vue d'un débutant. Voici le résumé.
|
||||
|
||||
## 1. Critères de comparaison
|
||||
|
||||
1. **Objectif**
|
||||
Construire une application web Snake intégrée à l'API DeepSeek.
|
||||
2. **Détails du jeu**
|
||||
1. Le jeu génère de la poésie via l'API DeepSeek LLM.
|
||||
2. Le serpent mange des mots anglais, les mots collectés sont conservés après la fin du jeu et continuent dans la nouvelle partie. Les mêmes mots peuvent être collectés plusieurs fois et sont comptés séparément.
|
||||
3. Quand un poème est généré, les mots utilisés sont retirés de l'inventaire.
|
||||
|
||||
3. **Fonctionnalités indispensables**
|
||||
1. Une page frontend exécutable, incluant le jeu Snake (contrôle clavier, rendu Canvas).
|
||||
2. Mécanisme de collecte de mots (les mots apparaissent sur le plateau, quand le serpent les mange, la liste latérale se met à jour).
|
||||
3. Persistance de l'inventaire des mots entre les parties.
|
||||
4. Un backend utilisant l'API DeepSeek (si pas de clé API, peut d'abord retourner des poèmes simulés).
|
||||
5. Un bouton « Générer un poème » : au clic, appelle le backend, affiche le poème, et met à jour l'inventaire en fonction de l'utilisation.
|
||||
6. Support du fichier `.env` pour la clé API, et exclusion via `.gitignore` pour éviter la fuite de la clé.
|
||||
|
||||
4. **Bonus**
|
||||
1. L'utilisateur peut choisir quels mots utiliser pour générer le poème.
|
||||
2. UX conviviale (par exemple, barre latérale affichant clairement la liste de mots, mise en page raisonnable de la zone de poésie).
|
||||
3. Commentaires dans le code pour les débutants, expliquant la logique clé.
|
||||
|
||||
## 2. Comparaison des résultats de codage
|
||||
|
||||
### 1. Lovable (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** Lovable excelle dans l'intégration et la collaboration. Il automatise des tâches comme la connexion à la base de données Supabase, rendant le processus de configuration du projet très fluide. Il suffit de décrire les besoins du projet pour que l'Agent connecte les différents services et construise la structure de base.
|
||||
- **Utilisateurs ciblés :** Pour les débutants qui essaient le Vibe Coding pour la première fois, Lovable est un choix très convivial. Il simplifie la complexité de la connexion multi-services, vous permettant de vous concentrer sur les prompts et l'itération plutôt que sur la configuration de l'environnement. Grâce à une automatisation poussée, vous obtenez rapidement un prototype fonctionnel.
|
||||
- **Processus de prompts :**
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :** relativement élevé, mais si vous avez un email universitaire, vous pouvez bénéficier d'une réduction de 50% via la vérification étudiante.
|
||||
|
||||
|
||||
### 2. Cursor (IDE)
|
||||
|
||||
- **Type de plateforme :** Application desktop (PC)
|
||||
- **Caractéristiques principales et flux de travail :** Cursor est un IDE propriétaire intégrant des capacités AI, supportant Windows, macOS et Linux. Il intègre directement la génération de code, la réécriture intelligente et la recherche dans la base de code dans l'environnement de développement. Comparé aux outils Web, il offre une expérience plus proche du développement local traditionnel. Étant un environnement local, les configurations varient d'un ordinateur à l'autre, ce qui peut occasionner des problèmes liés à l'environnement. L'avantage est que le projet est sur votre machine, pas besoin de télécharger ou configurer un environnement d'exécution supplémentaire — Cursor gère de nombreuses étapes fastidieuses pour vous.
|
||||
- **Utilisateurs ciblés :** Pour les utilisateurs ayant déjà des bases en programmation, Cursor est un environnement très puissant et familier. Mais pour les débutants complets, il faut comprendre soi-même la structure du projet, la gestion des dépendances et l'organisation des fichiers — la courbe d'apprentissage est plus raide. Plus adapté aux développeurs qui souhaitent intégrer un assistant AI dans leur flux de codage traditionnel.
|
||||
- **Processus de prompts :**
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :**
|
||||
|
||||
|
||||
### 3. Z.ai (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** L'utilisation de Z.ai est assez directe, mais un défi notable : vous devez **copier-coller manuellement le code généré**. La plateforme elle-même manque d'une fenêtre de prévisualisation en temps réel, ce qui rend difficile de voir immédiatement le résultat de l'exécution du code.
|
||||
- **Utilisateurs ciblés :** Cette plateforme requiert une utilisation assez « manuelle ». L'absence d'automatisation signifie que vous devez interagir directement avec le code, ce qui est un exercice formateur pour ceux qui veulent comprendre en profondeur le contenu généré par l'IA. Mais les copier-coller fréquents posent des problèmes d'efficacité et de risque d'erreur. Plus adapté à ceux qui veulent voir « le code brut généré par l'IA » plutôt que ceux qui recherchent une expérience en un clic.
|
||||
- **Processus de prompts :**
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :**
|
||||
|
||||
|
||||
### 4. Replit (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** Replit est un environnement de développement et de déploiement en ligne tout-en-un. Dans le navigateur, vous pouvez écrire du code, exécuter des programmes et générer des URL d'accès en ligne. Avant de commencer à coder, il affiche un plan d'action clair ; il propose aussi un éditeur visuel où vous pouvez modifier l'UI directement dans la fenêtre de prévisualisation, et le code source se met à jour automatiquement. Cela vous permet de vérifier en permanence si la sortie de l'IA correspond à vos attentes, réduisant considérablement les allers-retours de modification.
|
||||
|
||||
|
||||
|
||||
- **Utilisateurs ciblés :** Replit est très convivial pour les débutants. Il simplifie le cycle complet du codage au déploiement, sans nécessiter de configuration supplémentaire de serveur ou de service d'hébergement. Les fonctionnalités de collaboration sont également solides, adaptées pour les projets entre camarades de classe ou pour demander de l'aide à distance.
|
||||
- **Processus de prompts :** Pendant la construction, l'IA n'a pas compris le besoin du premier coup — environ 3 itérations ont été nécessaires pour obtenir le résultat idéal.
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :**
|
||||
|
||||
|
||||
### 5. Minimax (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** Minimax prend généralement plus de temps pour exécuter les tâches. Son processus inclut souvent : l'IA découvre et corrige automatiquement les erreurs, ce qui rend l'ensemble plus lent, voire un peu chaotique. Pour ce projet, l'Agent génère généralement d'abord un plan détaillé, puis construit étape par étape le backend, la base de données et la logique frontend.
|
||||
- **Utilisateurs ciblés :** Comme il exécute automatiquement les tests et corrige les erreurs, la consommation de temps et de tokens est importante, mais vous pouvez clairement voir comment l'IA localise et résout les problèmes — ce qui est très valuable d'un point de vue apprentissage.
|
||||
- **Processus de prompts :**
|
||||
|
||||
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :** La version gratuite ne permet probablement pas de mener à bien un projet complexe du début à la fin, il est donc recommandé de passer à la version payante pour garantir que le projet puisse être construit complètement.
|
||||
|
||||
|
||||
### 6. Trae (IDE)
|
||||
|
||||
- **Type de plateforme :** Application desktop (PC)
|
||||
- **Caractéristiques principales et flux de travail :** En tant qu'application desktop, Trae est généralement plus performant et plus réactif que les outils Web. Mais il nécessite un téléchargement et une installation, ce qui peut représenter une barrière d'entrée légèrement plus élevée pour certains utilisateurs. De même, étant un environnement local, les différences de configuration et de dépendances entre les ordinateurs introduisent une certaine incertitude. L'avantage est que Trae vous aide à créer et configurer le projet localement, et vous pouvez développer et déboguer directement sur votre machine.
|
||||
- **Utilisateurs ciblés :** Plus adapté aux utilisateurs qui prévoient de faire du Vibe Coding sur le long terme et souhaitent utiliser un outil desktop dédié. Pour ceux qui veulent juste « essayer de temps en temps », ce n'est peut-être pas le choix le plus léger.
|
||||
- **Processus de prompts :**
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :** Le prix est relativement abordable, même la version gratuite suffit pour réaliser des petits projets de bonne qualité.
|
||||
|
||||
|
||||
### 7. V0 (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** V0 est un outil spécialisé dans la génération de composants UI React, fourni par Vercel. Il excelle dans la génération d'interfaces de haute qualité, prêtes pour la production. Cependant, en utilisation réelle, on rencontre des problèmes comme « difficile de trouver la vue code » ou « pas d'indication claire sur où configurer la clé API ».
|
||||
- **Utilisateurs ciblés :** V0 est très adapté aux étudiants ou designers focalisés sur le frontend et le design UI/UX. Mais ce n'est pas une solution full-stack complète — vous avez toujours besoin d'autres plateformes pour implémenter la logique backend et l'intégration API. Si votre objectif est de « construire une application complète en un seul endroit », ce n'est probablement pas le meilleur premier choix.
|
||||
- **Processus de prompts :**
|
||||
|
||||
|
||||
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
- **Prix :** Les utilisateurs gratuits peuvent construire environ 4 à 5 projets simples.
|
||||
|
||||
|
||||
## 3. Tableau comparatif récapitulatif
|
||||
|
||||
| **Plateforme** | **Avis** | **Plateforme** | **Notes** |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Très convivial pour les débutants en programmation AI, prise en main simple et fluide, un choix idéal pour démarrer. | Web-based | Complète automatiquement les connexions de services comme Supabase, réduisant les coûts de configuration. |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | Adapté aux utilisateurs ayant déjà une expérience de développement, améliore considérablement la productivité et la qualité du code. | PC | Nécessite des bases en programmation, l'environnement local demande de comprendre la structure du projet et les dépendances. |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Plus adapté aux utilisateurs avec des bases en programmation qui veulent étudier directement les détails du code généré par l'IA. | Web-based | Pas de fenêtre de prévisualisation, vérifier les résultats est plus fastidieux ; nécessite de copier-coller manuellement le code, créer des dossiers et fichiers et lancer les services manuellement. |
|
||||
| **[Replit](https://replit.com/~)** | Recommandé pour ceux qui veulent transformer rapidement une idée en service en ligne accessible. | Web-based | Développement et déploiement en ligne tout-en-un, supporte la collaboration et fournit un éditeur visuel. |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Adapté à ceux qui veulent voir le processus complet de détection et correction automatique des erreurs par l'IA et en tirer des leçons, mais globalement lent et coûteux en tokens. | Web-based | Le processus global est long, l'IA exécute plusieurs fois les tests automatiquement et corrige les erreurs. |
|
||||
| **[Trae](https://www.trae.ai/)** | Pour les utilisateurs expérimentés en programmation qui souhaitent combiner un IDE desktop et un AI Agent, c'est un outil puissant pour améliorer l'efficacité. | PC | Nécessite une installation locale et une configuration d'environnement, mais de meilleures performances, adapté aux projets Vibe Coding à long terme. |
|
||||
| **[V0](https://v0.app/)** | Optimisé pour les non-développeurs qui veulent créer rapidement des effets visuels React UI, adapté aux étudiants orientés frontend / design. | Web-based | Spécialisé dans la génération d'UI React, nécessite de collaborer avec d'autres plateformes pour le backend et la construction d'applications complètes. |
|
||||
---
|
||||
title: 'Comparatif de 7 outils de programmation IA'
|
||||
description: 'Evaluation pratique de plateformes Web de Vibe Coding avec une tache unifiee, en comparant prise en main, controle du code et deploiement.'
|
||||
---
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
# Concevoir un site web avec des Agents de design et de programmation
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
Ce chapitre montrera comment le design et le développement peuvent parfaitement collaborer grâce à l'IA. Vous jouerez le rôle de chef de produit, dirigeant un « Agent de design » pour créer le Logo, le schéma de couleurs et la mise en page, puis coordonnant un « Agent de programmation » pour transformer les maquettes visuelles en code exécutable. De l'idée créative à la mise en ligne du site, vous vivrez le flux de développement complet propulsé par l'IA, et deviendrez une équipe à vous seul.
|
||||
|
||||
---
|
||||
|
||||
# 1. Guide de démarrage
|
||||
|
||||
## 1. Présentation du tutoriel
|
||||
|
||||
Construisons un site web complet à partir de zéro en utilisant un Agent de design AI et un Agent de codage.
|
||||
|
||||
- **Agent de design** : responsable de la création du logo, de la mise en page des pages, du schéma de couleurs et d'autres éléments visuels
|
||||
- **Agent de codage** : écrit le code réel (HTML/CSS/JS etc.) en fonction des besoins et de la mise en page que vous spécifiez dans vos prompts, pour construire un site web fonctionnel
|
||||
|
||||
## 2. Agent de design et Agent de codage
|
||||
|
||||
- **Agent de design** : une IA qui génère des images, des maquettes ou des styles de design en fonction des prompts que vous fournissez.
|
||||
- Mastergo
|
||||
- Lovart
|
||||
- Figma MCP
|
||||
- **Agent de codage** : une IA qui écrit du code réel (HTML/CSS/JS etc.) en fonction des fonctionnalités et de la mise en page que vous demandez dans vos prompts.
|
||||
- Z.AI
|
||||
- Trae
|
||||
- Cursor
|
||||
- Lovable
|
||||
|
||||
---
|
||||
|
||||
# 2. Créer un Logo avec l'Agent de design
|
||||
|
||||
## 1. Éléments clés à considérer pour le design du Logo
|
||||
|
||||
Le Logo est l'un des éléments clés qui déterminent la première impression de votre site web. Pour obtenir des résultats satisfaisants de l'Agent de design AI, vous devez décrire clairement dans votre prompt le type de Logo que vous souhaitez.
|
||||
|
||||
1. **Nom de marque / Texte**
|
||||
|
||||
- Le texte qui doit apparaître dans le Logo (par exemple : titre du site, nom de marque, etc.).
|
||||
|
||||
2. **Style (humeur / atmosphère)**
|
||||
|
||||
- Le sentiment ou l'ambiance globale que le Logo doit transmettre.
|
||||
- _Exemples : minimaliste, mignon, épuré, moderne, vintage, futuriste, etc._
|
||||
|
||||
3. **Schéma de couleurs** (optionnel)
|
||||
|
||||
- Il est préférable que les couleurs du Logo correspondent au ton général du site web.
|
||||
- Vous pouvez spécifier des codes hexadécimaux précis ou des tons généraux (froids, chauds, etc.).
|
||||
- _Exemples : **`#171721`** (noir), **`#FF7130`** (orange)._
|
||||
|
||||
4. **Forme (structure / composition)**
|
||||
|
||||
- Précisez si le Logo nécessite une forme ou une composition spécifique.
|
||||
- _Exemples : texte à l'intérieur d'un cercle, combinaison icône + texte, Logo principalement basé sur une icône, etc._
|
||||
|
||||
5. **Éléments d'icône / symbole** (optionnel)
|
||||
|
||||
- Les graphiques ou symboles que vous souhaitez voir apparaître dans le Logo.
|
||||
- _Exemples : icône de livre, symbole d'éclair, graphique lié à l'IA, forme géométrique abstraite, etc._
|
||||
|
||||
## 2. Rédiger le prompt de design du Logo
|
||||
|
||||
**Exemple de prompt**
|
||||
|
||||
```
|
||||
"Merci de concevoir un Logo au style minimaliste, le nom de marque est 'My First Website'.
|
||||
Utilise le noir (#171721) et l'orange (#FF7130), et place le texte à l'intérieur d'un cercle."
|
||||
```
|
||||
|
||||
```
|
||||
"Merci de concevoir un Logo avec 'AIID' comme nom de marque.
|
||||
Le style global doit être futuriste, propre et épuré, avec le bleu et le blanc comme couleurs principales.
|
||||
Combine un graphique abstrait symbolisant l'IA avec le texte, et exporte en PNG avec fond transparent."
|
||||
```
|
||||
|
||||
## 3. Demander le design à l'Agent
|
||||
|
||||
- Saisissez le prompt ci-dessus -> comparez les plusieurs propositions de design générées par l'Agent.
|
||||
|
||||
|
||||
|
||||
## 4. Finaliser le Logo
|
||||
|
||||
- Choisissez la version que vous préférez parmi les brouillons et téléchargez-la.
|
||||
|
||||
---
|
||||
|
||||
# 3. Planifier la structure de votre site web
|
||||
|
||||
## 1. Comprendre les sections de base
|
||||
|
||||
Avant de vraiment commencer à construire le site web, il est important de planifier les menus (sections) à inclure. Le design des menus dépend de ce que vous voulez que les visiteurs voient et des actions que vous attendez d'eux.
|
||||
En général, un site web se compose généralement de sections de base comme **Home / About / Contact**.
|
||||
|
||||
## 2. Dessinez d'abord un croquis de structure (optionnel)
|
||||
|
||||
Vous pouvez d'abord écrire une structure de menu simple en fonction des objectifs du site.
|
||||
|
||||
### Menu de base
|
||||
|
||||
1. **Home**
|
||||
1. La page principale que les visiteurs voient en premier en arrivant sur le site
|
||||
2. Comprend généralement le Logo, une zone visuelle principale et un slogan ou une brève présentation
|
||||
2. **About**
|
||||
1. Présente qui vous êtes, ou le but du projet / service
|
||||
2. Portfolio personnel : présentation + bref CV
|
||||
3. Site de services : vision, objectifs et fonctionnalités clés
|
||||
3. **Contact**
|
||||
1. Coordonnées, comme email, numéro de téléphone, liens vers les réseaux sociaux, etc.
|
||||
2. Vous pouvez aussi ajouter un simple formulaire de contact
|
||||
|
||||
### Menus optionnels
|
||||
|
||||
4. **Services / Projects**
|
||||
1. Présente les services que vous offrez, ou vos projets / portfolio
|
||||
2. Généralement affiché sous forme de liste ou de cartes
|
||||
|
||||
5. **Gallery**
|
||||
1. Pour afficher des images, photos ou créations graphiques
|
||||
|
||||
6. **Blog / News**
|
||||
1. Pour publier des articles, des actualités ou un journal
|
||||
|
||||
7. **FAQ**
|
||||
1. Compile les questions fréquemment posées par les visiteurs et leurs réponses
|
||||
|
||||
## 3. Choisir un schéma de couleurs (optionnel)
|
||||
|
||||
Si vous avez déjà un Logo, ou si vous voulez utiliser une combinaison de couleurs spécifique pour le site, vous pouvez directement inclure les codes couleur dans votre prompt.
|
||||
|
||||
**Exemple :** `#171721, #872B97, #FF7130, #FF3C68`
|
||||
|
||||
Même si vous n'avez pas encore de schéma de couleurs en tête, vous pouvez trouver de l'inspiration sur des sites spécialisés ou en cherchant par mots-clés.
|
||||
|
||||
- **Sites de référence pour les couleurs**
|
||||
- https://colorhunt.co/
|
||||
- https://coolors.co/
|
||||
|
||||
|
||||
|
||||
- **Recherche de couleurs par mots-clés sur Google**
|
||||
|
||||
|
||||
|
||||
## 4. Rédiger le prompt de design du site web
|
||||
|
||||
**Exemple de prompt**
|
||||
|
||||
```
|
||||
"Merci de concevoir un site web monopage composé des sections Home, About et Contact.
|
||||
Utilise les couleurs #171721, #FF7130 et #FF3C68.
|
||||
Le style global doit être moderne et épuré."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. Concevoir le site web avec l'Agent de design
|
||||
|
||||
## 1. Saisir le prompt -> générer la maquette
|
||||
|
||||
- Écrivez dans le prompt la structure planifiée et les couleurs choisies.
|
||||
|
||||
**Exemple de prompt Mastergo**
|
||||
|
||||
|
||||
|
||||
## 2. Réviser la maquette et faire des retours
|
||||
|
||||
Vous pouvez faire des retours à l'Agent en fonction de vos besoins, par exemple :
|
||||
|
||||
- « C'est trop chargé, rends le style global plus épuré. »
|
||||
- « Change la police. »
|
||||
- « Ajuste la combinaison de couleurs. »
|
||||
- « Supprime cette section ici. »
|
||||
|
||||
|
||||
|
||||
## 3. Finaliser le design
|
||||
|
||||
Une fois que vous êtes satisfait de la maquette après plusieurs itérations, vous pouvez transformer ce design en code, pour que l'Agent de codage puisse le comprendre et continuer le travail.
|
||||
|
||||
La méthode pour convertir le design en code varie selon les plateformes, mais se fait généralement en installant et utilisant certains plugins dans la plateforme de design.
|
||||
|
||||
**Exemple Mastergo**
|
||||
|
||||
1. Ouvrez le [site des plugins Mastergo](https://mastergo.com/community/plugin), cherchez **seal**.
|
||||
|
||||
|
||||
|
||||
2. Retournez à la page de design, cliquez sur l'**icône carrée (plugin)**.
|
||||
|
||||
|
||||
|
||||
3. Sélectionnez la zone de design que vous voulez convertir en code, cliquez sur le bouton **Generate** pour générer le code.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Construire le site web avec l'Agent de codage
|
||||
|
||||
## 1. Comprendre les concepts de base de HTML/CSS/JS
|
||||
|
||||
Un site web est essentiellement composé de trois langages :
|
||||
|
||||
- **HTML (HyperText Markup Language)** -> Structure (squelette)
|
||||
- **CSS (Cascading Style Sheets)** -> Style (apparence)
|
||||
- **JavaScript (JS)** -> Fonctionnalité (interaction)
|
||||
|
||||
Ces trois éléments travaillent ensemble pour former la page web complète que nous voyons.
|
||||
|
||||
1. **🏗️ HTML (structure)**
|
||||
|
||||
- Définit « ce qui est affiché » dans la page
|
||||
- Utilisé pour placer du texte, des images, des boutons, des liens et autres éléments
|
||||
- Analogie : les **murs et la charpente** d'un bâtiment
|
||||
|
||||
**Exemple**
|
||||
|
||||
```html
|
||||
<h1>Hello!</h1>
|
||||
<p>This is my first website.</p>
|
||||
<a href="contact.html">Contact</a>
|
||||
```
|
||||
|
||||
2. **🎨 CSS (style)**
|
||||
|
||||
- Détermine « comment le contenu est affiché »
|
||||
- Contrôle la taille du texte, les couleurs, les espaces, les arrière-plans, la forme des boutons, etc.
|
||||
- Donne à HTML ses « vêtements » et son style visuel
|
||||
|
||||
**Exemple**
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: #FF7130; /* Text color */
|
||||
font-size: 36px; /* Font size */
|
||||
text-align: center; /* Center alignment */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #171721; /* Background color */
|
||||
color: white; /* Default text color */
|
||||
}
|
||||
```
|
||||
|
||||
3. **⚙️ JavaScript (JS) (fonctionnalité)**
|
||||
|
||||
- Permet à la page web d'interagir avec l'utilisateur
|
||||
- Peut implémenter des clics de bouton, des menus déroulants, des carrousels d'images, des soumissions de formulaire et autres effets dynamiques
|
||||
- Si HTML/CSS sont le squelette et l'apparence statiques, alors JS est le **cerveau** qui donne vie à la page web
|
||||
|
||||
**Exemple**
|
||||
|
||||
```javascript
|
||||
function showAlert() {
|
||||
alert("The button has been clicked!");
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<button onclick="showAlert()">Click me</button>
|
||||
```
|
||||
|
||||
## 2. Laisser l'Agent de codage générer le code
|
||||
|
||||
**Exemple de prompt**
|
||||
|
||||
```
|
||||
"Merci d'écrire le HTML et CSS pour un site web monopage contenant les sections Home, About et Contact.
|
||||
Utilise les couleurs #171721, #FF7130, #FF3C68.
|
||||
Fond noir, texte blanc."
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3. Lancer le site web
|
||||
|
||||
Une fois le code brouillon généré, l'Agent démarre généralement le projet automatiquement et affiche la page web générée.
|
||||
|
||||
Si vous avez redémarré l'Agent, ou si la page web ne s'affiche pas, vous pouvez entrer un prompt comme :
|
||||
|
||||
```
|
||||
"Please activate the project"
|
||||
```
|
||||
|
||||
Pour que l'Agent redémarre le projet et ouvre la page de prévisualisation, afin que vous puissiez voir le résultat actuel.
|
||||
|
||||
## 4. Faire des modifications simples
|
||||
|
||||
Vous pouvez continuer à affiner le brouillon via le langage naturel, par exemple :
|
||||
|
||||
- « Rends le bouton plus grand. »
|
||||
- « La police plus grasse. »
|
||||
|
||||
|
||||
|
||||
## 5. Modifier le contenu textuel du site
|
||||
|
||||
Le site web généré en première version par l'Agent contient généralement du texte de remplissage automatique. Pour le rendre plus adapté à votre cas réel, vous pouvez préparer le contenu réel à l'avance, puis demander à l'Agent de le remplacer.
|
||||
|
||||
**Exemple d'application** : mise à jour de la page About du site AIID
|
||||
|
||||
1. Écrivez d'abord le contenu que vous souhaitez afficher sur la page About. Pour faciliter la compréhension par l'Agent, vous pouvez enregistrer le contenu au format Markdown.
|
||||
|
||||
|
||||
|
||||
2. Ensuite, dites à l'Agent dans la conversation d'appliquer le contenu de ce fichier à la page spécifiée.
|
||||
|
||||
|
||||
|
||||
3. Consultez la version mise à jour après application du contenu.
|
||||
|
||||
|
||||
|
||||
## 6. Insérer des images
|
||||
|
||||
Si vous souhaitez ajouter des images spécifiques (par exemple Logo, image de fond, etc.), vous pouvez d'abord uploader les images dans le dossier du projet, puis indiquer dans votre prompt où les utiliser dans la page.
|
||||
|
||||
- **Exemple :**
|
||||
|
||||
|
||||
|
||||
- **Résultat :**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 6. Intégrer le design et le code
|
||||
|
||||
## 1. Intégrer les fichiers de design avec le code du site web (optionnel)
|
||||
|
||||
Une fois que vous avez téléchargé les fichiers de code depuis l'Agent de design, vous pouvez les déplacer dans le répertoire du projet actuel, puis demander à l'Agent de codage de fusionner le code de design avec le projet existant.
|
||||
|
||||
- **Exemple :**
|
||||
|
||||
|
||||
|
||||
- **Résultat :**
|
||||
|
||||
|
||||
---
|
||||
title: 'Construire un site avec des agents design et code'
|
||||
description: 'De l idee a la mise en ligne : piloter un agent design pour le visuel puis un agent code pour produire un site fonctionnel, avec un workflow reutilisable.'
|
||||
---
|
||||
@@ -0,0 +1,325 @@
|
||||
---
|
||||
title: "Que faire en cas d'erreur de code - Guide pratique pour poser des questions à l'IA"
|
||||
description: "Apprenez à poser efficacement des questions à l'IA pour résoudre les erreurs de développement, maîtrisez le processus standard de capture d'écran, de description et de localisation des problèmes, et faites de l'IA votre assistant de débogage."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>30 minutes</strong>'
|
||||
</script>
|
||||
|
||||
# Que faire en cas d'erreur de code
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Techniques de débogage', 'Collaboration IA', 'Résolution de problèmes', 'Outils de développement']" coreOutput="Un processus standardisé de résolution des erreurs" expectedOutput="Capable de résoudre 90 % des erreurs courantes de manière autonome">
|
||||
|
||||
À l'ère de l'IA, la façon de résoudre les erreurs a changé.
|
||||
|
||||
Vous n'avez pas besoin de mémoriser tous les types d'erreurs, de devenir un expert du débogage, ni même de comprendre ce que signifie l'erreur.
|
||||
|
||||
<strong>Vous n'avez besoin d'apprendre qu'une seule chose : comment poser des questions à l'IA.</strong>
|
||||
|
||||
Ce chapitre vous enseignera un processus de résolution <strong>du simple à l'avancé</strong> :
|
||||
|
||||
1. <strong>Première étape : Poser directement la question</strong> : décrire le phénomène + capture d'écran, poser la question en une phrase
|
||||
2. <strong>Deuxième étape : Fournir des informations supplémentaires</strong> : si cela ne résout pas le problème, ouvrir F12 pour ajouter des informations clés
|
||||
|
||||
En maîtrisant ce processus, <strong>vous pourrez résoudre 90 % des erreurs par vous-même</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Remarque
|
||||
Toutes les méthodes de ce chapitre sont basées sur l'expérience réelle avec Cursor/Trae/Claude et d'autres IDE IA, et peuvent être directement appliquées au développement quotidien.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Poser directement', description: 'Décrire le phénomène + capture d\'écran' },
|
||||
{ title: 'Compléter les infos', description: 'Ouvrir F12 pour localiser le problème' },
|
||||
{ title: 'Résolution itérative', description: 'Jusqu\'à la résolution du problème' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Principe fondamental : Capturer l'écran et poser la question à l'IA
|
||||
|
||||
::: warning Pourquoi ce chapitre est-il important ?
|
||||
|
||||
Beaucoup de débutants, face à une erreur, réagissent ainsi :
|
||||
- Panique, et se mettent à modifier le code au hasard
|
||||
- Passent une demi-heure à chercher "comment résoudre l'erreur xxx"
|
||||
- Essayent de comprendre par eux-mêmes ce que signifie l'erreur
|
||||
- Font du debug seul jusqu'à minuit
|
||||
|
||||
<strong>Tout cela est une perte de temps.</strong>
|
||||
|
||||
À l'ère de l'IA, le débogage est devenu une tâche simple :
|
||||
|
||||
```
|
||||
Voir l'erreur → Capturer l'écran → Poser la question à l'IA → Suivre les instructions de l'IA
|
||||
```
|
||||
|
||||
Vous n'avez pas besoin de comprendre l'erreur, ni de savoir déboguer, ni même de savoir où se trouve le problème.
|
||||
|
||||
<strong>Vous avez juste besoin d'apprendre comment poser la question.</strong>
|
||||
|
||||
:::
|
||||
|
||||
### 1.1 La façon la plus simple de poser une question
|
||||
|
||||
Pas besoin de modèle complexe, choisissez parmi deux méthodes :
|
||||
|
||||
**Méthode 1 : Décrire le phénomène**
|
||||
|
||||
Format : ce que vous venez de faire, ce qui apparaît maintenant
|
||||
|
||||
```
|
||||
Je viens de modifier le code de la page de connexion, maintenant la page est blanche, que faire ?
|
||||
```
|
||||
|
||||
**Méthode 2 : Capture d'écran**
|
||||
|
||||
Capturer directement la page actuelle ou le message d'erreur
|
||||
|
||||
```
|
||||
[Capture d'écran]
|
||||
|
||||
Comment résoudre cette erreur ?
|
||||
```
|
||||
|
||||
**La meilleure méthode : Description + Capture d'écran**
|
||||
|
||||
```
|
||||
Je viens de modifier le code de la page de connexion, maintenant la page est blanche.
|
||||
|
||||
[Capture d'écran]
|
||||
|
||||
Que faire ?
|
||||
```
|
||||
|
||||
**Retenez : Décrivez clairement le contexte, ajoutez une capture d'écran, et l'IA pourra vous aider à résoudre le problème plus rapidement.**
|
||||
|
||||
### 1.2 Comment bien expliquer le problème
|
||||
|
||||
Beaucoup de débutants savent qu'il faut poser des questions, mais ne savent pas comment s'exprimer. En réalité, il suffit d'expliquer clairement trois choses :
|
||||
|
||||
**1. Ce que vous venez de faire**
|
||||
|
||||
```
|
||||
Je viens de cliquer sur le bouton Enregistrer
|
||||
Je viens de modifier le code de la page de connexion
|
||||
Je viens de rafraîchir la page
|
||||
```
|
||||
|
||||
**2. Ce que vous voyez maintenant**
|
||||
|
||||
```
|
||||
La page est vide maintenant
|
||||
Le bouton ne réagit pas au clic maintenant
|
||||
Un message d'erreur s'affiche maintenant
|
||||
```
|
||||
|
||||
**3. Ce que vous voulez obtenir**
|
||||
|
||||
```
|
||||
Je veux que les données soient enregistrées avec succès
|
||||
Je veux que la page s'affiche normalement
|
||||
Je veux qu'une alerte apparaisse après le clic sur le bouton
|
||||
```
|
||||
|
||||
**Exemple complet :**
|
||||
|
||||
```
|
||||
Je viens de cliquer sur le bouton Enregistrer, la page affiche maintenant l'erreur "Échec de l'enregistrement".
|
||||
|
||||
[Capture d'écran]
|
||||
|
||||
Je veux que les données du formulaire soient enregistrées avec succès dans la base de données, que faire ?
|
||||
```
|
||||
|
||||
**Principes clés :**
|
||||
- Décrivez dans un langage simple, sans jargon technique
|
||||
- Suivez l'ordre chronologique : ce que vous avez fait d'abord, puis ce qui s'est passé
|
||||
- Exprimez vos attentes pour que l'IA sache ce que vous souhaitez
|
||||
|
||||
## 2. Première étape : Décrire directement le phénomène
|
||||
|
||||
Face à un problème, <strong>ne vous précipitez pas pour ouvrir F12</strong>. Décrivez d'abord le phénomène, capturez la page actuelle, et montrez-le à l'IA.
|
||||
|
||||
Souvent, l'IA peut directement vous donner une solution rien qu'en voyant la capture d'écran.
|
||||
|
||||
### 2.1 Comment décrire les phénomènes courants
|
||||
|
||||
::: tip Décrivez simplement
|
||||
|
||||
**Page blanche**
|
||||
```
|
||||
La page s'ouvre mais est vide, que faire ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
**Le bouton ne réagit pas au clic**
|
||||
```
|
||||
Cliquer sur ce bouton ne produit aucun effet, pouvez-vous vérifier ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
**Les données ne s'enregistrent pas**
|
||||
```
|
||||
J'ai cliqué sur Enregistrer, les données ne sont pas sauvegardées, que faire ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
**L'affichage est incorrect**
|
||||
```
|
||||
Ce bouton est décalé, comment l'ajuster ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
**Erreur d'API**
|
||||
```
|
||||
L'appel à l'API renvoie une erreur, pouvez-vous vérifier ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 Si l'IA a résolu directement le problème
|
||||
|
||||
Félicitations, le problème est résolu ! Suivez simplement les instructions de l'IA pour modifier.
|
||||
|
||||
### 2.3 Si l'IA dit "besoin de plus d'informations"
|
||||
|
||||
C'est le moment d'ouvrir F12 et de fournir des informations clés. Voyons comment.
|
||||
|
||||
## 3. Deuxième étape : Fournir les informations clés
|
||||
|
||||
Quand l'IA indique qu'elle a besoin de plus d'informations, selon le type de problème, ouvrez F12 et capturez le contenu correspondant.
|
||||
|
||||
### 3.1 Quand faut-il fournir des informations supplémentaires ?
|
||||
|
||||
L'IA peut répondre ainsi :
|
||||
- "Veuillez ouvrir la Console pour voir s'il y a des erreurs"
|
||||
- "Capturer le panneau Network pour que je puisse voir"
|
||||
- "J'ai besoin de voir le message d'erreur spécifique"
|
||||
|
||||
À ce moment, suivez les instructions ci-dessous pour fournir des captures d'écran.
|
||||
|
||||
### 3.2 Fournir les informations de la Console (page blanche/erreur)
|
||||
|
||||
::: tip Étapes à suivre
|
||||
|
||||
**Première étape : Appuyer sur F12 pour ouvrir les outils de développement**
|
||||
|
||||
Sur Mac, c'est `Cmd+Option+I`, ou faites un clic droit sur la page et sélectionnez "Inspecter".
|
||||
|
||||
**Deuxième étape : Basculer vers l'onglet Console**
|
||||
|
||||
**Troisième étape : Capturer les messages d'erreur en rouge**
|
||||
|
||||
**Quatrième étape : Envoyer à l'IA**
|
||||
|
||||
```
|
||||
L'erreur de la Console est la suivante :
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.3 Fournir les informations Network (problème de données/erreur API)
|
||||
|
||||
::: tip Étapes à suivre
|
||||
|
||||
**Première étape : Appuyer sur F12 pour ouvrir les outils de développement**
|
||||
|
||||
**Deuxième étape : Basculer vers l'onglet Network**
|
||||
|
||||
**Troisième étape : Recommencer l'opération** (cliquer sur Enregistrer/rafraîchir la page)
|
||||
|
||||
**Quatrième étape : Trouver la requête correspondante et capturer l'écran**
|
||||
|
||||
- Regarder l'URL et le code d'état
|
||||
- Regarder le Payload (paramètres envoyés)
|
||||
- Regarder la Response (résultat retourné)
|
||||
|
||||
**Cinquième étape : Envoyer à l'IA**
|
||||
|
||||
```
|
||||
Les informations Network sont les suivantes :
|
||||
|
||||
Requête : [Capture d'écran 1]
|
||||
Paramètres : [Capture d'écran 2]
|
||||
Réponse : [Capture d'écran 3]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.4 Fournir les informations Elements (problème de style)
|
||||
|
||||
::: tip Étapes à suivre
|
||||
|
||||
**Première étape : Clic droit sur l'élément → "Inspecter"**
|
||||
|
||||
Les outils de développement se positionneront automatiquement sur cet élément.
|
||||
|
||||
**Deuxième étape : Capturer le panneau Styles**
|
||||
|
||||
**Troisième étape : Envoyer à l'IA**
|
||||
|
||||
```
|
||||
Le style de l'élément est le suivant :
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 4. Troisième étape : Itérer jusqu'à la résolution
|
||||
|
||||
### 4.1 Les pratiques inefficaces
|
||||
|
||||
Ces pratiques vous font perdre du temps :
|
||||
|
||||
Voir une erreur et paniquer, se mettre à modifier le code au hasard
|
||||
Passer une demi-heure à chercher une solution en ligne
|
||||
Essayer de comprendre chaque erreur par soi-même
|
||||
Faire du debug seul jusqu'à minuit
|
||||
|
||||
### 4.2 Les pratiques efficaces
|
||||
|
||||
Suivez ce processus :
|
||||
|
||||
D'abord, décrire directement le phénomène et capturer l'écran pour poser la question
|
||||
Quand l'IA dit qu'elle a besoin de plus d'informations, ouvrir F12 pour compléter
|
||||
Suivre les suggestions pour modifier le code
|
||||
Après modification, tester, et si le problème persiste, continuer à capturer et poser la question
|
||||
|
||||
## 5. Résumé : Processus complet
|
||||
|
||||
```
|
||||
Rencontrer un problème
|
||||
↓
|
||||
Décrire directement le phénomène + capture d'écran
|
||||
↓
|
||||
Envoyer à l'IA : "Que faire ?"
|
||||
↓
|
||||
L'IA résout directement ?
|
||||
↓ Oui
|
||||
Suivre les instructions de l'IA
|
||||
↓
|
||||
Tester si le problème est résolu
|
||||
↓
|
||||
↓ Non / L'IA a besoin de plus d'informations
|
||||
Ouvrir F12, fournir les informations clés
|
||||
↓
|
||||
Renvoyer à l'IA
|
||||
↓
|
||||
Répéter jusqu'à résolution
|
||||
```
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/appendix-c-consumer-scenarios/images
|
||||
@@ -0,0 +1,642 @@
|
||||
---
|
||||
title: "Inspiration pour scénarios de consommation B2C"
|
||||
description: "Ce document recense les directions créatives d'application des grands modèles LLM dans les scénarios de consommation B2C, couvrant des domaines tels que le style de vie, l'accompagnement émotionnel, les loisirs, le développement personnel, les interactions sociales, etc., afin de servir de référence aux développeurs d'applications IA grand public."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'Environ <strong>4 heures</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// Pool de thèmes pour chaque scénario - accent sur les sensations, l'ambiance, les suggestions psychologiques
|
||||
const topicPool = {
|
||||
'lifestyle': [
|
||||
{ title: 'Assistant de réveil rituel matinal', desc: 'Générer un rituel matinal personnalisé selon la météo, l\'agenda et l\'humeur, pour bien commencer chaque journée' },
|
||||
{ title: 'Créateur d\'ambiance pour célibataires', desc: 'Concevoir des solutions d\'ambiance intérieure pour les personnes vivant seules : éclairage, musique, diffuseur d\'huiles essentielles' },
|
||||
{ title: 'Générateur de programme cocooning week-end', desc: 'Recommander la combinaison parfaite selon l\'humeur du moment : film + snacks + décoration d\'ambiance' },
|
||||
{ title: 'Radio apaisante du soir', desc: 'Générer des histoires douces, des guidages de méditation, une radio personnelle pour s\'endormir' },
|
||||
{ title: 'Chasseur d\'inspiration esthétique du quotidien', desc: 'Découvrir la beauté dans les petites choses du quotidien, générer des suggestions esthétiques et des guides rituels' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'Confident nocturne', desc: 'Réceptacle émotionnel disponible 24h/24, accueillant sans jugement toutes les confidences' },
|
||||
{ title: 'Accompagnateur de guérison post-rupture', desc: 'Offrir une présence douce, des conseils de guérison et un exutoire émotionnel pendant les moments difficiles' },
|
||||
{ title: 'Coach de respiration anti-anxiété', desc: 'Percevoir l\'anxiété, guider des exercices de respiration et de méditation en pleine conscience' },
|
||||
{ title: 'Mentor de reconstruction de la confiance en soi', desc: 'Aider à reconstruire l\'estime de soi et le sentiment de valeur grâce à des dialogues positifs et des suggestions psychologiques' },
|
||||
{ title: 'Analyse intelligente du journal émotionnel', desc: 'Analyser le journal émotionnel, découvrir les schémas émotionnels, offrir des perspectives chaleureuses et des conseils' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'Maître du jeu immersif (murder mystery)', desc: 'Jouer le rôle du maître du jeu, créer une ambiance mystérieuse, faire avancer l\'intrigue' },
|
||||
{ title: 'NPC sensible dans un monde ouvert', desc: 'Des NPC avec une vraie personnalité, qui se souviennent de l\'histoire du joueur et créent des liens émotionnels authentiques' },
|
||||
{ title: 'Génération de contenu podcast personnalisé', desc: 'Générer un podcast exclusif selon les centres d\'intérêt, aussi naturel qu\'une conversation entre amis' },
|
||||
{ title: 'Équipe d\'ambiance pour concert virtuel', desc: 'Créer une atmosphère live pour les concerts en ligne : interactions en temps réel, soutien, rendu d\'ambiance' },
|
||||
{ title: 'Partenaire de co-création de fiction interactive', desc: 'Co-créer une histoire avec le lecteur, chaque choix influence la direction du monde narratif' }
|
||||
],
|
||||
'growth': [
|
||||
{ title: 'Témoin de croissance personnelle', desc: 'Enregistrer les trajectoires de développement, offrir encouragements et rétrospectives aux moments clés' },
|
||||
{ title: 'Coach ludifié de formation d\'habitudes', desc: 'Transformer la formation d\'habitudes ennuyeuses en une aventure ludique' },
|
||||
{ title: 'Appariement de partenaires d\'apprentissage', desc: 'Trouver des partenaires d\'apprentissage partageant les mêmes centres d\'intérêt, s\'encourager mutuellement et partager les progrès' },
|
||||
{ title: 'Découvreur de petites joies quotidiennes', desc: 'Aider à découvrir les petites beautés de la vie, cultiver la gratitude et un état d\'esprit positif' },
|
||||
{ title: 'Simulateur d\'expériences de vie', desc: 'Simuler différents choix de vie, explorer les possibilités d\'une réalité parallèle' }
|
||||
],
|
||||
'social': [
|
||||
{ title: 'Générateur de sujets brise-glace', desc: 'Fournir des sujets intéressants lors d\'événements sociaux, dissiper la gêne et rapprocher les gens' },
|
||||
{ title: 'Styliste d\'ambiance pour publications sociales', desc: 'Générer des textes élégants pour les réseaux sociaux à partir de photos et de l\'humeur' },
|
||||
{ title: 'Planificateur d\'ambiance pour rendez-vous', desc: 'Concevoir un plan d\'ambiance complet pour les rendez-vous : lieu, sujets de conversation et surprises' },
|
||||
{ title: 'Animateur de réunions à distance', desc: 'Animer les réunions en ligne, organiser des jeux et guider les interactions' },
|
||||
{ title: 'Assistant de gestion d\'énergie sociale', desc: 'Aider les introvertis à gérer leur énergie sociale et à trouver un rythme social confortable' }
|
||||
],
|
||||
'creative': [
|
||||
{ title: 'Kit d\'urgence anti-panne d\'inspiration', desc: 'Fournir des étincelles d\'inspiration inattendues en cas de blocage créatif' },
|
||||
{ title: 'Guide d\'exploration du style personnel', desc: 'Aider à découvrir un style personnel unique, du vestimentaire à l\'expression' },
|
||||
{ title: 'Consultant esthétique pour journal et bulletins', desc: 'Fournir des suggestions esthétiques de mise en page, couleurs et contenu créatif' },
|
||||
{ title: 'Guide d\'ambiance photographique', desc: 'Fournir des conseils de photographie et de retouche selon le contexte et l\'ambiance souhaitée' },
|
||||
{ title: 'Adaptateur musique-humeur', desc: 'Recommander la combinaison musicale parfaite selon l\'humeur et le contexte du moment' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'Guide d\'exploration urbaine à pied', desc: 'Explorer la ville comme un local, découvrir des lieux cachés et authentiques' },
|
||||
{ title: 'Génération de journal de voyage émotionnel', desc: 'Transformer les photos et sentiments de voyage en un récit de voyage poétique et des souvenirs' },
|
||||
{ title: 'Compagnon pour voyageurs solitaires', desc: 'Offrir compagnie, conseils et sentiment de sécurité aux voyageurs solo' },
|
||||
{ title: 'Aperçu d\'ambiance de destination', desc: 'Vivre une expérience immersive de la destination avant le départ, se mettre dans l\'ambiance' },
|
||||
{ title: 'Guide d\'ambiance photographique de voyage', desc: 'Guider pour prendre des photos de voyage pleines d\'histoires selon le contexte et la lumière' }
|
||||
],
|
||||
'health': [
|
||||
{ title: 'Réveilleur de motivation sportive', desc: 'Offrir juste ce qu\'il faut d\'encouragement et de motivation quand l\'envie de bouger n\'est pas là' },
|
||||
{ title: 'Cuisine inspiration alimentation saine', desc: 'Générer des recettes saines réconfortantes selon l\'humeur et les ingrédients disponibles' },
|
||||
{ title: 'Optimisateur d\'ambiance pour la qualité du sommeil', desc: 'Créer une ambiance de sommeil optimale de l\'environnement au psychologique' },
|
||||
{ title: 'Guide de perception corporelle', desc: 'Guider l\'attention sur les signaux du corps, établir la connexion corps-esprit' },
|
||||
{ title: 'Assistant rappel de self-care', desc: 'Rappeler de s\'arrêter dans l\'agitation et de prendre soin de soi' }
|
||||
],
|
||||
'learning': [
|
||||
{ title: 'Guide ludifié d\'exploration des savoirs', desc: 'Transformer l\'apprentissage de connaissances ennuyeuses en une aventure d\'exploration amusante' },
|
||||
{ title: 'Partenaire de scénarios d\'apprentissage linguistique', desc: 'Jouer différents rôles, acquérir naturellement la langue dans des dialogues situationnels' },
|
||||
{ title: 'Assistant de satisfaction de la curiosité', desc: 'Répondre à toutes sortes d\'idées farfelues, satisfaire la curiosité pour le monde' },
|
||||
{ title: 'Stimulateur d\'inspiration pour notes de lecture', desc: 'Aider à organiser les réflexions de lecture, découvrir de nouveaux angles de pensée' },
|
||||
{ title: 'Créateur d\'ambiance pour le partage de connaissances', desc: 'Transformer les connaissances acquises en contenus de partage intéressants' }
|
||||
],
|
||||
'relationship': [
|
||||
{ title: 'Coach de communication en couple', desc: 'Aider à exprimer les émotions difficiles à dire, améliorer les relations intimes' },
|
||||
{ title: 'Assistant rappel d\'attention familiale', desc: 'Rappeler de prendre soin de sa famille, fournir des suggestions d\'interactions chaleureuses' },
|
||||
{ title: 'Mainteneur d\'ambiance d\'amitié', desc: 'Aider à entretenir les amitiés à distance, créer des sujets de conversation communs' },
|
||||
{ title: 'Planificateur de déclarations et surprises', desc: 'Planifier des moments inoubliables et romantiques pour les personnes importantes' },
|
||||
{ title: 'Guide d\'apaisement des conflits', desc: 'Fournir des conseils et des formulations pour apaiser l\'ambiance lors de tensions relationnelles' }
|
||||
],
|
||||
'pet': [
|
||||
{ title: 'Journal anthropomorphique de l\'animal', desc: 'Générer un journal du point de vue de l\'animal, enregistrer les moments chaleureux avec le maître' },
|
||||
{ title: 'Interprète du comportement animal', desc: 'Décoder le langage comportemental de l\'animal, approfondir le lien avec lui' },
|
||||
{ title: 'Planificateur de moments complicité animal', desc: 'Concevoir des activités créatives pour interagir avec l\'animal, renforcer la complicité' },
|
||||
{ title: 'Générateur d\'histoires souvenir animalières', desc: 'Transformer les photos et souvenirs de l\'animal en histoires chaleureuses' },
|
||||
{ title: 'Guide rassurant pour nouveaux maîtres', desc: 'Offrir une présence chaleureuse et des conseils aux nouveaux propriétaires d\'animaux' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'Assistant de conscience émotionnelle des dépenses', desc: 'Percevoir les émotions derrière les achats impulsifs, construire une vision saine de la consommation' },
|
||||
{ title: 'Motivation visuelle des objectifs d\'épargne', desc: 'Transformer les objectifs d\'épargne en progression visuelle de rêves' },
|
||||
{ title: 'Apprendre la gestion financière facilement', desc: 'Apprendre les connaissances financières de manière légère et amusante' },
|
||||
{ title: 'Apaisseur d\'anxiété financière', desc: 'Offrir soutien émotionnel et conseils pratiques face à la pression financière' },
|
||||
{ title: 'Jeu d\'expérience d\'investissement à petit montant', desc: 'Découvrir l\'investissement par le jeu, baisser la barrière d\'entrée' }
|
||||
],
|
||||
'career': [
|
||||
{ title: 'Compagnon de doute professionnel', desc: 'Offrir écoute, exploration et suggestions d\'orientation pendant les périodes de doute professionnel' },
|
||||
{ title: 'Réveilleur de sentiment d\'accomplissement au travail', desc: 'Aider à découvrir la valeur et le sens dans le travail, raviver l\'enthousiasme' },
|
||||
{ title: 'Assistant d\'ambiance sociale au travail', desc: 'Fournir des sujets de conversation légers et des suggestions d\'interaction pour le networking professionnel' },
|
||||
{ title: 'Stimulateur d\'idées d\'activité secondaire', desc: 'Stimuler des idées créatives d\'activité parallèle selon les centres d\'intérêt et compétences' },
|
||||
{ title: 'Station-service de confiance avant entretien', desc: 'Offrir préparation psychologique et encouragement avant un entretien' }
|
||||
],
|
||||
'home': [
|
||||
{ title: 'Designer d\'ambiance d\'espace intérieur', desc: 'Concevoir des solutions d\'ambiance intérieure selon l\'humeur et la saison' },
|
||||
{ title: 'Guide de transformation saisonnière du logement', desc: 'Changer la décoration intérieure au fil des saisons, garder un sentiment de fraîcheur' },
|
||||
{ title: 'Magie des petits espaces', desc: 'Créer une ambiance chaleureuse et confortable même dans les petits espaces' },
|
||||
{ title: 'Créateur de rituels du quotidien à la maison', desc: 'Créer des rituels pour les activités domestiques quotidiennes' },
|
||||
{ title: 'Compagnon psychologique du désencombrement', desc: 'Offrir soutien psychologique et conseils de décision lors du tri des affaires' }
|
||||
],
|
||||
'food': [
|
||||
{ title: 'Cuisine réconfortante pour une personne', desc: 'Concevoir des solutions culinaires simples et réconfortantes pour les personnes vivant seules' },
|
||||
{ title: 'Design d\'ambiance de table de fête', desc: 'Concevoir une mise en table rituelle pour les occasions spéciales' },
|
||||
{ title: 'Adaptateur cuisine-humeur', desc: 'Recommander des aliments et recettes adaptés selon l\'humeur du moment' },
|
||||
{ title: 'Constructeur de confiance pour débutants en cuisine', desc: 'Offrir encouragements chaleureux et recettes simples aux cuisiniers débutants' },
|
||||
{ title: 'Guide d\'ambiance photographie culinaire', desc: 'Faire en sorte que même les plats maison rendent irrésistiblement bien en photo' }
|
||||
],
|
||||
'fashion': [
|
||||
{ title: 'Mood board de tenue du jour', desc: 'Générer des inspirations de tenues selon la météo, l\'occasion et l\'humeur' },
|
||||
{ title: 'Styliste de garde-robe capsule', desc: 'Créer des combinaisons infinies avec un nombre limité de pièces' },
|
||||
{ title: 'Voyage d\'exploration du style personnel', desc: 'Aider à découvrir et construire un style personnel unique' },
|
||||
{ title: 'Créatif de relookage vestimentaire', desc: 'Offrir de nouvelles inspirations d\'association pour les vêtements existants' },
|
||||
{ title: 'Consultant look pour occasions spéciales', desc: 'Concevoir des tenues qui inspirent confiance pour les événements importants' }
|
||||
]
|
||||
}
|
||||
|
||||
// Table de correspondance de recommandations prédéfinie - basée sur l'ambiance et les sensations
|
||||
const recommendationMap = {
|
||||
// Point d'ambiance : Guérison
|
||||
'healing': {
|
||||
'relax': ['emotion', 'lifestyle', 'health', 'home'],
|
||||
'inspire': ['creative', 'growth', 'learning', 'entertainment'],
|
||||
'connect': ['relationship', 'social', 'pet', 'emotion'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Point d'ambiance : Croissance
|
||||
'growth': {
|
||||
'relax': ['growth', 'learning', 'creative', 'health'],
|
||||
'inspire': ['career', 'learning', 'creative', 'growth'],
|
||||
'connect': ['social', 'relationship', 'career', 'learning'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Point d'ambiance : Social
|
||||
'social': {
|
||||
'relax': ['social', 'pet', 'food', 'home'],
|
||||
'inspire': ['social', 'creative', 'entertainment', 'travel'],
|
||||
'connect': ['relationship', 'social', 'pet', 'travel'],
|
||||
'escape': ['social', 'travel', 'entertainment', 'creative']
|
||||
},
|
||||
// Point d'ambiance : Exploration
|
||||
'explore': {
|
||||
'relax': ['travel', 'creative', 'lifestyle', 'food'],
|
||||
'inspire': ['travel', 'creative', 'learning', 'entertainment'],
|
||||
'connect': ['travel', 'social', 'relationship', 'pet'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Point d'ambiance : Quotidien
|
||||
'daily': {
|
||||
'relax': ['lifestyle', 'home', 'health', 'emotion'],
|
||||
'inspire': ['creative', 'food', 'fashion', 'home'],
|
||||
'connect': ['relationship', 'social', 'pet', 'lifestyle'],
|
||||
'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
|
||||
}
|
||||
}
|
||||
|
||||
const vibeOptions = [
|
||||
{ label: 'Guérison', value: 'healing', desc: 'Chaleur, apaisement, réconfort' },
|
||||
{ label: 'Croissance', value: 'growth', desc: 'Progrès, percée, transformation' },
|
||||
{ label: 'Social', value: 'social', desc: 'Connexion, partage, interaction' },
|
||||
{ label: 'Exploration', value: 'explore', desc: 'Curiosité, aventure, découverte' },
|
||||
{ label: 'Quotidien', value: 'daily', desc: 'Ordinaire, authentique, ici et maintenant' }
|
||||
]
|
||||
|
||||
const feelingOptions = [
|
||||
{ label: 'Envie de se détendre', value: 'relax', desc: 'Relâcher la pression, se vider l\'esprit' },
|
||||
{ label: 'Chercher l\'inspiration', value: 'inspire', desc: 'Stimuler la créativité, trouver l\'élan' },
|
||||
{ label: 'Besoin de connexion', value: 'connect', desc: 'Se connecter aux autres, résonance émotionnelle' },
|
||||
{ label: 'S\'évader un moment', value: 'escape', desc: 'Échapper à la réalité, immersion totale' }
|
||||
]
|
||||
|
||||
const scenarios = [
|
||||
{ key: 'lifestyle', name: 'Style de vie', anchor: '#_1-style-de-vie' },
|
||||
{ key: 'emotion', name: 'Accompagnement émotionnel', anchor: '#_2-accompagnement-emotionnel' },
|
||||
{ key: 'entertainment', name: 'Divertissement et loisirs', anchor: '#_3-divertissement-et-loisirs' },
|
||||
{ key: 'growth', name: 'Développement personnel', anchor: '#_4-developpement-personnel' },
|
||||
{ key: 'social', name: 'Interactions sociales', anchor: '#_5-interactions-sociales' },
|
||||
{ key: 'creative', name: 'Expression créative', anchor: '#_6-expression-creative' },
|
||||
{ key: 'travel', name: 'Voyage et exploration', anchor: '#_7-voyage-et-exploration' },
|
||||
{ key: 'health', name: 'Santé physique et mentale', anchor: '#_8-sante-physique-et-mentale' },
|
||||
{ key: 'learning', name: 'Exploration des savoirs', anchor: '#_9-exploration-des-savoirs' },
|
||||
{ key: 'relationship', name: 'Entretien des relations', anchor: '#_10-entretien-des-relations' },
|
||||
{ key: 'pet', name: 'Compagnie animulaire', anchor: '#_11-compagnie-animulaire' },
|
||||
{ key: 'finance', name: 'Santé financière', anchor: '#_12-sante-financiere' },
|
||||
{ key: 'career', name: 'Développement professionnel', anchor: '#_13-developpement-professionnel' },
|
||||
{ key: 'home', name: 'Espace intérieur', anchor: '#_14-espace-interieur' },
|
||||
{ key: 'food', name: 'Gastronomie et cuisine', anchor: '#_15-gastronomie-et-cuisine' },
|
||||
{ key: 'fashion', name: 'Style vestimentaire', anchor: '#_16-style-vestimentaire' }
|
||||
]
|
||||
|
||||
// Calculer les résultats de recommandation - tirer au hasard depuis le pool de thèmes
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!vibePoint.value || !feeling.value) return []
|
||||
|
||||
const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
|
||||
const topics = []
|
||||
|
||||
// Tirer au hasard 1-2 thèmes de chaque scénario recommandé
|
||||
keys.forEach(key => {
|
||||
const scenario = scenarios.find(item => item.key === key)
|
||||
const scenarioTopics = topicPool[key] || []
|
||||
|
||||
if (scenario && scenarioTopics.length > 0) {
|
||||
// Tirer au hasard 1-2 thèmes
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
scenarioKey: key,
|
||||
scenarioName: scenario.name,
|
||||
scenarioAnchor: scenario.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Trier aléatoirement et limiter le nombre total
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// Obtenir la description de la sélection actuelle
|
||||
const currentSelection = computed(() => {
|
||||
const vibe = vibeOptions.find(i => i.value === vibePoint.value)
|
||||
const feel = feelingOptions.find(p => p.value === feeling.value)
|
||||
return {
|
||||
vibe: vibe?.label || '',
|
||||
feeling: feel?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// Retarder le défilement pour s'assurer que le DOM est mis à jour
|
||||
setTimeout(() => {
|
||||
// Essayer de trouver par ID (prend en charge plusieurs formats)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// Si non trouvé, essayer d'autres formats d'ID possibles
|
||||
if (!element) {
|
||||
// Essayer sans le préfixe underscore
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// Si toujours pas trouvé, chercher par texte de titre
|
||||
if (!element) {
|
||||
// Extraire le nom du scénario depuis l'ancre
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// Correspondance exacte ou partielle
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// Mettre en surbrillance le paragraphe cible
|
||||
element.style.backgroundColor = '#fdf2f8'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
vibePoint.value = ''
|
||||
feeling.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# Inspiration pour scénarios de consommation B2C
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Applications B2C', 'Style de vie', 'Expérience émotionnelle', 'Création d\'ambiance']" coreOutput="Découvrir plus de 15 inspirations de scénarios de vie" expectedOutput="Trouver une direction de produit qui touche les utilisateurs">
|
||||
|
||||
Ce document recense les <strong>directions d'application créatives des grands modèles LLM dans les scénarios de consommation B2C</strong>. Contrairement au B2B qui se concentre sur l'efficacité et les points de douleur, les produits B2C accordent davantage d'importance à la <strong>création de sensations, aux suggestions psychologiques et à l'ambiance</strong>, permettant aux utilisateurs de ressentir une résonance émotionnelle et une expérience agréable lors de l'utilisation.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Sélection rapide d'ambiance de scénario
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Trouvez l'inspiration de scénario qui vous touche</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Choisissez l'ambiance souhaitée et votre sensation du moment, le système recommandera des directions de scénarios pertinentes. Cliquez sur un tag pour accéder au chapitre correspondant.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="vibePoint" placeholder="Choisir le type d'ambiance" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in vibeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="feeling" placeholder="Choisir votre sensation" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in feelingOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
|
||||
Scénarios recommandés pour vous : {{ currentSelection.vibe }} x {{ currentSelection.feeling }}
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<el-tag
|
||||
v-for="topic in recommendationTopics"
|
||||
:key="topic.title"
|
||||
type="danger"
|
||||
effect="light"
|
||||
style="cursor: pointer; margin-bottom: 4px;"
|
||||
@click="scrollToAnchor(topic.scenarioAnchor)"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
|
||||
Rechoisir
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
---
|
||||
|
||||
## 1. Style de vie
|
||||
|
||||
> 💡 **Concept clé** : Donner un sens rituel au quotidien ordinaire, créer de la beauté dans les détails
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Assistant de réveil rituel matinal | Intégration de l'API météo, des données du calendrier, le LLM génère un programme matinal personnalisé ; couplé à un enceinte intelligente pour une musique sur mesure, éclairage intelligent avec réveil progressif |
|
||||
| 2 | Créateur d'ambiance pour célibataires | Connexion aux appareils domotiques (éclairage, enceinte, diffuseur), le LLM ajuste automatiquement les paramètres selon l'heure/l'humeur ; apprentissage continu des préférences utilisateur |
|
||||
| 3 | Générateur de programme cocooning week-end | Connexion aux API de plateformes de streaming pour les programmes, génération de combinaisons film + gastronomie + décoration basées sur les préférences historiques |
|
||||
| 4 | Radio apaisante du soir | Synthèse vocale TTS pour générer des histoires douces, algorithme de mixage de bruits blancs, volume décroissant intelligent ; ajustement du contenu selon les données de sommeil |
|
||||
| 5 | Chasseur d'inspiration esthétique du quotidien | Reconnaissance d'image analysant les photos d'environnement, le LLM génère des suggestions esthétiques ; recommandations de contenu style Pinterest/Xiaohongshu |
|
||||
|
||||
---
|
||||
|
||||
## 2. Accompagnement émotionnel
|
||||
|
||||
> 💡 **Concept clé** : Accueil inconditionnel et présence, devenir un doux contenant pour les émotions
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Confident nocturne | Chiffrement de bout en bout garantissant la confidentialité, analyse émotionnelle par LLM, mémoire à long terme des histoires utilisateur, conversation multi-tours pour un accompagnement continu |
|
||||
| 2 | Accompagnateur de guérison post-rupture | Algorithme d'identification du stade émotionnel, soutien différencié par phase (expression -> libération -> reconstruction) ; base de connaissances psychologiques avec recherche RAG |
|
||||
| 3 | Coach de respiration anti-anxiété | Intégration de données de capteurs biométriques (fréquence cardiaque/respiration), monitoring en temps réel du niveau d'anxiété ; guidage vocal du rythme respiratoire, instructions de relaxation musculaire progressive |
|
||||
| 4 | Mentor de reconstruction de la confiance en soi | Cadre de dialogue de psychologie positive, enregistrement et retour des petites réussites ; techniques de restructuration cognitive pour changer les autodialogues négatifs |
|
||||
| 5 | Analyse intelligente du journal émotionnel | Modèle NLP de reconnaissance émotionnelle, analyse de séries temporelles pour découvrir les schémas émotionnels ; visualisation du spectre émotionnel, alertes prédictives |
|
||||
|
||||
---
|
||||
|
||||
## 3. Divertissement et loisirs
|
||||
|
||||
> 💡 **Concept clé** : Créer des expériences immersives, faire du divertissement un refuge pour l'âme
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Maître du jeu immersif (murder mystery) | Le LLM génère en temps réel des branches narratives, synthèse vocale pour incarner les NPC, ajustement dynamique de la difficulté et du rythme selon les réactions ; rendu de scènes AR/VR |
|
||||
| 2 | NPC sensible dans un monde ouvert | Base de données de mémoire à long terme stockant l'historique des interactions, dialogues personnalisés générés par LLM ; calcul émotionnel pour des réactions émotionnelles authentiques des NPC |
|
||||
| 3 | Génération de contenu podcast personnalisé | Contenu exclusif basé sur le graphe d'intérêts, clonage vocal TTS de la voix préférée ; interaction en temps réel avec les questions des auditeurs |
|
||||
| 4 | Équipe d'ambiance pour concert virtuel | Rendu d'avatars, interactions de commentaires en temps réel, bâtons lumineux virtuels/accessoires de soutien ; audio spatial pour une sensation de live |
|
||||
| 5 | Partenaire de co-création de fiction interactive | Le LLM génère l'intrigue en temps réel, les choix utilisateur influencent le déroulement ; fins multiples, développement dynamique des relations entre personnages |
|
||||
|
||||
---
|
||||
|
||||
## 4. Développement personnel
|
||||
|
||||
> 💡 **Concept clé** : La croissance n'est pas une ascèse, c'est un voyage fascinant de découverte de soi
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Témoin de croissance personnelle | Visualisation chronologique de la trajectoire de croissance, marquage automatique des jalons ; comparatifs « moi d'avant » vs « moi d'aujourd'hui » |
|
||||
| 2 | Coach ludifié de formation d'habitudes | Mécanismes de ludification (points d'expérience, niveaux, badges), classement social, rôle de coach IA (ex. « mentor de l'aventure ») |
|
||||
| 3 | Appariement de partenaires d'apprentissage | Algorithme de matching basé sur les intérêts et objectifs, communautés d'apprentissage, mécanisme de suivi mutuel |
|
||||
| 4 | Découvreur de petites joies quotidiennes | Reconnaissance d'image pour détecter les beaux moments, guidage de journal de gratitude, rétrospective hebdomadaire des moments agréables |
|
||||
| 5 | Simulateur d'expériences de vie | Simulation narrative multi-branches des conséquences de différents choix, comparaison de vies parallèles ; visualisation des conséquences des décisions |
|
||||
|
||||
---
|
||||
|
||||
## 5. Interactions sociales
|
||||
|
||||
> 💡 **Concept clé** : Rendre les interactions sociales légères et naturelles, trouver un mode de connexion confortable
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Générateur de sujets brise-glace | Recommandation intelligente de sujets basée sur le contexte et les participants, analyse de conversation en temps réel pour suggestions de prolongation ; sauvetage des moments gênants |
|
||||
| 2 | Styliste d'ambiance pour publications sociales | Analyse du contenu image, génération de textes multi-styles (littéraire/humoristique/profond) ; recommandation intelligente d'emojis et de mise en forme |
|
||||
| 3 | Planificateur d'ambiance pour rendez-vous | Génération de plans de rendez-vous basés sur les intérêts communs, recommandations de restaurants/activités, suggestions de sujets de conversation ; rappels météo et trafic en temps réel |
|
||||
| 4 | Animateur de réunions à distance | Bibliothèque de jeux en ligne, générateur d'activités brise-glace, roue de sujets ; fonds virtuels et filtres pour renforcer l'ambiance |
|
||||
| 5 | Assistant de gestion d'énergie sociale | Évaluation de la dépense énergétique après les activités sociales, suggestions de récupération (activités en solitaire) ; planification intelligente du calendrier social |
|
||||
|
||||
---
|
||||
|
||||
## 6. Expression créative
|
||||
|
||||
> 💡 **Concept clé** : Chacun a de la créativité, il suffit juste de l'éveiller
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Kit d'urgence anti-panne d'inspiration | Algorithme d'association trans-domaines, génération de stimuli aléatoires, bibliothèque de prompts créatifs ; outil de divergence d'idées en carte mentale |
|
||||
| 2 | Guide d'exploration du style personnel | Analyse d'image pour identifier le style existant, recommandation de tendances, essayage virtuel/makeup ; timeline d'évolution du style |
|
||||
| 3 | Consultant esthétique pour journal et bulletins | Recommandation de modèles de mise en page, génération de palettes de couleurs, suggestions d'éléments décoratifs ; reconnaissance d'écriture manuscrite et embellissement |
|
||||
| 4 | Guide d'ambiance photographique | Identification de scène et suggestions de composition, recommandation de filtres, ajustement intelligent des paramètres de retouche ; parcours d'apprentissage de la photographie |
|
||||
| 5 | Adaptateur musique-humeur | Algorithme d'analyse émotionnelle musicale, reconnaissance de l'humeur utilisateur, génération de playlists personnalisées ; histoires et contexte musical |
|
||||
|
||||
---
|
||||
|
||||
## 7. Voyage et exploration
|
||||
|
||||
> 💡 **Concept clé** : Voyager, ce n'est pas seulement voir des paysages, c'est aussi ressentir des modes de vie différents
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Guide d'exploration urbaine à pied | Agrégation de contenus d'initiés locaux, recommandation de lieux insolites, navigation AR ; traduction et commentaire vocal en temps réel |
|
||||
| 2 | Génération de journal de voyage émotionnel | Tri et sélection automatiques des photos, génération de récits de voyage poétiques par LLM, timeline géolocalisée ; vidéo de voyage en un clic |
|
||||
| 3 | Compagnon pour voyageurs solitaires | Partage de localisation en temps réel et alertes de sécurité, contacts d'urgence locaux, guide vocal IA ; communauté de voyageurs solo |
|
||||
| 4 | Aperçu d'ambiance de destination | Aperçu VR/360°, simulation des sons et odeurs locaux, présentation du contexte culturel ; expérience de « test d'hébergement » virtuel |
|
||||
| 5 | Guide d'ambiance photographique de voyage | Rappel de l'heure dorée, lignes de composition, points de prise de vue typiques ; suggestions de style d'étalonnage en post-production |
|
||||
|
||||
---
|
||||
|
||||
## 8. Santé physique et mentale
|
||||
|
||||
> 💡 **Concept clé** : La santé n'est pas un objectif, c'est un doux acte de self-care
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Réveilleur de motivation sportive | Recommandation intelligente du type d'exercice selon l'état utilisateur, options de micro-exercices (5 minutes), défis sportifs ludifiés ; check-in sportif social |
|
||||
| 2 | Cuisine inspiration alimentation saine | Identification des ingrédients du frigo, recommandation de recettes personnalisées, analyse nutritionnelle ; guide de cuisson étape par étape |
|
||||
| 3 | Optimisateur d'ambiance pour la qualité du sommeil | Analyse des données de monitoring du sommeil, génération de rituels du coucher, conseils d'optimisation de l'environnement (température/humidité/lumière) ; réveil intelligent |
|
||||
| 4 | Guide de perception corporelle | Guidage de méditation de scan corporel, associations émotionnelles des parties du corps, exercices de connexion corps-esprit ; biofeedback visualisé |
|
||||
| 5 | Assistant rappel de self-care | Monitoring de l'intensité de travail, rappels réguliers de pause, suggestions de micro-activités de soin (boire/s'étirer/respirer profondément) ; journal de self-care |
|
||||
|
||||
---
|
||||
|
||||
## 9. Exploration des savoirs
|
||||
|
||||
> 💡 **Concept clé** : Apprendre est une aventure sans fin, la curiosité est le meilleur des professeurs
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Guide ludifié d'exploration des savoirs | Visualisation cartographique des connaissances, parcours d'apprentissage en mode « niveau », système de badges de réussite ; jeu de rôle de tuteur IA |
|
||||
| 2 | Partenaire de scénarios d'apprentissage linguistique | Le LLM joue différents rôles dans des dialogues, correction de prononciation, présentation du contexte culturel ; simulation immersive de scénarios |
|
||||
| 3 | Assistant de satisfaction de la curiosité | Connexion Wikipédia/graphes de connaissances, vulgarisation de concepts complexes, recommandation de savoirs connexes ; journal de curiosité |
|
||||
| 4 | Stimulateur d'inspiration pour notes de lecture | Analyse du contenu du livre, extraction et mise en relation d'idées, recommandation d'angles de réflexion ; modèles et embellissement de notes de lecture |
|
||||
| 5 | Créateur d'ambiance pour le partage de connaissances | Génération automatique de fiches de connaissances, optimisation des textes de partage, embellissement visuel ; retour sur les données de partage social |
|
||||
|
||||
---
|
||||
|
||||
## 10. Entretien des relations
|
||||
|
||||
> 💡 **Concept clé** : Les bonnes relations demandent de l'attention, et l'attention n'a pas besoin d'être compliquée
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Coach de communication en couple | Génération de modèles d'expression émotionnelle, guidage en communication non violente, formulations de résolution de conflits ; évaluation de la santé relationnelle |
|
||||
| 2 | Assistant rappel d'attention familiale | Rappels des dates importantes (anniversaires/commémorations), suggestions de messages attentionnés, recommandations d'activités familiales ; album familial généré |
|
||||
| 3 | Mainteneur d'ambiance d'amitié | Historique des interactions entre amis, recommandation de sujets communs, organisation de réunions à distance ; timeline et souvenirs d'amitié |
|
||||
| 4 | Planificateur de déclarations et surprises | Génération de plans de surprises personnalisés, recommandation de cadeaux, suggestions de formulations romantiques ; planning d'exécution et rappels |
|
||||
| 5 | Guide d'apaisement des conflits | Formulations de désamorçage émotionnel, guidage de changement de perspective, suggestions d'étapes de réconciliation ; suivi de réparation relationnelle |
|
||||
|
||||
---
|
||||
|
||||
## 11. Compagnie animulaire
|
||||
|
||||
> 💡 **Concept clé** : Les animaux de compagnie sont des membres de la famille, leur présence mérite d'être enregistrée et chérie
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Journal anthropomorphique de l'animal | Analyse du comportement animal, génération de journal à la première personne, illustration automatique des photos ; « fil social » de l'animal |
|
||||
| 2 | Interprète du comportement animal | Analyse vidéo du comportement animal, alertes sanitaires, conseils d'éducation ; base de connaissances des caractéristiques de race |
|
||||
| 3 | Planificateur de moments complicité animal | Recommandations d'activités avec l'animal, tutoriels de jouets DIY, lieux accueillants pour animaux ; matchmaking social animal |
|
||||
| 4 | Générateur d'histoires souvenir animalières | Sélection de photos et vidéos, génération d'histoires chronologiques, accompagnement musical ; album/vidéo souvenir auto-généré |
|
||||
| 5 | Guide rassurant pour nouveaux maîtres | Guide d'entretien par étapes, FAQ, gestion des urgences ; communauté de soutien pour débutants |
|
||||
|
||||
---
|
||||
|
||||
## 12. Santé financière
|
||||
|
||||
> 💡 **Concept clé** : La liberté financière n'est pas l'objectif, la santé financière l'est
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Assistant de conscience émotionnelle des dépenses | Analyse des relevés de dépenses, corrélation émotions-dépenses, alertes anti-achats impulsifs ; suggestions de satisfactions alternatives |
|
||||
| 2 | Motivation visuelle des objectifs d'épargne | Visualisation de la progression vers l'objectif, rendu de scènes de rêve, célébration des jalons ; jeu de formation d'habitudes d'épargne |
|
||||
| 3 | Apprendre la gestion financière facilement | Envoi de connaissances fragmentées, enseignement par scénarios, quiz interactifs ; tests et certificats de connaissances |
|
||||
| 4 | Apaisseur d'anxiété financière | Évaluation de la santé financière, techniques de gestion du stress, plans d'action progressifs ; conseil psychologique financier |
|
||||
| 5 | Jeu d'expérience d'investissement à petit montant | Simulation d'investissement virtuel, éducation aux risques, jeu de portefeuille d'investissement ; guidage vers le micro-investissement réel |
|
||||
|
||||
---
|
||||
|
||||
## 13. Développement professionnel
|
||||
|
||||
> 💡 **Concept clé** : La carrière n'est pas une voie ferrée, c'est un champ ouvert à explorer
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Compagnon de doute professionnel | Tests d'intérêts professionnels, inventaire des compétences, recommandation d'informations sectorielles ; dialogue avec un mentor de carrière |
|
||||
| 2 | Réveilleur de sentiment d'accomplissement au travail | Enregistrement des réalisations professionnelles, extraction de la valeur, visualisation des succès ; collecte de retours positifs collègues/clients |
|
||||
| 3 | Assistant d'ambiance sociale au travail | Recommandations de sujets professionnels, techniques de networking, événements sectoriels ; optimisation de contenu LinkedIn |
|
||||
| 4 | Stimulateur d'idées d'activité secondaire | Matching compétences-intérêts-demande du marché, bibliothèque de cas de side projects, guide de démarrage ; communauté d'échange |
|
||||
| 5 | Station-service de confiance avant entretien | Simulation d'entretien, préparation aux questions courantes, techniques de renforcement de la confiance ; conseils d'image |
|
||||
|
||||
---
|
||||
|
||||
## 14. Espace intérieur
|
||||
|
||||
> 💡 **Concept clé** : La maison n'est pas seulement un lieu de résidence, c'est le refuge de l'âme
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Designer d'ambiance d'espace intérieur | Analyse de photos d'espace, recommandations de style, suggestions mobilier/décoration ; prévisualisation AR |
|
||||
| 2 | Guide de transformation saisonnière du logement | Thèmes saisonniers, suggestions de rangement et de mise en valeur, plans de décoration festive ; génération de liste de courses |
|
||||
| 3 | Magie des petits espaces | Algorithme d'optimisation spatiale, mobilier multifonction, techniques de rangement ; astuces d'agrandissement visuel |
|
||||
| 4 | Créateur de rituels du quotidien à la maison | Design de rituels quotidiens (matin/soir/week-end), rappels d'exécution ; retour sur les effets des rituels |
|
||||
| 5 | Compagnon psychologique du désencombrement | Évaluation de la valeur émotionnelle des objets, guidage étape par étape du tri, soutien psychologique ; recommandation de canaux de don/recyclage |
|
||||
|
||||
---
|
||||
|
||||
## 15. Gastronomie et cuisine
|
||||
|
||||
> 💡 **Concept clé** : La nourriture est un langage d'amour, cuisiner est une façon d'exprimer l'amour
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Cuisine réconfortante pour une personne | Identification des ingrédients du frigo, recettes simples, guide étape par étape ; esthétique de dressage solo |
|
||||
| 2 | Design d'ambiance de table de fête | Menu thématique festif, plan de mise en table, techniques d'ambiance ; optimisation de l'expérience des convives |
|
||||
| 3 | Adaptateur cuisine-humeur | Algorithme d'association humeur-aliment, recettes de régulation émotionnelle, recommandations de comfort food ; guidage de guérison par la cuisine |
|
||||
| 4 | Constructeur de confiance pour débutants en cuisine | Recettes ultra-simples, astuces de sauvetage des ratés, formulations de renforcement de la confiance ; progression graduelle de difficulté |
|
||||
| 5 | Guide d'ambiance photographie culinaire | Suggestions de dressage, utilisation de la lumière naturelle, guidage des angles de prise de vue ; filtres et retouches recommandés |
|
||||
|
||||
---
|
||||
|
||||
## 16. Style vestimentaire
|
||||
|
||||
> 💡 **Concept clé** : S'habiller, c'est s'exprimer ; le style est la manifestation extérieure de l'intérieur
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Mood board de tenue du jour | Recommandation combinée météo/occasion/humeur, essayage virtuel, inspiration de looks ; gestion de garde-robe |
|
||||
| 2 | Styliste de garde-robe capsule | Inventaire de la garde-robe, combinaisons de pièces, programmes une pièce-multi looks ; conseils d'achat (combler les lacunes) |
|
||||
| 3 | Voyage d'exploration du style personnel | Test de style, recommandation d'icônes de référence, parcours d'évolution stylistique ; construction de la confiance |
|
||||
| 4 | Créatif de relookage vestimentaire | Inspirations de transformation de vêtements anciens, nouvelles associations, techniques d'accessoirisation ; mode durable |
|
||||
| 5 | Consultant look pour occasions spéciales | Décryptage du dress code, génération de plans de tenue, suggestions coiffure et maquillage ; coordination de l'ensemble |
|
||||
|
||||
---
|
||||
|
||||
## Principes fondamentaux pour la conception de produits B2C
|
||||
|
||||
### 1. De la « fonctionnalité » au « ressenti »
|
||||
|
||||
Les produits B2B se demandent « quel problème cette fonctionnalité résout-elle », les produits B2C se demandent « quel ressenti cette fonctionnalité procure-t-elle ».
|
||||
|
||||
| Pensée B2B | Pensée B2C |
|
||||
|---------|---------|
|
||||
| Améliorer l'efficacité | Gagner du temps pour faire ce qu'on aime |
|
||||
| Réduire les coûts | Faire en sorte que chaque euro en vaille la peine |
|
||||
| Résoudre les points de douleur | Créer des expériences agréables |
|
||||
| Fonctionnalité complète | Le ressenti est au rendez-vous |
|
||||
|
||||
### 2. Les trois niveaux de la création d'ambiance
|
||||
|
||||
**Niveau sensoriel** : conception visuelle, auditive et tactile
|
||||
- Couleurs chaleureuses
|
||||
- Sons apaisants
|
||||
- Animations fluides
|
||||
|
||||
**Niveau émotionnel** : résonance et guidage des émotions
|
||||
- Comprendre l'humeur de l'utilisateur
|
||||
- Offrir un soutien émotionnel
|
||||
- Créer des émotions positives
|
||||
|
||||
**Niveau de sens** : adhésion aux valeurs et sentiment d'appartenance
|
||||
- Faire sentir à l'utilisateur qu'il est compris
|
||||
- Créer un sentiment d'appartenance
|
||||
- Donner du sens aux actions
|
||||
|
||||
### 3. La puissance de la suggestion psychologique
|
||||
|
||||
Le texte et le design des produits B2C transmettent tous des suggestions psychologiques :
|
||||
|
||||
- **Suggestions positives** : « Tu fais déjà du bon travail », « Prends ton temps, ce n'est pas grave »
|
||||
- **Suggestions d'appartenance** : « Beaucoup de gens sont comme toi », « Tu n'es pas seul(e) »
|
||||
- **Suggestions de croissance** : « Chaque essai est un progrès », « Tu deviens meilleur(e) »
|
||||
|
||||
### 4. Permettre aux utilisateurs de devenir la meilleure version d'eux-mêmes
|
||||
|
||||
Le meilleur produit B2C ne change pas l'utilisateur, il l'aide à devenir la personne qu'il souhaite être.
|
||||
|
||||
- Pas « tu devrais... », mais « tu peux... »
|
||||
- Pas « tu dois... », mais « si tu le souhaites... »
|
||||
- Pas « tu n'es pas encore assez... », mais « tu es déjà... »
|
||||
|
||||
---
|
||||
|
||||
> 🌟 **Rappelez-vous** : les utilisateurs B2C n'achètent pas des fonctionnalités, ils achètent des sensations ; pas des outils, mais de la compagnie ; pas des services, mais de la compréhension.
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/appendix-consumer-scenarios/images
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,542 @@
|
||||
---
|
||||
title: "Le modèle Double Diamond : faire d'abord les bonnes choses, puis faire les choses correctement"
|
||||
description: "Article d'introduction au Double Diamond pour les lecteurs débutants. Comprendre les quatre phases Discover, Define, Develop, Deliver, et éviter de se précipiter dans les prototypes avant d'avoir compris le problème."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>1,5 heure</strong>'
|
||||
</script>
|
||||
|
||||
# Le modèle Double Diamond : faire d'abord les bonnes choses, puis faire les choses correctement
|
||||
|
||||
<a id="top-dd"></a>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Double Diamond', 'Design Thinking', 'Analyse des besoins', 'Conception de solutions']"
|
||||
coreOutput="1 définition de problème plus claire et 1 point d'entrée de validation plus raisonnable"
|
||||
expectedOutput="Ne plus se précipiter pour dessiner des prototypes, mais savoir d'abord clarifier le problème avant de comparer les solutions"
|
||||
>
|
||||
|
||||
Beaucoup de gens, lorsqu'ils créent un produit pour la première fois, le piège le plus courant n'est pas « ne pas travailler assez dur », mais de passer trop vite à la solution.
|
||||
|
||||
À peine une direction a-t-elle germé dans leur esprit qu'ils commencent à penser : comment dessiner les pages, où placer les boutons, faut-il intégrer l'IA, faut-il faire un système de connexion, quel outil utiliser pour les prototypes. Après s'être agité un moment, ils se rendent compte que le problème fondamental n'a jamais été vraiment clarifié : les utilisateurs ont-ils vraiment ce point de douleur ? Ce problème mérite-t-il d'être résolu maintenant ? Vous pensiez faire avancer le projet, mais en réalité vous accélérez juste dans la mauvaise direction.
|
||||
|
||||
Le modèle Double Diamond est conçu pour éviter ce genre de situation.
|
||||
|
||||
Son rappel le plus précieux est : **« faire les bonnes choses » et « faire les choses correctement » sont deux étapes complètement différentes.** Si vous n'avez pas encore compris le problème et que vous vous précipitez pour faire un prototype, vous ne ferez généralement que rendre la mauvaise direction plus complète.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimale
|
||||
**Objectif** : après avoir lu, vous saurez mieux quand réfléchir d'abord au problème et quand commencer à penser aux solutions et aux prototypes, évitant ainsi de travailler dur dans la mauvaise direction dès le début.
|
||||
|
||||
**Actions** : suivez les quatre étapes `Discover → Define → Develop → Deliver`, en ne faisant à chaque étape que ce qui est nécessaire.
|
||||
|
||||
**Résultat** : vous obtiendrez une définition de problème plus claire, plusieurs solutions comparables, et une version minimale validable.
|
||||
|
||||
**Navigation rapide** : [Qu'est-ce que le Double Diamond](#dd-what) · [Le premier diamant](#dd-first) · [Comment l'IA peut vous aider](#dd-ai)
|
||||
:::
|
||||
|
||||
## Ce que vous apprendrez
|
||||
|
||||
1. Qu'est-ce que le modèle Double Diamond, et pourquoi il est adapté aux débutants en création de produit
|
||||
2. Ce que font les quatre phases Discover, Define, Develop, Deliver
|
||||
3. Comment distinguer « je devrais continuer à diverger » de « je devrais commencer à converger »
|
||||
4. Comment appliquer le modèle Double Diamond aux produits AI, à la conception de prototypes et à la validation des besoins
|
||||
|
||||
<a id="dd-what"></a>
|
||||
## [1. Qu'est-ce que le modèle Double Diamond](#top-dd)
|
||||
|
||||
Le modèle Double Diamond est un cadre de processus de design classique promu par le **Design Council** britannique. Il représente un processus complet de design et d'innovation sous la forme de deux diamants consécutifs.
|
||||
|
||||
La raison pour laquelle c'est des « diamants » est que chaque diamant comprend deux actions opposées mais toutes deux importantes :
|
||||
|
||||
- **Divergence** : élargir d'abord la vision, voir plus de possibilités
|
||||
- **Convergence** : réduire ensuite le périmètre, prendre des décisions et faire des compromis
|
||||
|
||||
Le processus complet se déroule en quatre étapes :
|
||||
|
||||
1. **Discover** : comprendre largement les utilisateurs, les problèmes, l'environnement et le marché
|
||||
2. **Define** : extraire des masses d'informations le problème central véritablement digne d'être résolu
|
||||
3. **Develop** : diverger autour du problème central pour trouver plusieurs solutions
|
||||
4. **Deliver** : filtrer, prototyper, tester et livrer la solution la plus appropriée
|
||||
|
||||
Si l'on compresse ces quatre étapes en une seule phrase facile à retenir :
|
||||
|
||||
- **Le premier diamant** : comprendre d'abord quel problème résoudre exactement
|
||||
- **Le deuxième diamant** : décider ensuite quelle solution utiliser pour le résoudre
|
||||
|
||||
C'est aussi la phrase que vous avez prononcée avec justesse :
|
||||
|
||||
- **Le premier diamant : faire les bonnes choses**
|
||||
- **Le deuxième diamant : faire les choses correctement**
|
||||
|
||||
## 2. Pourquoi le modèle Double Diamond est particulièrement adapté aux débutants
|
||||
|
||||
Le rythme le plus courant chez les débutants en création de produit ressemble souvent à ça :
|
||||
|
||||
- Avoir une idée
|
||||
- Trouver la direction cool
|
||||
- Commencer immédiatement à dessiner des prototypes
|
||||
- En construisant, découvrir que les fonctionnalités se multiplient
|
||||
- Finalement, ne plus savoir quel problème on résout
|
||||
|
||||
La valeur du modèle Double Diamond n'est pas de rendre le processus plus complexe, mais de **vous forcer à séparer « comprendre le problème » et « concevoir la solution »**.
|
||||
|
||||
Cela semble banal, mais c'est en réalité très important. Parce que beaucoup de produits qui échouent ne le font pas par manque d'effort, mais parce que :
|
||||
|
||||
- Ils ont choisi le mauvais problème
|
||||
- Ils ont mal compris les utilisateurs
|
||||
- Ils ont verrouillé une solution trop tôt
|
||||
- Ils ont passé beaucoup de temps à peaufiner les détails sans valider la direction
|
||||
|
||||
Le modèle Double Diamond vous rappelle constamment :
|
||||
|
||||
- Ne présumez pas que le problème est établi juste parce que l'idée semble bonne
|
||||
- Ne présumez pas que la solution mérite d'être réalisée juste parce qu'elle est réalisable
|
||||
- Ne présumez pas que les utilisateurs en auront vraiment besoin juste parce que le prototype paraît complet
|
||||
|
||||
<a id="dd-first"></a>
|
||||
## [3. Le premier diamant : faire les bonnes choses](#top-dd)
|
||||
|
||||
Le premier diamant se concentre sur **le problème lui-même**, pas sur la solution.
|
||||
|
||||
Vous pouvez le résumer en une phrase : **ne vous précipitez pas, déterminez d'abord si ça vaut la peine d'être fait.**
|
||||
|
||||
### 3.1 Discover : ouvrir d'abord l'espace du problème
|
||||
|
||||
La tâche centrale de la phase Discover est de **faire une recherche large, pas de tirer des conclusions rapides**.
|
||||
|
||||
Les activités typiques de cette étape incluent :
|
||||
|
||||
- Observer comment les utilisateurs se comportent dans des scénarios réels
|
||||
- Interviewer des utilisateurs potentiels pour comprendre quand ils ont rencontré le problème pour la dernière fois
|
||||
- Observer comment ils se débrouillent actuellement
|
||||
- Examiner comment les concurrents et les alternatives gèrent la situation
|
||||
- Collecter des informations sur le marché, les processus, les contraintes, la chaîne de valeur
|
||||
|
||||
Beaucoup de gens pensent à tort que Discover consiste à « lire plus de documentation ». En réalité, ce qui est plus crucial, c'est : **vous devez comprendre les personnes et les contextes, pas juste accumuler des informations.**
|
||||
|
||||
Par exemple, si vous voulez créer un outil « AI qui aide à organiser les comptes rendus de réunion », en phase Discover, il serait plus pertinent de se concentrer sur :
|
||||
|
||||
- Où les utilisateurs souffrent-ils le plus après une réunion
|
||||
- Est-ce la prise de notes, l'organisation, ou la synchronisation qui est difficile
|
||||
- Est-ce qu'ils écrivent eux-mêmes, demandent à des stagiaires, réécoutent les enregistrements, ou ne font simplement pas de compte rendu
|
||||
- Quels types de réunions nécessitent le plus un compte rendu, lesquels n'en ont pas besoin du tout
|
||||
|
||||
L'objectif le plus important de cette étape n'est pas d'obtenir une réponse, mais de **ne pas supposer trop tôt que vous connaissez déjà la réponse.**
|
||||
|
||||
### 3.2 Define : extraire le problème central de la masse d'informations
|
||||
|
||||
Si Discover est l'ouverture, Define est le recentrage.
|
||||
|
||||
La phase Define ne consiste pas à conserver toutes les observations, mais à se demander :
|
||||
|
||||
- Quel est le problème véritablement prioritaire à résoudre
|
||||
- Quel problème est le plus fréquent, le plus douloureux, le plus porteur de valeur
|
||||
- Quelle est la seule scène à cibler pour la première version
|
||||
|
||||
L'essence de cette étape est de transformer un sujet large en une définition de problème claire.
|
||||
|
||||
Par exemple, au début vous disiez :
|
||||
|
||||
> Je veux créer un outil AI pour améliorer l'efficacité des réunions.
|
||||
|
||||
En phase Define, une meilleure formulation pourrait devenir :
|
||||
|
||||
> Nous allons d'abord résoudre le problème des équipes projet qui, après des réunions collaboratives de 30 à 60 minutes, ne parviennent pas à produire en 10 minutes un compte rendu incluant les tâches, les responsables et les délais.
|
||||
|
||||
À ce stade, le problème commence à devenir clair :
|
||||
|
||||
- Qui est l'utilisateur
|
||||
- Quel est le contexte
|
||||
- Quel est le blocage
|
||||
- Quel est le critère de succès
|
||||
|
||||
L'essence de Define est de **passer de « beaucoup de problèmes » à « quel problème résoudre en premier cette fois-ci ».**
|
||||
|
||||
## 4. Le deuxième diamant : faire les choses correctement
|
||||
|
||||
Ce n'est qu'après avoir terminé le premier diamant qu'il est vraiment approprié d'entrer dans le deuxième. Parce qu'à ce stade, vous ne résolvez pas une direction vague, mais un problème spécifique qui a été cerné.
|
||||
|
||||
### 4.1 Develop : diverger les solutions autour du problème central
|
||||
|
||||
L'accent de la phase Develop est de **plorer plusieurs solutions possibles pour le même problème**.
|
||||
|
||||
Notez que cette divergence est différente de celle de la phase Discover.
|
||||
|
||||
- La divergence de Discover explore l'espace des problèmes
|
||||
- La divergence de Develop explore l'espace des solutions
|
||||
|
||||
Par exemple, pour le cas du compte rendu de réunion, en phase Develop, vous pouvez commencer à penser :
|
||||
|
||||
- Faire un outil web ou un plugin de réunion
|
||||
- Traiter après upload de l'enregistrement ou faire une prise de notes en temps réel
|
||||
- Ne faire que des résumés ou se concentrer sur l'extraction des tâches
|
||||
- Mettre l'accent sur l'efficacité individuelle ou la synchronisation d'équipe
|
||||
- Donner aux utilisateurs la liberté d'éditer ou produire directement un modèle structuré
|
||||
|
||||
Cette étape se prête bien au brainstorming, et aussi à l'élargissement des solutions avec l'équipe.
|
||||
|
||||
Mais il y a un prérequis : **toutes les solutions doivent servir le même problème déjà défini.**
|
||||
Si le problème n'est pas clairement défini, Develop risque de redevenir une dispersion de fonctionnalités.
|
||||
|
||||
### 4.2 Deliver : choisir la solution, faire le prototype, tester et livrer
|
||||
|
||||
La phase Deliver est l'étape de convergence du deuxième diamant.
|
||||
|
||||
Ce qu'il faut faire ici n'est pas de continuer à imaginer plus, mais de commencer à juger :
|
||||
|
||||
- Quelle solution est la plus adaptée à la phase actuelle
|
||||
- Quelle version est la plus petite mais la plus utile
|
||||
- Quelles fonctionnalités sont essentielles d'abord, lesquelles peuvent attendre
|
||||
- Comment prototyper, tester et valider à petite échelle
|
||||
|
||||
Beaucoup de gens pensent que Deliver équivaut à « mise en ligne ». En réalité, son sens plus précis est : **transformer une solution en quelque chose de testable, de validable et d'itérable.**
|
||||
|
||||
Cela peut être :
|
||||
|
||||
- Un flux basse fidélité
|
||||
- Un prototype Figma
|
||||
- Un MVP fonctionnel
|
||||
- Un test utilisateur à petite échelle
|
||||
- Une version itérée après des retours réels
|
||||
|
||||
L'essentiel de Deliver n'est pas la « livraison parfaite », mais de **mettre la solution dans un environnement réel pour validation aussi rapidement que possible.**
|
||||
|
||||
## 5. Un tableau comparatif facile à retenir
|
||||
|
||||
Si vous n'arrivez jamais à distinguer les quatre phases, retenez simplement cette version :
|
||||
|
||||
| Phase | Ce que vous faites | Mots-clés | Produits courants |
|
||||
| --- | --- | --- | --- |
|
||||
| Discover | Comprendre le problème | Recherche, observation, entretiens, collecte d'informations | Insights utilisateurs, notes de contexte, liste de problèmes |
|
||||
| Define | Définir le problème | Synthèse, focalisation, compromis, reformulation | Définition du problème, priorités, point d'entrée MVP |
|
||||
| Develop | Explorer les solutions | Brainstorming, comparaison, co-création, hypothèses de prototype | Liste de solutions, schémas de flux, direction de prototype |
|
||||
| Deliver | Valider les solutions | Prototypage, tests, itération, livraison | Prototype, retours de test, version optimisée |
|
||||
|
||||
Compressé encore plus, cela donne :
|
||||
|
||||
- **Discover / Define** : résoudre « faire les bonnes choses »
|
||||
- **Develop / Deliver** : résoudre « faire les choses correctement »
|
||||
|
||||
## 6. Les malentendus les plus courants sur le modèle Double Diamond
|
||||
|
||||
### 6.1 Passer directement à Deliver sans Discover
|
||||
|
||||
C'est le cas le plus fréquent. Beaucoup de gens, à peine ont-ils une idée, se mettent à dessiner des prototypes, rédiger des PRD, intégrer des modèles, créer des pages.
|
||||
|
||||
Le problème n'est pas que vous ne travaillez pas sérieusement, mais que vous n'avez peut-être même pas confirmé si le problème mérite d'être résolu.
|
||||
|
||||
### 6.2 Faire beaucoup de Discover, mais jamais Define
|
||||
|
||||
L'autre extrême est de toujours faire des recherches, lire des documents, interviewer, sans jamais oser converger.
|
||||
|
||||
Le Double Diamond ne vous demande pas de diverger indéfiniment, mais vous rappelle : après la divergence, il faut entrer dans le jugement et les compromis.
|
||||
|
||||
### 6.3 Après Define, modifier subrepticement le problème
|
||||
|
||||
Beaucoup d'équipes, en phase Develop, modifient la définition du problème pour l'adapter à une solution plus facile à réaliser.
|
||||
|
||||
C'est dangereux. Vous n'êtes peut-être plus en train de résoudre le problème, mais en train de trouver des justifications pour la solution que vous préférez.
|
||||
|
||||
### 6.4 Confondre Deliver avec « mise en ligne complète »
|
||||
|
||||
Deliver ne signifie pas qu'il faut terminer le produit complet. Très souvent, un prototype testable ou un essai utilisateur réel constitue déjà un bon deliver.
|
||||
|
||||
## 7. Comment utiliser le modèle Double Diamond dans les produits AI
|
||||
|
||||
Les produits AI tombent particulièrement facilement dans le piège du « capacités d'abord », parce que les capacités des modèles semblent très alléchantes. Vous aurez envie de penser directement :
|
||||
|
||||
- Faut-il intégrer le multimodal
|
||||
- Faut-il faire un Agent
|
||||
- Faut-il ajouter des workflows
|
||||
- Faut-il intégrer la voix, l'image, la recherche en ligne
|
||||
|
||||
Mais le modèle Double Diamond vous oblige à demander d'abord :
|
||||
|
||||
- Où les utilisateurs sont-ils vraiment bloqués
|
||||
- Ce blocage nécessite-t-il absolument l'IA
|
||||
- Sans IA, qu'est-ce qui manque le plus dans les méthodes actuelles
|
||||
- Une fois l'IA ajoutée, quel est le progrès le plus essentiel
|
||||
|
||||
Cela vous aide à éviter une situation courante : **capacités puissantes, valeur faible.**
|
||||
|
||||
Un ordre pratique serait :
|
||||
|
||||
1. En phase Discover, observer comment les utilisateurs gèrent les tâches actuellement
|
||||
2. En phase Define, écrire le scénario le plus douloureux en une définition de problème claire
|
||||
3. En phase Develop, comparer quelles capacités AI sont les plus adaptées à ce problème
|
||||
4. En phase Deliver, construire une version minimale et la faire tester par de vrais utilisateurs
|
||||
|
||||
## 8. Un modèle Double Diamond prêt à l'emploi
|
||||
|
||||
Si vous êtes en train de créer votre propre produit, vous pouvez suivre cet ordre :
|
||||
|
||||
### Discover
|
||||
|
||||
- Qui sont les utilisateurs que j'ai observés ?
|
||||
- Quand est la dernière fois qu'ils ont rencontré ce problème ?
|
||||
- Comment le résolvent-ils actuellement ?
|
||||
- Où est-ce le plus pénible, le plus lent, le plus angoissant ?
|
||||
|
||||
### Define
|
||||
|
||||
- Parmi tous ces problèmes, lequel mérite le plus d'être résolu en priorité ?
|
||||
- Quel scénario est le plus fréquent ou le plus crucial ?
|
||||
- Qui et quoi servirons-nous uniquement dans la première version ?
|
||||
- Une fois le problème résolu, quel sera le changement d'état de l'utilisateur ?
|
||||
|
||||
### Develop
|
||||
|
||||
- Pour ce problème, quelles solutions sont possibles ?
|
||||
- Quelles sont les plus légères, les plus rapides, les plus faciles à valider ?
|
||||
- Qu'est-ce qui est indispensable, qu'est-ce qui peut attendre ?
|
||||
|
||||
### Deliver
|
||||
|
||||
- Que pouvons-nous livrer au minimum pour valider cette direction ?
|
||||
- Un flux, un prototype, ou un MVP ?
|
||||
- Qui devons-nous trouver pour tester ?
|
||||
- Après le test, comment décider : continuer, modifier ou abandonner ?
|
||||
|
||||
## 9. Un exemple compréhensible même par un débutant
|
||||
|
||||
Supposons que vous voulez créer un outil AI pour « aider les étudiants à préparer leur CV de candidature ».
|
||||
|
||||
Beaucoup de gens entreraient directement dans le deuxième diamant, commençant à penser :
|
||||
|
||||
- Faut-il embellir en un clic
|
||||
- Faut-il faire de la réécriture intelligente
|
||||
- Faut-il faire correspondre automatiquement avec l'offre d'emploi
|
||||
- Faut-il générer une lettre de motivation
|
||||
|
||||
Mais selon le modèle Double Diamond, un meilleur processus serait :
|
||||
|
||||
### Premier diamant
|
||||
|
||||
**Discover**
|
||||
|
||||
- Aller parler aux diplômés récents pour savoir quand ils ont modifié leur CV pour la dernière fois
|
||||
- Voir comment ils transforment l'ancien CV en nouvelle version
|
||||
- Comprendre s'ils sont surtout gênés par « ne pas savoir écrire », « ne pas savoir modifier », ou « ne pas savoir juger si c'est bien »
|
||||
|
||||
**Define**
|
||||
|
||||
- Converger vers un problème plus spécifique :
|
||||
- Ce n'est pas « les étudiants ne savent pas faire de CV »
|
||||
- Mais « les étudiants qui postulent pour la première fois à un stage ont du mal à reformuler leurs expériences existantes en formulations adaptées au poste, ce qui les pousse à retarder leur candidature »
|
||||
|
||||
### Deuxième diamant
|
||||
|
||||
**Develop**
|
||||
|
||||
- Imaginer plusieurs solutions : bibliothèque de modèles, réécriture AI, comparaison avec l'offre, notation du CV, exemples de référence
|
||||
|
||||
**Deliver**
|
||||
|
||||
- La première version ne fait que « reformuler les points d'expérience en fonction de la description du poste »
|
||||
- La faire tester par 5 étudiants, pour voir s'ils soumettent leur première version de CV plus rapidement
|
||||
|
||||
Vous constaterez que, une fois le premier diamant bien fait, le deuxième devient beaucoup plus clair.
|
||||
|
||||
## 10. Résumé
|
||||
|
||||
La force du modèle Double Diamond réside dans le fait qu'il vous aide à décomposer un ensemble chaotique en quatre actions plus claires :
|
||||
|
||||
- D'abord, diverger pour comprendre le problème
|
||||
- Puis, converger pour définir le problème
|
||||
- Ensuite, diverger pour explorer les solutions
|
||||
- Enfin, converger pour livrer la solution
|
||||
|
||||
Il ne vous ralentit pas, il vous fait **gagner les détours qui donnent l'impression d'être occupé mais vont dans la mauvaise direction.**
|
||||
|
||||
Surtout à l'ère de l'IA, où créer des choses devient de plus en plus rapide, le modèle Double Diamond devient encore plus important. Parce que quand « produire » devient de plus en plus facile, la capacité vraiment rare sera : **êtes-vous en train de résoudre un problème qui mérite d'être résolu, et le faites-vous de la bonne manière.**
|
||||
|
||||
Retenez juste cette phrase :
|
||||
|
||||
**Faites d'abord les bonnes choses, puis faites les choses correctement.**
|
||||
|
||||
<a id="dd-ai"></a>
|
||||
## [11. Comment utiliser l'IA pour piloter votre processus Double Diamond](#top-dd)
|
||||
|
||||
Le modèle Double Diamond n'est pas un outil AI en soi, mais l'IA est très bien adaptée pour servir d'« accélérateur » dans les quatre phases. L'essentiel n'est pas de laisser l'IA décider à votre place, mais de l'utiliser pour élargir votre vision, organiser les informations, comparer les solutions et générer du matériel de validation.
|
||||
|
||||
### 11.1 En phase Discover, utilisez l'IA pour préparer le terrain
|
||||
|
||||
Avant les entretiens et la recherche formels, vous pouvez demander à l'IA de faire un balayage léger des problèmes, comme :
|
||||
|
||||
- Quelles alternatives existent sur le marché
|
||||
- De quoi les utilisateurs se plaignent-ils le plus dans les communautés publiques
|
||||
- Dans quels contextes et pour quels publics ce problème est-il courant
|
||||
- Que les produits existants négligent-ils souvent
|
||||
|
||||
Cette étape ne remplace pas la recherche terrain, mais elle est idéale pour construire rapidement une carte des problèmes.
|
||||
|
||||
Une entrée très simple pour un débutant pourrait être :
|
||||
|
||||
```text
|
||||
Je veux créer un outil pour aider les étudiants à modifier leur CV.
|
||||
Ne me proposez pas de fonctionnalités, aidez-moi d'abord à voir quels problèmes les gens rencontrent le plus souvent.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Carte préliminaire des problèmes :
|
||||
|
||||
1. Ne sait pas quelles expériences mentionner
|
||||
2. Ne sait pas comment adapter le CV pour chaque poste
|
||||
3. Après de nombreuses modifications, on n'est toujours pas sûr que c'est bien
|
||||
4. On a besoin de quelqu'un pour relire, mais on ne veut pas déranger
|
||||
5. Parce qu'on n'est pas sûr, on retarde l'envoi
|
||||
```
|
||||
|
||||
Ce type de résultat ne remplace pas vos conclusions, mais vous permet d'entrer plus vite dans le Discover.
|
||||
|
||||
### 11.2 En phase Define, laissez l'IA vous aider à converger vers une définition du problème
|
||||
|
||||
Beaucoup de gens, après avoir collecté beaucoup de matériel, trouvent la partie la plus difficile de condenser le problème en une phrase vraiment claire. Vous pouvez confier vos notes de recherche à l'IA et lui demander de les compresser en plusieurs définitions candidates :
|
||||
|
||||
```text
|
||||
Voici les retours utilisateurs et les notes de recherche que j'ai collectés en phase Discover :
|
||||
[insérez le contenu]
|
||||
|
||||
Merci de m'aider à faire trois choses :
|
||||
1. Identifier les modèles de problèmes les plus fréquents
|
||||
2. Classer 3 problèmes prioritaires par fréquence, intensité de douleur et validabilité
|
||||
3. Écrire chaque problème en une définition spécifique
|
||||
```
|
||||
|
||||
Vous pouvez même écrire une entrée très simple :
|
||||
|
||||
```text
|
||||
Les problèmes que j'ai collectés sont :
|
||||
1. Les gens ne savent pas quoi mettre dans leur CV
|
||||
2. Les gens ne savent pas comment le modifier
|
||||
3. Les gens trouvent toujours que ce n'est pas assez bien et n'osent pas l'envoyer
|
||||
|
||||
Lequel est le plus adapté pour une première version ?
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Problème recommandé en priorité :
|
||||
|
||||
« Les étudiants qui postulent pour la première fois à un stage ne sont pas sûrs que leur CV est au niveau requis pour être envoyé, ce qui les pousse à modifier sans cesse et à retarder leur candidature. »
|
||||
|
||||
Raisons :
|
||||
1. Ce problème est plus spécifique
|
||||
2. Il explique le comportement de procrastination
|
||||
3. Il est plus facile de concevoir une petite version pour le valider
|
||||
```
|
||||
|
||||
Ce type de résultat est utile parce qu'il vous aide à passer d'un ensemble de problèmes flous à une définition plus proche d'un point de départ MVP.
|
||||
|
||||
### 11.3 En phase Develop, utilisez l'IA pour diverger sur plusieurs solutions
|
||||
|
||||
Beaucoup de gens, une fois le problème défini, ne se concentrent que sur la première solution qui leur vient à l'esprit. L'IA est idéale ici pour vous forcer à diverger :
|
||||
|
||||
```text
|
||||
J'ai défini un problème central : [votre définition du problème]
|
||||
Ne me donnez pas une seule réponse finale, mais proposez 2-3 directions de solution pour chacun des angles suivants :
|
||||
1. Le MVP le plus léger
|
||||
2. La solution la plus adaptée pour valider le besoin
|
||||
3. La solution la plus adaptée pour améliorer l'expérience
|
||||
4. Une solution sans IA
|
||||
5. Une solution avec IA
|
||||
Enfin, comparez les avantages, les risques et les coûts de validation de chaque solution.
|
||||
```
|
||||
|
||||
Ainsi, vous ne vous enfermerez pas trop tôt dans une seule solution.
|
||||
|
||||
Une entrée simple pourrait être :
|
||||
|
||||
```text
|
||||
Ma définition du problème est :
|
||||
« Les étudiants ne sont pas sûrs que leur CV est prêt à être envoyé, donc ils retardent. »
|
||||
|
||||
Proposez-moi 4 solutions différentes, pas une seule.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Solution 1 : Checklist de validation du CV
|
||||
Solution 2 : Réécriture ciblée en fonction de la description du poste
|
||||
Solution 3 : Upload du CV avec indicateurs de risque
|
||||
Solution 4 : Comparaison avec des exemples de qualité pour aider à évaluer l'écart
|
||||
```
|
||||
|
||||
Vous êtes alors plus en mesure d'entrer dans la « comparaison de solutions » au lieu de ne vous concentrer que sur la réécriture AI.
|
||||
|
||||
### 11.4 En phase Deliver, utilisez l'IA pour générer des textes de prototype et du matériel de test
|
||||
|
||||
Quand vous entrez en phase Deliver, l'IA est très adaptée pour accélérer ces tâches :
|
||||
|
||||
- Générer les textes de pages pour un prototype basse fidélité
|
||||
- Organiser un script de test utilisateur
|
||||
- Générer plusieurs versions comparables de titres, boutons, descriptions
|
||||
- Synthétiser les retours post-test en liste de problèmes
|
||||
|
||||
Par exemple, vous pouvez demander à l'IA de générer un script de test utilisateur de 20 minutes, ou de classer les retours de 5 utilisateurs en « continuer / changer de direction / mettre en pause ».
|
||||
|
||||
Une entrée minimale pourrait être :
|
||||
|
||||
```text
|
||||
J'ai fait un prototype très simple :
|
||||
l'utilisateur uploade son CV, le système lui indique quels éléments ne sont pas encore prêts pour l'envoi.
|
||||
|
||||
Générez-moi un script de test utilisateur de 15 minutes.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Script de test de 15 minutes :
|
||||
|
||||
1. D'abord, demandez à l'utilisateur de décrire sa dernière expérience de candidature
|
||||
2. Laissez l'utilisateur uploader son CV de manière autonome
|
||||
3. Observez s'il comprend les résultats du retour
|
||||
4. Demandez : parmi ces indications, lesquelles sont les plus utiles, lesquelles sont confuses
|
||||
5. Demandez : avant la prochaine candidature, aimeriez-vous réutiliser cet outil
|
||||
```
|
||||
|
||||
Ce type de résultat est pratique parce qu'il vous fait passer de « j'ai fini mon prototype » à « comment je le teste ensuite ».
|
||||
|
||||
### 11.5 Laissez l'IA jouer le rôle de « gardien des phases »
|
||||
|
||||
Le problème le plus courant du modèle Double Diamond est que les gens sautent les étapes. Vous pouvez demander à l'IA de jouer un gardien, pour vous rappeler où vous êtes vraiment :
|
||||
|
||||
```text
|
||||
Merci de jouer le rôle de coach en processus produit.
|
||||
Voici l'état actuel de mon projet : [votre description]
|
||||
Déterminez si je suis plutôt en Discover, Define, Develop ou Deliver.
|
||||
Et dites-moi :
|
||||
1. Est-ce que j'ai sauté une étape trop tôt
|
||||
2. Quelle est l'action la plus importante à compléter à l'étape actuelle
|
||||
3. Quelles choses je ne dois pas faire pour l'instant
|
||||
```
|
||||
|
||||
C'est particulièrement utile pour les débutants, car il est facile de « commencer à dessiner des prototypes avant d'avoir clarifié le problème ».
|
||||
|
||||
## 📚 Exercices
|
||||
|
||||
En vous basant sur le contenu ci-dessus, veuillez réaliser les exercices suivants :
|
||||
|
||||
1. Choisissez une idée produit que vous avez récemment, et rédigez le brouillon des quatre étapes Discover, Define, Develop, Deliver
|
||||
2. En phase Define, forcez-vous à réduire le problème à une phrase spécifique
|
||||
3. En phase Develop, listez au moins 3 solutions différentes, au lieu de ne vous concentrer que sur la première idée venue
|
||||
4. En phase Deliver, écrivez une version minimale validable livrable en une semaine
|
||||
|
||||
## Lectures complémentaires
|
||||
|
||||
Cet article s'inspire principalement des ressources officielles du Design Council sur le Double Diamond, idéales pour approfondir :
|
||||
|
||||
- [Design Council : The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
|
||||
- [Design Council : Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
|
||||
- [Design Council : History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: "Où trouver des idées : 3 sources de référence idéales pour les débutants"
|
||||
description: "Article d'introduction sur les sources d'idées produit pour les lecteurs débutants. Recense les sites web idéaux pour parcourir des idées, les sources de tendances, les sources d'activités réelles et les listes VC, pour vous aider à trouver rapidement une direction plus concrète à partir de liens."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>1,5 heure</strong>'
|
||||
</script>
|
||||
|
||||
# Où trouver des idées : 3 sources de référence idéales pour les débutants
|
||||
|
||||
<a id="top-idea-sources"></a>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Trouver des idées', 'Direction produit', 'Découverte de besoins', 'Observation sectorielle']"
|
||||
coreOutput="1 direction produit plus concrète et digne d'investigation"
|
||||
expectedOutput="Savoir où chercher, comment regarder, par quoi commencer — ne plus se contenter d'idées vides comme « AI + secteur X »"
|
||||
>
|
||||
|
||||
Beaucoup de gens restent bloqués à la première étape, non pas parce qu'ils manquent totalement d'inspiration, mais parce qu'après avoir parcouru beaucoup de contenu, il ne reste dans leur esprit que de grands concepts :
|
||||
|
||||
- AI for education
|
||||
- AI for healthcare
|
||||
- AI for finance
|
||||
- AI agent for business
|
||||
|
||||
Ce ne sont pas encore des idées. Elles vous disent simplement « la direction est vaste », sans vous dire :
|
||||
|
||||
- Qui l'utilise
|
||||
- Dans quel contexte
|
||||
- Comment les gens s'en sortent actuellement
|
||||
- Quelle étape mérite d'être attaquée en premier
|
||||
|
||||
Cet article ne présente pas de méthodologie abstraite, mais compile directement un ensemble de sources plus utiles.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimale
|
||||
**Objectif** : après avoir lu, vous saurez où aller chercher quand vous n'avez pas d'idées, quels liens consulter pour les « besoins concrets », lesquels pour les « tendances », et lesquels pour les « activités réelles ».
|
||||
|
||||
**Actions** : parcourez d'abord une liste d'idées, puis consultez des petits produits rentables, ensuite les tendances et les sources plus opérationnelles, et enfin gardez 1 direction que vous êtes prêt à approfondir.
|
||||
|
||||
**Résultat** : vous obtiendrez 1 direction plus concrète, digne de validation, au lieu de rester sur de grands concepts.
|
||||
|
||||
**Navigation rapide** : [Liste d'applications de référence](#idea-apps) · [Sources de tendances](#idea-trends) · [Sources plus opérationnelles](#idea-business) · [Sources VC / accélérateurs](#idea-vc) · [Chemin le plus court](#idea-path) · [Comment l'IA peut vous aider](#idea-ai)
|
||||
:::
|
||||
|
||||
## Ce que vous apprendrez
|
||||
|
||||
1. Quels sites web sont idéaux pour parcourir directement des idées
|
||||
2. Quels sites permettent de voir des petits produits déjà rentables
|
||||
3. Quelles sources conviennent pour observer les tendances et les évolutions sectorielles
|
||||
4. Quelles sources sont plus proches des activités réelles et des paiements réels
|
||||
5. Un chemin le plus court adapté aux débutants
|
||||
|
||||
<a id="idea-apps"></a>
|
||||
## [1. Liste d'applications de référence : voyez d'abord ce que les autres font déjà](#top-idea-sources)
|
||||
|
||||
C'est le meilleur point de départ pour les débutants, car c'est le plus concret.
|
||||
|
||||
### Premier niveau : des listes d'idées directement accessibles
|
||||
|
||||
- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
L'utilisation principale de ce subreddit est : de vrais utilisateurs postent directement « j'aimerais que quelqu'un crée un XX ». Chaque post est généralement un besoin produit concret, souvent accompagné d'une description de contexte. Triez par `Top -> Past Month` ou `Top -> Past Year`, et en 20 minutes vous pourrez balayer un ensemble de besoins réels.
|
||||
- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
Similaire au précédent, mais plus orienté logiciel/App. Le format courant est « j'ai besoin d'une application qui fait XX », avec un niveau de détail plus fin, beaucoup de niches petites mais intéressantes.
|
||||
- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
Plus complet que les deux précédents. Beaucoup de posts ne sont pas qu'une seule phrase de besoin, mais incluent une analyse de marché, un modèle économique et pourquoi c'est le bon moment.
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
Publie chaque semaine des idées de startup non validées. Les champs courants incluent le public cible, le mode de monétisation et les pistes de validation initiale. Format uniforme, idéal pour un parcours rapide.
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
Génère des idées de startup par AI, on peut naviguer indéfiniment. La qualité est inégale, mais c'est parfait pour stimuler l'inspiration quand on est « complètement bloqué », avant de creuser soi-même dans des scénarios plus spécifiques.
|
||||
|
||||
### Deuxième niveau : voyez les petits produits rentables que d'autres ont déjà créés, et déduisez des idées
|
||||
|
||||
La logique de ces plateformes est : d'autres ont déjà validé le besoin, voire gagnent déjà de l'argent. Vous les consultez non pas pour copier, mais pour voir « quels petits problèmes génèrent déjà des paiements ».
|
||||
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
Recueille de nombreux cas réels de petites entreprises, généralement avec des interviews de fondateurs, des données de revenus et le processus de démarrage. Concentrez-vous sur les petits produits avec des revenus mensuels de 10 000 à 100 000 dollars — généralement plus niche et plus proches d'une échelle de produit compréhensible par tous.
|
||||
- [Indie Hackers — Products](https://www.indiehackers.com/products)
|
||||
Là où les développeurs indépendants présentent leurs produits, beaucoup publient leurs revenus et leur croissance. Triez par revenus et regardez quels problèmes concrets résolvent les produits générant quelques milliers à quelques dizaines de milliers de dollars par mois.
|
||||
- [MicroConf Blog](https://microconf.com/blog)
|
||||
Plutôt orienté Micro SaaS. Idéal pour voir des « produits assez petits, mais pour lesquels les gens sont prêts à payer ».
|
||||
- [1000 Tools](https://1000.tools/)
|
||||
Agrégateur d'outils AI. Utile pour voir quelles catégories sont déjà occupées mais avec une qualité moyenne, ou quelles directions ne sont pas encore bien couvertes dans un pays ou un secteur vertical.
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
Observez les types de produits qui apparaissent de manière récurrente, ne vous limitez pas au numéro 1 — regardez surtout les catégories où les gens continuent de créer sans qu'il n'y ait encore de gagnant clair.
|
||||
- [BetaList](https://betalist.com/)
|
||||
Idéal pour découvrir des produits en phase précoce et des équipes encore en exploration.
|
||||
|
||||
### Quand vous examinez les produits, ne regardez pas seulement le produit lui-même — regardez aussi les avis négatifs et les « services de substitution »
|
||||
|
||||
- [G2](https://www.g2.com/)
|
||||
Utilisation : regardez les avis 1 et 2 étoiles. Les avis négatifs cachent souvent « quelle étape du produit existant est mal faite ».
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
Utilisation : similaire à G2, adapté pour voir les plaintes réelles sur les produits SaaS.
|
||||
- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhu Ba Jie
|
||||
Utilisation : cherchez « faire à votre place », « saisie à votre place », « retranscription à votre place ». Si un certain service manuel se vend bien, il y a généralement derrière un processus reproductible et productisable.
|
||||
|
||||
Les signaux à repérer sont simples :
|
||||
|
||||
- Les utilisateurs se plaignent déjà des outils existants
|
||||
- Les utilisateurs paient déjà pour des services de substitution
|
||||
- Les utilisateurs ont déjà investi beaucoup de main-d'œuvre et de temps dans ce processus
|
||||
|
||||
### Quatrième niveau : regardez des vidéos, certains font le travail de décomposition d'idées pour vous
|
||||
|
||||
Si vous n'aimez pas parcourir des forums et des classements, et préférez « quelqu'un qui décompose les idées pour moi », alors les vidéos et les podcasts sont aussi très adaptés.
|
||||
|
||||
- Recherchez `Greg Isenberg startup ideas`
|
||||
Idéal pour voir quelqu'un décomposer directement 2 à 3 idées concrètes, avec un aperçu du marché, une analyse concurrentielle et un angle d'attaque.
|
||||
- Recherchez `My First Million podcast`
|
||||
Les deux animateurs font souvent des épisodes entiers de brainstorming d'idées business, à haute densité, avec souvent des niches très concrètes.
|
||||
- Recherchez `YC startup ideas` ou `Michael Seibel startup ideas`
|
||||
Adapté aux débutants, contenu direct, beaucoup expliquent comment choisir une direction.
|
||||
|
||||
<a id="idea-trends"></a>
|
||||
## [2. Sources de tendances : voir quelles directions sont en croissance](#top-idea-sources)
|
||||
|
||||
Les sites de tendances ne vous donnent pas directement des idées, mais vous aident à juger : une direction est-elle en train de monter, mérite-t-on d'y regarder de plus près.
|
||||
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
Utilise les données pour suivre les sujets et catégories de produits en croissance rapide mais pas encore entrés dans le grand public. Idéal pour voir les directions « en montée mais pas encore bondées ».
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
Recherchez un mot-clé, regardez la courbe de tendance sur l'année écoulée, puis consultez les « requêtes associées » avec les termes « en hausse ».
|
||||
- [Glimpse](https://meetglimpse.com/)
|
||||
Similaire à Google Trends.
|
||||
- Pages de synthèse de rapports sectoriels
|
||||
Adapté quand vous avez déjà une direction et voulez rapidement voir sa position dans le secteur.
|
||||
- Contenu de tendances de McKinsey / BCG / Gartner
|
||||
Plus orienté entreprises et grandes industries, adapté au B2B, à l'industrie et aux secteurs traditionnels.
|
||||
- [State of AI Report](https://www.stateof.ai/)
|
||||
Si votre direction est liée à la technologie AI elle-même, ce type de rapport annuel est idéal pour établir une vue d'ensemble.
|
||||
|
||||
En regardant les tendances, concentrez-vous sur trois choses seulement :
|
||||
|
||||
- Le terme est-il en croissance continue
|
||||
- Dans quel scénario concret s'inscrit-il
|
||||
- Qui sera le premier à y consacrer du temps, des coûts de changement ou un budget
|
||||
|
||||
<a id="idea-business"></a>
|
||||
## [3. Sources plus opérationnelles : voir qui dépense, qui se plaint, qui vend des services manuels](#top-idea-sources)
|
||||
|
||||
Si vous cherchez non pas une direction « qui a l'air cool » mais une direction « plus proche des activités réelles », il faut consulter des sources plus proches des flux de travail.
|
||||
|
||||
### Voir qui dépense vraiment et pour quoi
|
||||
|
||||
- [China Government Procurement Network](https://www.ccgp.gov.cn/)
|
||||
Utilisation : cherchez des termes comme « chantier intelligent », « système de gestion de laboratoire », « collecte de données », « gestion de clinique », « système de devis », et examinez les budgets, les exigences techniques et les scénarios d'utilisation.
|
||||
- Centres d'échange de ressources publiques de chaque province et ville
|
||||
Utilisation : voyez quels systèmes les gouvernements locaux et les entreprises d'État achètent réellement.
|
||||
- Bi Biao Wang / Qianlima Tender Network / Biao Shi Tong
|
||||
Utilisation : voyez les besoins d'achat côté entreprise et les types de systèmes à haute fréquence.
|
||||
|
||||
Le signal fort de ces sources est : il ne s'agit pas de discussions sur l'avenir, mais de la révélation que « aujourd'hui déjà, quelqu'un est prêt à payer pour cette chose ».
|
||||
|
||||
### Voir de quoi les gens se plaignent vraiment
|
||||
|
||||
- Industrie manufacturière : communautés de mécanique, forums d'automatisation industrielle
|
||||
- Santé : Dingxiangyuan, Yimaitong
|
||||
- Construction / Ingénierie : Tumu Online, forums Guanglianda
|
||||
- Finance / Comptabilité : Forum China Accounting Vision
|
||||
- Commerce extérieur : Forum Fubu Foreign Trade, Mike Quan
|
||||
- Restauration / Commerce de détail : Zhiye Catering Network, Lianshang Wang Forum
|
||||
- Sections verticales de [Reddit](https://www.reddit.com/) : `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
|
||||
- [V2EX](https://www.v2ex.com/)
|
||||
- Jike
|
||||
- Xiaohongshu
|
||||
|
||||
Ne cherchez pas seulement « AI » ou « innovation » — ce qui est plus efficace, c'est de chercher :
|
||||
|
||||
- C'est trop compliqué
|
||||
- Y a-t-il une meilleure méthode
|
||||
- Recommandez un outil
|
||||
- Excel ne suffit plus
|
||||
- I wish there was
|
||||
- is there a tool for
|
||||
- I hate
|
||||
|
||||
### Voir qui vend des services manuels répétitifs
|
||||
|
||||
- [Fiverr](https://www.fiverr.com/)
|
||||
- [Upwork](https://www.upwork.com/)
|
||||
- Zhu Ba Jie Wang
|
||||
- Taobao
|
||||
- Xianyu
|
||||
|
||||
Si vous voyez que ces services se vendent bien, ça vaut la peine d'investiguer :
|
||||
|
||||
- Transformer vos devis PDF en Excel
|
||||
- Organiser en masse vos données clients
|
||||
- Modifier votre CV / corriger vos textes / faire des transcriptions / archiver
|
||||
|
||||
Derrière ces services, il n'y a généralement pas un besoin ponctuel, mais un flux de travail qui se répète.
|
||||
|
||||
### Regarder les flux de travail complets, pas seulement les listes d'idées
|
||||
|
||||
Parfois, la méthode la plus directe est de choisir un secteur, d'examiner ses processus, et de trouver les étapes qui dépendent encore de WeChat, Excel, papier-crayon et téléphone.
|
||||
|
||||
- Commerce extérieur : trouver des fournisseurs, demande de prix, comparaison, création de devis, envoi aux clients, suivi des réponses, organisation des inspections, réservation de fret, dédouanement.
|
||||
Angle d'attaque intéressant : transformer les devis fournisseurs en devis clients.
|
||||
- Cliniques dentaires : accueil, radiographie, lecture des radios, discussion du plan de traitement, suivi, traitement, rendez-vous de contrôle.
|
||||
Angle d'attaque intéressant : expliquer le plan au patient et assurer un suivi continu.
|
||||
- Chantiers de construction : inspection, photos, envoi dans le groupe, compilation du rapport, transmission au client.
|
||||
Angle d'attaque intéressant : des photos de terrain au rapport de conformité.
|
||||
|
||||
<a id="idea-vc"></a>
|
||||
## [4. Sources VC / accélérateurs : voir « dans quelle direction souffle le vent »](#top-idea-sources)
|
||||
|
||||
Ce type de source vous aide à trouver de grandes directions, mais ne remplace pas la validation.
|
||||
|
||||
- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
Utilisation : idéal pour trouver des angles d'attaque, car il indique souvent directement « nous aimerions voir quelqu'un créer ça ».
|
||||
- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
Utilisation : plus orienté grandes tendances et jugement de secteur, idéal pour se faire une sensibilité sectorielle.
|
||||
- [NFX](https://www.nfx.com/)
|
||||
Utilisation : idéal pour balayer rapidement un ensemble de sujets de startup.
|
||||
- [Sequoia Capital](https://www.sequoiacap.com/article/)
|
||||
Utilisation : ne liste pas nécessairement des idées directement, mais parle souvent de changements de plateforme et d'opportunités.
|
||||
- [First Round Review](https://review.firstround.com/)
|
||||
Utilisation : idéal pour approfondir une direction, pas forcément une liste d'idées, mais la qualité des articles est généralement excellente.
|
||||
|
||||
Avantages de ces sources :
|
||||
|
||||
- Elles peuvent vous dire quelles directions méritent d'être suivies à l'avenir
|
||||
- Elles peuvent vous dire quels secteurs pourraient continuer à être poussés
|
||||
- Elles vous permettent d'entrer rapidement dans le jargon d'un secteur
|
||||
|
||||
Limites de ces sources :
|
||||
|
||||
- Généralement du point de vue des investisseurs
|
||||
- Ne vous disent pas nécessairement quel rôle souffre le plus
|
||||
- Ne vous disent pas nécessairement quelle étape du processus est la plus bloquante
|
||||
- Ne vous disent pas nécessairement qui paie déjà pour ça aujourd'hui
|
||||
|
||||
Donc la meilleure utilisation est : utilisez-les d'abord pour trouver une direction, puis revenez aux produits de référence, aux forums sectoriels, aux informations d'achat et aux flux de travail réels pour trouver des angles d'attaque plus concrets.
|
||||
|
||||
<a id="idea-path"></a>
|
||||
## [5. Le chemin le plus court pour ceux qui « n'ont pas d'idées et ne savent faire que des assistants »](#top-idea-sources)
|
||||
|
||||
Si vous ne prenez qu'un seul chemin le plus court, voici comment faire :
|
||||
|
||||
1. Première étape, 30 minutes.
|
||||
Ouvrez [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/), triz par `Top -> Past Year`, balayez rapidement 50 posts, et sauvegardez toutes les directions où vous vous dites « ça, je pourrais peut-être le faire ».
|
||||
2. Deuxième étape, 30 minutes.
|
||||
Ouvrez [Starter Story](https://www.starterstory.com/) ou [Indie Hackers Products](https://www.indiehackers.com/products), triez par revenus, regardez les produits à revenus moyens, pas seulement les plus performants. Trouvez des directions liées à la première étape, et voyez à qui ils vendent exactement et quelle étape ils résolvent.
|
||||
3. Troisième étape, 20 minutes.
|
||||
Allez sur [Google Trends](https://trends.google.com/) et cherchez les mots-clés associés, voyez si la tendance est à la hausse, puis regardez les termes « en hausse » dans les « requêtes associées ».
|
||||
4. Quatrième étape, 20 minutes.
|
||||
Allez sur G2 / Capterra / forums sectoriels / plateformes d'appels d'offres / Fiverr et autres, pour voir où exactement cette direction est la plus pénible aujourd'hui, et où on dépend encore du travail manuel.
|
||||
|
||||
Après ce parcours, être capable de formuler clairement cette phrase suffit :
|
||||
|
||||
- Un certain type de personne, dans un certain contexte, est bloqué par une certaine étape du processus, et s'en sort principalement avec une méthode de fortune.
|
||||
|
||||
<a id="idea-ai"></a>
|
||||
## [6. Comment l'IA peut vous aider](#top-idea-sources)
|
||||
|
||||
L'accent ici n'est pas sur l'IA, mais l'IA est très adaptée pour organiser.
|
||||
|
||||
Les deux utilisations les plus pratiques sont :
|
||||
|
||||
- Collez à l'IA les liens, titres de posts et propos d'utilisateurs que vous avez trouvés, et demandez-lui de les classer par « population / contexte / point de douleur / alternative ».
|
||||
- Demandez à l'IA de condenser un ensemble d'informations dispersées en 3 directions candidates, au lieu de continuer à diverger en 50 fonctionnalités.
|
||||
|
||||
Vous pouvez demander directement :
|
||||
|
||||
```text
|
||||
Voici les sources que j'ai consultées récemment :
|
||||
1. [collez le titre ou la citation]
|
||||
2. [collez le titre ou la citation]
|
||||
3. [collez le titre ou la citation]
|
||||
|
||||
Ne me donnez pas de liste de fonctionnalités.
|
||||
Faites seulement trois choses :
|
||||
1. Classifiez par population et contexte
|
||||
2. Identifiez les étapes problématiques qui reviennent
|
||||
3. Aidez-moi à organiser le tout en 3 directions candidates plus concrètes
|
||||
```
|
||||
|
||||
## Lectures complémentaires
|
||||
|
||||
- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
- [NFX](https://www.nfx.com/)
|
||||
- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
- [Indie Hackers - Products](https://www.indiehackers.com/products)
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
- [BetaList](https://betalist.com/)
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
- [G2](https://www.g2.com/)
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
@@ -0,0 +1,698 @@
|
||||
---
|
||||
title: "Références de scénarios d'application B2B"
|
||||
description: "Ce document recense les applications concrètes des modèles LLM dans les scénarios d'entreprise B2B, couvrant l'industrie manufacturière, le service client intelligent, l'éducation, la programmation assistée par IA, la santé, la cybersécurité, la finance, les services d'entreprise et d'autres domaines, offrant une référence aux développeurs d'applications IA destinées aux clients professionnels."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'Environ <strong>6 heures</strong>'
|
||||
|
||||
const interestPoint = ref('')
|
||||
const purpose = ref('')
|
||||
|
||||
// Pool de sujets par industrie
|
||||
const topicPool = {
|
||||
'manufacturing': [
|
||||
{ title: "Plateforme d'aide au design extérieur de bus électriques par IA", desc: "Conception de design conceptuel basée sur des modèles de génération d'images" },
|
||||
{ title: "Assistant intelligent de conception et vérification de plans", desc: "Construction d'une base de connaissances de normes de conception d'entreprise via RAG" },
|
||||
{ title: "Génération automatique et gestion de documentation technique", desc: "Génération automatique de spécifications produit et de manuels d'utilisation basée sur LLM" },
|
||||
{ title: "Assistant de génération automatique de rapports d'inspection d'équipements", desc: "Description vocale de l'état des équipements, génération structurée de rapports d'inspection" },
|
||||
{ title: "Assistant Q&R de diagnostic de pannes d'équipements industriels", desc: "Construction d'une base de connaissances vectorielle basée sur les historiques de pannes" }
|
||||
],
|
||||
'customer-service': [
|
||||
{ title: "Système de réponse automatique multicanal et génération de tickets", desc: "Intégration multi-canal, LLM compréhend l'intention et génère la réponse" },
|
||||
{ title: "Assistant de prospection et suivi de prospects potentiels", desc: "Analyse des historiques de conversations pour identifier les prospects à forte intention" },
|
||||
{ title: "Système de recherche intelligente et Q&R de connaissances internes", desc: "Construction d'une base de connaissances vectorielle à partir de documents internes" },
|
||||
{ title: "Outil de résumé intelligent de conversations et génération de tickets", desc: "Génération automatique de résumés de session et extraction d'informations clés" },
|
||||
{ title: "Système de recommandation de scripts de service client", desc: "Analyse des cas exemplaires, extraction de modèles de scripts performants" }
|
||||
],
|
||||
'education': [
|
||||
{ title: "Planification de parcours d'apprentissage linguistique personnalisé et système de tutorat intelligent", desc: "Évaluation du niveau de l'apprenant, planification des tâches quotidiennes" },
|
||||
{ title: "Plateforme de création automatique de plans de cours et de ressources pédagogiques", desc: "Génération de cadres de plans de cours basée sur le programme" },
|
||||
{ title: "Système de correction automatique et diagnostic de résultats scolaires", desc: "Correction automatique de questions ouvertes et génération de suggestions" },
|
||||
{ title: "Construction de modèles de compétences et cartographie d'apprentissage", desc: "Analyse des descriptions de postes pour extraire les compétences requises" },
|
||||
{ title: "Pratique orale de langues en scénarios individuels", desc: "LLM joue différents rôles pour des dialogues oraux" }
|
||||
],
|
||||
'programming': [
|
||||
{ title: "Assistant de complétion de code et correction automatique de bugs", desc: "Plugin IDE fournissant des suggestions de complétion en temps réel" },
|
||||
{ title: "Plateforme de construction low-code et automatisation de processus", desc: "Description en langage naturel convertie en configuration low-code" },
|
||||
{ title: "Système de génération de tests unitaires", desc: "Analyse AST du code source, génération de tests aux limites" },
|
||||
{ title: "Outil d'analyse de code et migration entre langages", desc: "Analyse de la qualité du code et suggestions d'optimisation" },
|
||||
{ title: "Outil de génération automatique de code UI frontend", desc: "Reconnaissance d'images de maquettes, génération de CSS responsive" }
|
||||
],
|
||||
'healthcare': [
|
||||
{ title: "Assistant intelligent d'interprétation de rapports médicaux", desc: "OCR pour identifier les indicateurs clés, interpréter les valeurs anormales" },
|
||||
{ title: "Conseiller en santé basé sur la recherche documentaire", desc: "Construction d'un graphe de connaissances médicales, réponses par RAG" },
|
||||
{ title: "Plateforme d'analyse décisionnelle de données de recherche clinique", desc: "Intégration de données EMR, assistance à la génération de code d'analyse statistique" },
|
||||
{ title: "Outil de génération automatique de rapports d'imagerie médicale", desc: "Description des caractéristiques d'imagerie, génération automatique de rapports structurés" },
|
||||
{ title: "Assistant intelligent de rappels médicamenteux pour maladies chroniques", desc: "Génération de rappels personnalisés, vérification des contre-indications" }
|
||||
],
|
||||
'security': [
|
||||
{ title: "Moteur de détection et correction de vulnérabilités de code", desc: "Analyse SAST du code, analyse des principes de vulnérabilité" },
|
||||
{ title: "Système de détection et interception de phishing par IA", desc: "Analyse du contenu des e-mails, identification des tentatives de phishing générées par IA" },
|
||||
{ title: "Assistant de génération automatique de rapports quotidiens de sécurité", desc: "Consolidation des journaux, extraction automatique des événements clés" },
|
||||
{ title: "Assistant de génération intelligente de rapports de tests de pénétration", desc: "Génération automatique de rapports basée sur les descriptions de vulnérabilités" },
|
||||
{ title: "Assistant de recherche et d'analyse de renseignements sur les menaces", desc: "Connexion à des sources multiples de renseignements sur les menaces" }
|
||||
],
|
||||
'finance': [
|
||||
{ title: "Assistant intelligent de génération de rapports de due diligence", desc: "Saisie de données financières, génération automatique de rapports de due diligence" },
|
||||
{ title: "Conseiller intelligent en gestion de patrimoine bancaire privé", desc: "Analyse du profil de risque du client, génération de suggestions d'allocation d'actifs" },
|
||||
{ title: "Assistant de génération et vérification de conformité de prospectus IPO", desc: "Modèles modulaires, remplissage automatique des descriptions commerciales" },
|
||||
{ title: "Système de génération automatique de rapports financiers et d'alertes d'anomalies", desc: "Génération automatique d'analyses financières et de discussions de la direction" },
|
||||
{ title: "Assistant de simulation de scripts pour agents d'assurance", desc: "Simulation de dialogues, évaluation de la conformité et de la force de persuasion" }
|
||||
],
|
||||
'enterprise': [
|
||||
{ title: "Plateforme de vérification de conformité et suggestions de modification pour le cycle de vie des contrats", desc: "Comparaison des clauses avec le référentiel réglementaire, génération de rapports de conformité" },
|
||||
{ title: "Transcription vocale de ventes et recommandation de scripts", desc: "Transcription ASR, analyse des conversations et recommandation de scripts performants" },
|
||||
{ title: "Système de génération intelligente de contenu marketing", desc: "Génération de textes marketing et extraction de points de vente" },
|
||||
{ title: "Plateforme d'analyse des dépenses publicitaires des concurrents", desc: "Collecte des publicités concurrentes, analyse des stratégies de diffusion" },
|
||||
{ title: "Système d'analyse et de recommandation de sujets tendances", desc: "Analyse des tendances et recommandation d'angles de sujets" }
|
||||
],
|
||||
'content': [
|
||||
{ title: "Plateforme d'aide à la création de contenu pour films et romans", desc: "Fourniture de synopsis, développement de personnages, génération de dialogues" },
|
||||
{ title: "Assistant intelligent de rédaction d'histoires de marque et de RP", desc: "Saisie de mots-clés de marque, génération de textes multi-styles" },
|
||||
{ title: "Système de gestion d'interaction et de diffusion en direct par avatar numérique", desc: "Avatar numérique + synthèse vocale TTS + dialogue LLM" },
|
||||
{ title: "Génération de scripts vidéo courts et montage intelligent", desc: "Génération de scripts et storyboards pour vidéos courtes" },
|
||||
{ title: "Système de génération intelligente de contenu marketing", desc: "Génération de textes marketing et extraction de points de vente" }
|
||||
],
|
||||
'government': [
|
||||
{ title: "Système de navigation vocale intelligente et de répartition automatique pour la ligne d'assistance 12345", desc: "Reconnaissance vocale, compréhension des demandes et répartition intelligente" },
|
||||
{ title: "Robot d'accueil et de questions-réponses sur les services administratifs", desc: "Recherche RAG dans la base de connaissances gouvernementales" },
|
||||
{ title: "Plateforme de correspondance et de diffusion ciblée de politiques de soutien aux entreprises", desc: "Appariement automatique des profils d'entreprises avec les politiques applicables" },
|
||||
{ title: "Assistant de pré-examen des documents administratifs et de vérification de conformité", desc: "OCR et extraction d'informations clés" },
|
||||
{ title: "Plateforme d'identification et de gestion des événements urbains", desc: "Identification du type d'événement et répartition" }
|
||||
],
|
||||
'legal': [
|
||||
{ title: "Agent de détection de risques contractuels en un clic", desc: "Identification des problèmes potentiels par comparaison avec une liste de contrôle" },
|
||||
{ title: "Conseiller IA d'évaluation du taux de succès de litiges similaires", desc: "Extraction de caractéristiques de cas, recherche et correspondance de cas similaires" },
|
||||
{ title: "Radar de surveillance en temps réel des changements législatifs", desc: "Analyse des modifications et évaluation de l'impact commercial" },
|
||||
{ title: "Outil AIGC de rédaction automatique de lettres de mise en demeure", desc: "Saisie des faits, génération de modèles de lettres de mise en demeure normalisées" },
|
||||
{ title: "Plugin de traduction en langage simple de clauses juridiques complexes", desc: "Génération d'explications accessibles" }
|
||||
],
|
||||
'travel': [
|
||||
{ title: "Générateur d'itinéraires paresseux basé sur l'AIGC", desc: "Génération d'itinéraires quotidiens" },
|
||||
{ title: "Robot de prédiction de tendances de prix de vols et d'hôtels et verrouillage automatique des prix bas", desc: "Modèle ML de prédiction des tendances de prix" },
|
||||
{ title: "Système de pré-examen des documents de visa et d'aide au remplissage automatique", desc: "Vérification OCR de l'exhaustivité des informations" },
|
||||
{ title: "Assistant de traduction vocale en temps réel et de visualisation de menus en voyage", desc: "Traduction vocale hors ligne, OCR de photos de menus" },
|
||||
{ title: "Assistant de génération de récits de voyage et de posts sociaux à partir de traces de voyage", desc: "Extraction d'informations de photos, génération de textes de récits" }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: "Compagnon virtuel d'accompagnement profond 24h/24 basé sur les LLM", desc: "Système de mémorisation stockant l'historique des conversations" },
|
||||
{ title: "Conseiller AI de reconnaissance émotionnelle multimodale et d'accompagnement psychologique", desc: "Analyse du ton vocal + reconnaissance émotionnelle textuelle" },
|
||||
{ title: "Agent numérique de rééducation cognitive et de stimulation mnésique pour personnes atteintes de la maladie d'Alzheimer", desc: "Jeux cognitifs, stimulation par vieilles photos" },
|
||||
{ title: "Coach de simulation sociale AIGC pour personnes souffrant d'anxiété sociale", desc: "Simulation de scénarios sociaux virtuels" },
|
||||
{ title: "Assistant de suivi d'humeur 24h/24 et de motivation positive par IA", desc: "Analyse des tendances d'humeur et génération de contenu motivant" }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: "Moteur de décision autonome de PNJ pour jeux en monde ouvert basé sur les LLM", desc: "Arbre de comportement des PNJ fusionné avec les décisions LLM" },
|
||||
{ title: "Outil AIGC de progression narrative et d'assistance MJ pour murder games immersifs", desc: "Choix des joueurs déclenchant des branches narratives" },
|
||||
{ title: "Modificateur génératif de fins pour fiction interactive", desc: "Les choix des lecteurs influencent le cours de l'histoire" },
|
||||
{ title: "Analyste visuel CV et commentateur intelligent de parties esport", desc: "Analyse en temps réel du gameplay" },
|
||||
{ title: "Système de génération automatique de livres audio multi-voix par TTS", desc: "Attribution de rôles textuels, génération de voix personnalisées" }
|
||||
],
|
||||
'ecommerce': [
|
||||
{ title: "Outil de production en masse de fiches produit à fort taux de conversion par AIGC", desc: "Génération de textes vendeurs et de descriptions de scènes" },
|
||||
{ title: "Usine de génération de vidéos d'essayage virtuel par IA pour vêtements", desc: "Génération d'essayages virtuels" },
|
||||
{ title: "Assistant de traduction et d'adaptation multilingue LLM pour e-commerce transfrontalier", desc: "Traduction multilingue de descriptions de produits" },
|
||||
{ title: "Système de live shopping 24h/24 par avatar numérique AIGC", desc: "Avatar numérique + génération de scripts en temps réel" },
|
||||
{ title: "Moteur de détection de tendances et de prédiction de produits populaires par IA", desc: "Analyse des tendances, suggestions de sélection" }
|
||||
],
|
||||
'energy': [
|
||||
{ title: "Analyse IA des comportements de consommation domestique et conseiller en économie d'énergie", desc: "Analyse des modes de consommation, génération de conseils d'économie" },
|
||||
{ title: "Système de détection CV de défauts de panneaux photovoltaïques par drone", desc: "Inspection par drone, analyse d'images thermoinfrarouges" },
|
||||
{ title: "Agent de prédiction de tendances de prix de l'énergie et de stratégie automatique de profit", desc: "Modèle de prédiction des prix, génération de stratégies" },
|
||||
{ title: "Assistant IA de comptabilisation automatique des émissions carbone et de génération de rapports ESG", desc: "Calcul des facteurs d'émission, génération de rapports ESG" },
|
||||
{ title: "Système IA de prévision de charge en conditions météorologiques extrêmes et de commande d'urgence", desc: "Modèle de prévision de charge, génération de stratégies d'ordonnancement" }
|
||||
],
|
||||
'av-media': [
|
||||
{ title: "Outil IA d'identification de moments forts et de montage automatique de vidéos longues", desc: "Analyse du contenu vidéo, identification des images clés" },
|
||||
{ title: "Assistant IA de séparation intelligente du bruit de fond et d'amélioration vocale", desc: "Modèle de séparation audio, suppression du bruit de fond" },
|
||||
{ title: "Station de restauration 4K et colorisation IA pour images anciennes", desc: "Modèle de super-résolution, colorisation automatique" },
|
||||
{ title: "Système de doublage TTS de qualité professionnelle et contrôle des émotions", desc: "Modèle TTS multi-voix, contrôle émotionnel" },
|
||||
{ title: "Assistant de transcription intelligente et d'extraction de TODO à partir d'enregistrements de réunions", desc: "Séparation et transcription vocale de réunions multi-participants" }
|
||||
],
|
||||
'ai-marketing': [
|
||||
{ title: "Moteur AIGC de rédaction automatique de posts viraux pour Xiaohongshu", desc: "Génération de posts sponsorisés, optimisation d'emojis" },
|
||||
{ title: "Outil IA de mise en page de supports marketing et d'adaptation multi-tailles", desc: "Association intelligente de modèles de supports" },
|
||||
{ title: "Plateforme AIGC de création de logos et de construction de charte VI", desc: "Génération créative de logos, génération de normes VI" },
|
||||
{ title: "Assistant de suivi des tendances et de génération d'idées marketing opportunistes", desc: "Analyse des angles marketing, génération de concepts créatifs" },
|
||||
{ title: "Outil AIGC de génération de scripts vidéo courts et d'aide au storyboard", desc: "Génération de scripts et de storyboards, conseils de tournage" }
|
||||
],
|
||||
'data-intelligence': [
|
||||
{ title: "Outil de génération automatique de requêtes SQL en langage naturel", desc: "Conversion de requêtes en langage naturel en SQL" },
|
||||
{ title: "Système intelligent d'inventaire et de classification des actifs de données d'entreprise", desc: "Collecte de métadonnées, classification automatique" },
|
||||
{ title: "Moteur de détection automatique et de suggestions de correction d'anomalies de données", desc: "Moteur de règles + modèle ML de détection d'anomalies" },
|
||||
{ title: "Assistant de génération et de configuration de rapports intelligents", desc: "Génération conversationnelle de configurations de rapports" },
|
||||
{ title: "Assistant Q&R intelligent sur les indicateurs de données", desc: "Construction d'une base de connaissances à partir de documents de définition d'indicateurs" }
|
||||
]
|
||||
}
|
||||
|
||||
// Table de correspondance des recommandations
|
||||
const recommendationMap = {
|
||||
'creative-content': {
|
||||
'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
|
||||
'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
|
||||
'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
|
||||
'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
|
||||
},
|
||||
'tech-service': {
|
||||
'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
|
||||
'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
|
||||
'improve-experience': ['customer-service', 'enterprise', 'programming'],
|
||||
'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
|
||||
},
|
||||
'data-intel': {
|
||||
'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
|
||||
'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
|
||||
'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
|
||||
'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
|
||||
},
|
||||
'user-service': {
|
||||
'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
|
||||
'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
|
||||
'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
|
||||
'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
|
||||
},
|
||||
'industry-solution': {
|
||||
'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
|
||||
'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
|
||||
'improve-experience': ['healthcare', 'education', 'government', 'travel'],
|
||||
'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
|
||||
}
|
||||
}
|
||||
|
||||
const interestOptions = [
|
||||
{ label: 'Création de contenu', value: 'creative-content', desc: 'Textes, images, vidéos et autres contenus créatifs' },
|
||||
{ label: 'Outils techniques', value: 'tech-service', desc: 'Outils de développement, automatisation, assistance au code' },
|
||||
{ label: 'Analyse de données', value: 'data-intel', desc: 'Analyse de données, prévision, décision intelligente' },
|
||||
{ label: 'Expérience utilisateur', value: 'user-service', desc: 'Service client, marketing, expérience utilisateur' },
|
||||
{ label: 'Solutions sectorielles', value: 'industry-solution', desc: 'Applications approfondies dans des secteurs spécifiques' }
|
||||
]
|
||||
|
||||
const purposeOptions = [
|
||||
{ label: 'Améliorer l\'efficacité', value: 'increase-efficiency', desc: 'Automatisation, accélération des processus' },
|
||||
{ label: 'Réduire les coûts', value: 'reduce-cost', desc: 'Réduction de la main-d\'œuvre, optimisation des ressources' },
|
||||
{ label: 'Améliorer l\'expérience', value: 'improve-experience', desc: 'Satisfaction client, qualité de service' },
|
||||
{ label: 'Innovation commerciale', value: 'innovate-business', desc: 'Nouveaux produits, nouveaux modèles' }
|
||||
]
|
||||
|
||||
const industries = [
|
||||
{ key: 'manufacturing', name: 'Industrie manufacturière', anchor: '#_1-industrie-manufacturiere' },
|
||||
{ key: 'customer-service', name: 'Service client intelligent', anchor: '#_2-service-client-intelligent' },
|
||||
{ key: 'education', name: 'Éducation', anchor: '#_3-education' },
|
||||
{ key: 'programming', name: 'Programmation intelligente', anchor: '#_4-programmation-intelligente' },
|
||||
{ key: 'healthcare', name: 'Santé', anchor: '#_5-sante' },
|
||||
{ key: 'security', name: 'Cybersécurité', anchor: '#_6-cybersecurite' },
|
||||
{ key: 'finance', name: 'Finance, banque et assurance', anchor: '#_7-finance-banque-et-assurance' },
|
||||
{ key: 'enterprise', name: 'Services d\'entreprise', anchor: '#_8-services-dentreprise' },
|
||||
{ key: 'content', name: 'Production et exploitation de contenu', anchor: '#_9-production-et-exploitation-de-contenu' },
|
||||
{ key: 'government', name: 'Administration publique intelligente', anchor: '#_10-administration-publique-intelligente' },
|
||||
{ key: 'legal', name: 'Affaires juridiques et gestion contractuelle', anchor: '#_11-affaires-juridiques-et-gestion-contractuelle' },
|
||||
{ key: 'travel', name: 'Tourisme et voyages', anchor: '#_12-tourisme-et-voyages' },
|
||||
{ key: 'emotion', name: 'Accompagnement émotionnel', anchor: '#_13-accompagnement-emotionnel' },
|
||||
{ key: 'entertainment', name: 'Loisirs et divertissement', anchor: '#_14-loisirs-et-divertissement' },
|
||||
{ key: 'ecommerce', name: 'E-commerce', anchor: '#_15-e-commerce' },
|
||||
{ key: 'energy', name: 'Énergie', anchor: '#_16-energie' },
|
||||
{ key: 'av-media', name: 'Audiovisuel', anchor: '#_17-audiovisuel' },
|
||||
{ key: 'ai-marketing', name: 'Marketing IA', anchor: '#_18-marketing-ia' },
|
||||
{ key: 'data-intelligence', name: 'Intelligence de données', anchor: '#_19-intelligence-de-donnees' }
|
||||
]
|
||||
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!interestPoint.value || !purpose.value) return []
|
||||
const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
|
||||
const topics = []
|
||||
keys.forEach(key => {
|
||||
const industry = industries.find(item => item.key === key)
|
||||
const industryTopics = topicPool[key] || []
|
||||
if (industry && industryTopics.length > 0) {
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
selected.forEach(topic => {
|
||||
topics.push({ ...topic, industryKey: key, industryName: industry.name, industryAnchor: industry.anchor })
|
||||
})
|
||||
}
|
||||
})
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
const currentSelection = computed(() => {
|
||||
const interest = interestOptions.find(i => i.value === interestPoint.value)
|
||||
const pur = purposeOptions.find(p => p.value === purpose.value)
|
||||
return { interest: interest?.label || '', purpose: pur?.label || '' }
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
setTimeout(() => {
|
||||
let element = document.querySelector(anchor)
|
||||
if (!element) {
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
if (!element) {
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
element.style.backgroundColor = '#f0f9ff'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => { element.style.backgroundColor = ''; element.style.padding = '' }, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
interestPoint.value = ''
|
||||
purpose.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# Références de scénarios d'application B2B
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Applications B2B', 'Applications industrielles', 'Scénarios IA', 'Références de mise en œuvre', 'Solutions sectorielles']" coreOutput="Découvrir plus de 15 scénarios d'application B2B" expectedOutput="Trouver une direction de projet adaptée aux clients professionnels">
|
||||
|
||||
Ce document recense les <strong>applications concrètes des modèles LLM dans les scénarios d'entreprise B2B</strong>. Contrairement aux applications B2C centrées sur l'expérience utilisateur et l'émotion, les produits B2B mettent l'accent sur la <strong>résolution de besoins métier réels, l'amélioration de l'efficacité et la réduction des coûts</strong>. Chaque scénario présente une <strong>faisabilité de mise en œuvre concrète</strong>, couvrant une démarche complète de <strong>l'analyse des besoins à l'implémentation technique</strong>, destinée aux développeurs d'applications IA pour les clients professionnels.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Sélection rapide par secteur
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Trouvez votre scénario d'application</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Sélectionnez votre domaine d'intérêt et votre objectif, le système recommandera les scénarios pertinents. Cliquez sur un tag pour accéder au chapitre correspondant.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="interestPoint" placeholder="Sélectionnez un domaine d'intérêt" style="width: 100%;">
|
||||
<el-option v-for="item in interestOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="purpose" placeholder="Sélectionnez un objectif" style="width: 100%;">
|
||||
<el-option v-for="item in purposeOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
|
||||
{{ recommendationTopics.length }} scénarios d'application recommandés
|
||||
<span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
|
||||
({{ currentSelection.interest }} + {{ currentSelection.purpose }})
|
||||
</span>
|
||||
</div>
|
||||
<el-table :data="recommendationTopics" style="width: 100%; cursor: pointer;" @row-click="(row) => scrollToAnchor(row.industryAnchor)" highlight-current-row>
|
||||
<el-table-column prop="title" label="Scénario d'application" min-width="300">
|
||||
<template #default="scope">
|
||||
<div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="industryName" label="Secteur" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px; font-size: 12px; color: #909399;">
|
||||
💡 Cliquez sur n'importe quelle ligne du tableau pour accéder au chapitre correspondant
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
|
||||
<span v-if="!interestPoint && !purpose">💡 Veuillez sélectionner un domaine d'intérêt et un objectif</span>
|
||||
<span v-else-if="!interestPoint">💡 Veuillez sélectionner un domaine d'intérêt</span>
|
||||
<span v-else>💡 Veuillez sélectionner un objectif</span>
|
||||
</div>
|
||||
|
||||
<div v-if="interestPoint || purpose" style="margin-top: 12px;">
|
||||
<el-button size="small" @click="resetSelection">Réinitialiser</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## Présentation rapide des secteurs
|
||||
|
||||
### Choix technologique courant
|
||||
|
||||
En développement d'applications IA, les directions technologiques courantes incluent :
|
||||
|
||||
1. **LLM (grands modèles de langage)** : compétents pour les tâches en langage naturel telles que la conversation, la génération de texte, le résumé, la traduction, etc., adaptés à la construction d'applications de service client, de création de contenu et de Q&R.
|
||||
2. **VLM (modèles vision-langage)** : combinent la compréhension visuelle et les capacités linguistiques pour la description d'images, la réponse aux questions visuelles, la génération de contenu multimodal, etc.
|
||||
3. **GenAI (IA générative)** : inclut la génération de texte, d'images (Stable Diffusion, DALL·E), de vidéos, etc., permettant de créer rapidement du contenu créatif.
|
||||
|
||||
### Stratégie de sélection
|
||||
|
||||
Les apprenants peuvent choisir leur direction en fonction des dimensions suivantes :
|
||||
|
||||
1. **Orienté par l'intérêt** : prioriser les secteurs ou directions techniques qui vous intéressent.
|
||||
2. **Adaptation sectorielle** : tirer parti de votre expérience professionnelle ou de vos ressources.
|
||||
3. **Difficulté technique** : choisir en fonction de votre niveau technique.
|
||||
|
||||
## 1. Industrie manufacturière
|
||||
|
||||
Les scénarios de l'industrie manufacturière s'articulent autour de trois axes principaux : l'aide à la conception, l'optimisation de la production et la maintenance intelligente.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Plateforme d'aide au design extérieur de bus électriques par IA | Génération de designs conceptuels, vérification des normes via LLM, intégration Three.js pour le rendu 3D |
|
||||
| 2 | Assistant intelligent de conception et vérification de plans | Base de connaissances RAG des normes de conception, API CAD pour l'analyse automatique des plans |
|
||||
| 3 | Génération automatique et gestion de documentation technique | Génération automatique de spécifications et manuels à partir de la base de données produit, stockage vectoriel ChromaDB |
|
||||
| 4 | Assistant de génération automatique de rapports d'inspection d'équipements | Description vocale de l'état des équipements, génération structurée de rapports par LLM, association automatique des historiques de pannes |
|
||||
| 5 | Système intelligent de planification et d'ordonnancement pour chariots industriels | LLM analyse les commandes et les positions d'entrepôt, génération de plans d'ordonnancement optimaux via API cartographiques |
|
||||
| 6 | Entrepôt de données basé sur LLM et recherche en langage naturel | Conversion Text-to-SQL, visualisation Superset, moteur OLAP Doris ou ClickHouse |
|
||||
| 7 | Assistant Q&R de diagnostic de pannes d'équipements industriels | Base de connaissances vectorielle construite à partir d'historiques de pannes, suggestions de diagnostic par LLM |
|
||||
| 8 | Génération intelligente de rapports de contrôle qualité et classification de défauts | OCR pour identifier les défauts, génération structurée de rapports par LLM, classification automatique des types de défauts |
|
||||
| 9 | Assistant intelligent d'inventaire et génération de rapports d'inventaire | Saisie des données d'inventaire, comparaison automatique avec le stock système, alertes sur les écarts |
|
||||
| 10 | Système Q&R intelligent d'optimisation de processus de fabrication | Base de connaissances RAG construite à partir de documents de processus, suggestions d'optimisation par LLM |
|
||||
|
||||
## 2. Service client intelligent
|
||||
|
||||
Les scénarios de service client se concentrent sur l'amélioration de l'efficacité et l'optimisation de l'expérience utilisateur.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Système de réponse automatique multicanal et génération de tickets | Intégration multi-canal (WeChat, APP, site web), compréhension LLM des intentions, création automatique de tickets, construction du flux conversationnel via LangChain, stockage MySQL |
|
||||
| 2 | Assistant de prospection et suivi de prospects potentiels | Analyse LLM des historiques de conversations, identification et scoring des prospects à forte intention, système de recommandation avec filtrage collaboratif |
|
||||
| 3 | Système de recherche intelligente et Q&R de connaissances internes | Base de connaissances vectorielle construite à partir de Confluence et documents internes, réponses LLM via RAG |
|
||||
| 4 | Système d'enquête de satisfaction et d'amélioration du service | Analyse LLM du contenu des conversations pour la classification émotionnelle et le scoring de satisfaction, rapports BI |
|
||||
| 5 | Outil de résumé intelligent de conversations et génération de tickets | Résumé automatique de session après clôture de la conversation, extraction d'informations clés, remplissage automatique des champs du ticket |
|
||||
| 6 | Assistant de détection automatique de conformité des scripts de service | Détection en temps réel de la conformité des réponses du service client, identification des mots sensibles, suggestions de modification |
|
||||
| 7 | Outil de résumé automatique et classification de tickets de service | Résumé automatique et étiquetage de longues conversations par LLM, recherche plein texte via Elasticsearch |
|
||||
| 8 | Outil de surveillance émotionnelle des clients et alertes d'anomalies | Analyse en temps réel des caractéristiques vocales et du sentiment textuel, alertes LLM sur les émotions anormales, notifications WebSocket |
|
||||
| 9 | Système de recommandation de scripts de service client performants | Analyse LLM des conversations exemplaires, extraction de modèles de scripts performants, recommandation contextuelle en temps réel |
|
||||
| 10 | Assistant d'analyse de contenu et de contrôle qualité pour appels sortants | Transcription ASR des appels sortants, analyse de contenu par LLM, génération automatique de rapports de contrôle et suggestions d'amélioration |
|
||||
|
||||
## 3. Éducation
|
||||
|
||||
Les scénarios éducatifs visent à réaliser un enseignement personnalisé et une gestion éducative intelligente.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Planification de parcours d'apprentissage linguistique personnalisé et système de tutorat intelligent | Évaluation LLM du niveau de l'apprenant, planification quotidienne des tâches d'apprentissage, algorithme de recommandation combinant graphe de connaissances |
|
||||
| 2 | Plateforme de création automatique de plans de cours et de ressources pédagogiques | Génération LLM de cadres de plans de cours et de conceptions pédagogiques, stockage vectoriel de plans de cours et supports, recherche par mots-clés et recommandation de similarité |
|
||||
| 3 | Système de correction automatique et diagnostic de résultats scolaires | Correction automatique LLM de questions ouvertes avec suggestions, localisation des lacunes via graphe de connaissances |
|
||||
| 4 | Construction de modèles de compétences et cartographie d'apprentissage | Analyse LLM des descriptions de postes pour extraire les compétences, construction de profils de compétences, génération de cartes d'apprentissage personnalisées |
|
||||
| 5 | Outil de construction de programmes scolaires et de création de supports de cours | Analyse LLM des caractéristiques de l'école et des besoins des élèves, génération de cadres de programmes scolaires, intégration d'API de génération PPT |
|
||||
| 6 | Pratique orale de langues en scénarios individuels | LLM joue différents rôles pour des dialogues oraux, reconnaissance ASR de la prononciation et notation, synthèse TTS de la prononciation standard |
|
||||
| 7 | Plateforme de recommandation et d'orientation universitaire basée sur le big data | Analyse LLM des scores, classements et intérêts des candidats, recommandation d'établissements et de filières basée sur les données d'admission |
|
||||
| 8 | Assistant de code pour l'initiation à la programmation des enfants | Explication LLM de la logique du code et guidance de programmation, support commutation bloc-langage et Python |
|
||||
| 9 | Outil de génération automatique de cartes mentales de connaissances et recommandation de parcours | Saisie d'un sujet de cours, génération automatique de cartes mentales par LLM, recommandation du contenu suivant en fonction de la progression |
|
||||
| 10 | Moteur de notation et de correction automatique de compositions en chinois et anglais | Scoring multidimensionnel par LLM (structure, langue, diversité) et génération d'annotations, comparaison avec des modèles de compositions |
|
||||
|
||||
## 4. Programmation intelligente
|
||||
|
||||
Les scénarios de programmation intelligente visent à améliorer l'efficacité du développement et la qualité du code.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Assistant de complétion de code et correction automatique de bugs | Complétion de code en temps réel via plugin IDE basé sur un modèle CodeLlama fine-tuné, analyse LLM des piles d'erreur pour localiser les bugs et générer le code correctif |
|
||||
| 2 | Plateforme de construction low-code et automatisation de processus | Description en langage naturel convertie par LLM en configuration low-code ou en squelette de code |
|
||||
| 3 | Système de génération de tests unitaires | Analyse AST du code source pour extraire la logique des fonctions, LLM génère des tests aux limites et aux scénarios d'exception, intégration Jest/Pytest |
|
||||
| 4 | Outil d'analyse de code et migration entre langages | Analyse de la structure du code via Tree-sitter, suggestions d'optimisation par LLM, migration entre langages via moteur de règles |
|
||||
| 5 | Outil de génération automatique de requêtes SQL en langage naturel | Conversion LLM de requêtes en langage naturel en SQL, support des jointures multi-tables et des agrégations |
|
||||
| 6 | Plateforme de tests API automatisés et génération de documentation | Analyse LLM des commentaires de code et des définitions d'API, génération automatique de tests et de documentation API, intégration Postman |
|
||||
| 7 | Outil de capture et de maintenance intelligente de scripts de tests UI | Plugin navigateur pour capturer les trajectoires utilisateur, LLM analyse l'intention et génère des scripts de test, correction par IA des localisateurs obsolètes |
|
||||
| 8 | Analyse de journaux système et localisation de pannes | Collecte de journaux via ELK Stack, analyse LLM des journaux anormaux pour extraire les informations clés et identifier la cause racine, suggestions de correction |
|
||||
| 9 | Outil de génération automatique de code UI frontend | Reconnaissance OCR de la structure de mise en page des maquettes, génération par LLM de CSS responsive et de composants, intégration TailwindCSS |
|
||||
| 10 | Assistant intelligent de conception et de modélisation de structures de bases de données | Saisie des documents de besoins métier, génération automatique de diagrammes ER et de structures de tables, support d'export vers MySQL/PostgreSQL |
|
||||
|
||||
## 5. Santé
|
||||
|
||||
Les scénarios de santé visent à améliorer l'efficacité du diagnostic et la qualité des services médicaux.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Assistant intelligent d'interprétation de rapports médicaux | Upload de photos de rapports médicaux, OCR pour identifier les indicateurs clés, interprétation LLM des valeurs anormales et génération d'explications accessibles |
|
||||
| 2 | Conseiller en santé basé sur la recherche documentaire | Construction d'un graphe de connaissances médicales (CIM-10, notices de médicaments, guides de diagnostic), réponses par RAG |
|
||||
| 3 | Plateforme d'analyse décisionnelle de données de recherche clinique | Intégration de données EMR et de résultats de laboratoire, assistance LLM à la génération de code d'analyse statistique et de visualisations |
|
||||
| 4 | Outil de génération automatique de rapports d'imagerie médicale | Description des caractéristiques d'imagerie par le radiologue, génération automatique de rapports structurés par LLM, support de modèles pour les types d'examens courants |
|
||||
| 5 | Génération intelligente et résolution automatique de questions d'examens médicaux | Saisie de chapitres et de points de connaissances, génération LLM d'exercices et d'explications, archivage automatique des erreurs et analyse des lacunes |
|
||||
| 6 | Assistant Q&R intelligent sur les notices de médicaments | Upload de photos ou saisie de noms de médicaments, réponses LLM sur le dosage, les effets secondaires et les précautions |
|
||||
| 7 | Assistant de génération d'articles de vulgarisation médicale | Saisie de noms de maladies et de publics cibles, génération LLM d'articles vulgarisés, support de versions multiples (patient/famille) |
|
||||
| 8 | Outil de génération automatique de rapports d'imagerie médicale | Description des caractéristiques d'imagerie par le radiologue, génération automatique de rapports structurés par LLM, support de modèles pour les types d'examens courants |
|
||||
| 9 | Assistant de génération et d'archivage de comptes rendus opératoires | Saisie vocale des étapes clés pendant l'opération, génération structurée de comptes rendus par LLM, association automatique des codes opératoires |
|
||||
| 10 | Assistant intelligent de rappels médicamenteux pour maladies chroniques | Saisie de la liste des médicaments du patient, génération LLM de rappels personnalisés, vérification des contre-indications et Q&R interactif |
|
||||
|
||||
## 6. Cybersécurité
|
||||
|
||||
Les scénarios de cybersécurité se concentrent sur la protection et la gestion des risques.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Moteur de détection et correction de vulnérabilités de code | Analyse statique du code (SAST), analyse LLM des principes de vulnérabilité et génération de suggestions de correction, intégration au pipeline CI/CD |
|
||||
| 2 | Système de détection et interception de phishing par IA générative | Analyse LLM du contenu des e-mails, des caractéristiques de l'expéditeur et de la sécurité des liens, identification du phishing généré par IA, interception en temps réel via la passerelle de messagerie |
|
||||
| 3 | Assistant de génération automatique de rapports quotidiens de sécurité | Consolidation des journaux des équipements de sécurité, extraction automatique des événements clés par LLM, marquage highlight des événements anormaux |
|
||||
| 4 | Assistant Q&R intelligent sur les connaissances en sécurité | Base de connaissances vectorielle construite à partir de documents de sécurité et de la base CVE, réponses LLM sur les techniques de sécurité et les recommandations de traitement |
|
||||
| 5 | Assistant de génération intelligente de rapports de tests de pénétration | Après les tests de pénétration, génération automatique de rapports par LLM basée sur les descriptions de vulnérabilités, génération en masse de suggestions de correction |
|
||||
| 6 | Protection contre le code malveillant et surveillance de la conformité à la vie privée | Analyse en bac à sable des comportements des fichiers suspects, identification par LLM des caractéristiques malveillantes et génération de signatures, scan d'identification des données privées |
|
||||
| 7 | Outil de génération de listes de contrôle de conformité de la configuration de sécurité | Saisie du type de système cible, génération LLM de listes de contrôle, support des normes telles que la protection classifiée 2.0 et CIS |
|
||||
| 8 | Assistant de recherche et d'analyse de renseignements sur les menaces | Connexion à des sources multiples de renseignements (open source, commerciaux), interprétation LLM des renseignements et corrélation avec les actifs de l'entreprise, recommandation de stratégies de protection |
|
||||
| 9 | Assistant de génération de rapports post-incident de sécurité | Après un incident de sécurité, génération automatique de rapports post-mortem par LLM basée sur la chronologie, analyse de la cause racine et suggestions d'amélioration |
|
||||
| 10 | Centre de surveillance et d'alerte sur les menaces mondiales | Collecte de données de sécurité et de divulgations de vulnérabilités via scraping, extraction LLM des informations clés et évaluation de l'impact, alertes par e-mail/SMS |
|
||||
|
||||
## 7. Finance, banque et assurance
|
||||
|
||||
Les scénarios financiers s'articulent autour du contrôle des risques et de l'intelligence métier.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Assistant intelligent de génération de rapports de due diligence de crédit | Saisie des informations de base et des données financières de l'entreprise, génération automatique de rapports de due diligence, marquage automatique des points de risque |
|
||||
| 2 | Conseiller intelligent en gestion de patrimoine bancaire privé | Analyse LLM du profil de risque et des objectifs financiers du client, génération de suggestions d'allocation d'actifs, connexion aux produits de gestion de patrimoine et aux fonds |
|
||||
| 3 | Assistant de génération et de vérification de conformité de prospectus IPO | Modèles modulaires de prospectus, remplissage automatique par LLM des descriptions commerciales et des facteurs de risque, vérification de cohérence par moteur de règles |
|
||||
| 4 | Système de génération automatique de rapports financiers et d'alertes d'anomalies | Collecte automatique des données du système financier, génération LLM d'analyses financières et de discussions de la direction, alertes sur les indicateurs anormaux |
|
||||
| 5 | Assistant d'extraction d'informations de justificatifs et Q&R | Upload de photos de factures, reconnaissance OCR des informations, réponses LLM aux questions liées aux justificatifs, support de factures de TVA, reçus de train, etc. |
|
||||
| 6 | Assistant de recherche et Q&R de jurisprudence | Base de connaissances construite à partir de sanctions réglementaires, réponses LLM aux questions de conformité et références de cas |
|
||||
| 7 | Assistant de simulation de scripts pour agents d'assurance | LLM joue différents types de clients pour des dialogues simulés, évaluation de la conformité et de la force de persuasion des scripts, analyse de transcriptions d'enregistrements |
|
||||
| 8 | Plateforme d'analyse de clauses de polices d'assurance et comparaison des concurrents | Analyse structurée des clauses, génération LLM de résumés des points forts et des points d'attention |
|
||||
| 9 | Service de reconnaissance émotionnelle dans les conversations clients | Reconnaissance émotionnelle vocale combinée à la détection de conformité des scripts, feedback en temps réel à l'agent pour amélioration |
|
||||
| 10 | Assistant intelligent de suivi et de Q&R de progression de sinistres | Saisie du numéro de police ou de déclaration de sinistre par l'utilisateur, consultation LLM de la progression du sinistre et réponses aux questions liées |
|
||||
|
||||
## 8. Services d'entreprise
|
||||
|
||||
Les scénarios de services d'entreprise visent à améliorer l'efficacité opérationnelle et le niveau de management.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Plateforme d'analyse de rétention et d'alerte de churn | Collecte de données comportementales via tracking, modèle ML de prédiction du churn, génération LLM de suggestions de rétention |
|
||||
| 2 | Plateforme de prospection et marketing par e-mail pour prospects B2B | Filtrage des données commerciales pour identifier les cibles, génération LLM de contenu marketing personnalisé, connexion à une plateforme d'envoi groupé |
|
||||
| 3 | Plateforme de suivi du pipeline commercial et de prévision de performance | Collecte automatique de données CRM, analyse LLM de l'entonnoir des ventes et prévision des objectifs, alertes push aux managers |
|
||||
| 4 | Radar de surveillance de l'e-réputation de marque et d'alerte de crise | Collecte de données d'opinion sur tout le web (réseaux sociaux, actualités, forums), analyse LLM du sentiment et des tendances de propagation, alertes de crise |
|
||||
| 5 | Assistant de rédaction intelligente d'e-mails professionnels et de gestion émotionnelle | Compréhension contextuelle des e-mails, génération LLM de brouillons professionnels, feedback d'analyse émotionnelle |
|
||||
| 6 | Système d'analyse intelligente de CV et de correspondance postes | Analyse PDF des CV pour extraire les informations clés, correspondance LLM avec les postes appropriés et génération de suggestions d'entretien, intégration ATS |
|
||||
| 7 | Assistant d'accueil et Q&R pour les nouveaux employés | Recherche RAG dans la base de connaissances des documents d'intégration, réponses LLM aux questions fréquentes des nouveaux employés |
|
||||
| 8 | Plateforme de feedback sur la performance et gestion OKR | Collecte de données OKR, analyse LLM de l'avancement des objectifs et génération de suggestions de feedback, collecte de feedback 360° |
|
||||
| 9 | Prise de notes intelligentes de réunions et gestion des TODO | Transcription des enregistrements de réunions, extraction LLM des points clés et des TODO, création automatique de tâches dans le système de gestion |
|
||||
| 10 | Reconnaissance de factures et traitement automatique de remboursements | Reconnaissance OCR des informations de factures, vérification automatique de l'authenticité et de la conformité des remboursements, connexion au système financier |
|
||||
|
||||
## 9. Production et exploitation de contenu
|
||||
|
||||
Les scénarios de production et d'exploitation de contenu se concentrent sur la création et le trafic.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Plateforme d'aide à la création de contenu pour films et romans | Assistance LLM à la création : synopsis, développement de personnages, génération de dialogues ; visualisation de la structure narrative en carte mentale |
|
||||
| 2 | Assistant intelligent de rédaction d'histoires de marque et de RP | Saisie de mots-clés de marque et d'informations produit, génération LLM de plusieurs versions stylistiques de textes ; intégration de tests A/B |
|
||||
| 3 | Système de gestion d'interaction et de diffusion en direct par avatar numérique | Modélisation d'avatar + synthèse vocale TTS + dialogue LLM, réponse en temps réel aux commentaires en direct ; intégration OBS pour la diffusion |
|
||||
| 4 | Génération de scripts vidéo courts et montage intelligent | Génération LLM de scripts et de storyboards, Sora/Runway pour les extraits vidéo ; assemblage automatique par l'outil de montage |
|
||||
| 5 | Transcription vocale de ventes et recommandation de scripts | Transcription ASR des appels téléphoniques, analyse LLM des conversations et recommandation de scripts performants ; intégration CRM |
|
||||
| 6 | Système de génération intelligente de contenu marketing | Saisie des informations produit, génération LLM de textes marketing et d'extraction de points de vente ; intégration de modèles Canva/Gaoding Design |
|
||||
| 7 | Système de surveillance en temps réel du ROI des publicités et d'optimisation stratégique | Connexion API aux plateformes publicitaires pour collecter les données, analyse LLM de l'efficacité et génération de suggestions d'optimisation, alertes sur les anomalies |
|
||||
| 8 | Analyse de mots-clés et de trafic des moteurs de recherche | Collecte de données Baidu Index et 5118, analyse LLM des tendances des mots-clés et de la compétitivité, recommandation de sujets |
|
||||
| 9 | Plateforme d'analyse des dépenses publicitaires des concurrents | Collecte de données publicitaires via API de plateformes tierces, analyse LLM des stratégies de diffusion et des caractéristiques créatives |
|
||||
| 10 | Système d'analyse intelligente des tendances et de recommandation de sujets | Collecte de données de tendances (Recherche Weibo, classement Douyin), analyse LLM des tendances et recommandation d'angles de sujets ; planification de contenu calendaire |
|
||||
|
||||
## 10. Administration publique intelligente
|
||||
|
||||
Les scénarios d'administration publique visent à améliorer l'efficacité des services publics et la capacité de gouvernance.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Système de navigation vocale intelligente et de répartition automatique pour la ligne 12345 | Reconnaissance vocale des appels des citoyens, compréhension LLM des demandes et répartition automatique vers le service compétent ; circulation automatique des tickets |
|
||||
| 2 | Robot d'accueil et de questions-réponses sur les services administratifs | Recherche RAG dans la base de connaissances gouvernementales, réponses LLM aux procédures et questions de politique ; connexion au système de prise de numéro |
|
||||
| 3 | Plateforme de correspondance et de diffusion ciblée de politiques de soutien aux entreprises | Analyse structurée des politiques, correspondance automatique des profils d'entreprises avec les politiques applicables ; rappels par SMS/e-mail |
|
||||
| 4 | Assistant de pré-examen des documents administratifs et de vérification de conformité | OCR des documents et extraction d'informations clés, vérification LLM de l'exhaustivité et de la conformité des documents |
|
||||
| 5 | Système de détection de comportements anormaux par vidéo surveillance publique | Analyse en temps réel des flux vidéo, détection CV de comportements anormaux (bagarres, chutes) ; alertes push |
|
||||
| 6 | Plateforme d'identification intelligente d'événements urbains et de gestion de dispatch | Collecte de données urbaines (IoT, caméras), identification LLM du type d'événement et répartition |
|
||||
| 7 | Système d'analyse multidimensionnelle d'opinion publique et d'alertes de risques | Fusion de données multi-sources (ligne 12345, opinion en ligne, visites de terrain), identification LLM des points chauds de risque |
|
||||
| 8 | Plateforme de numérisation, d'identification intelligente et d'archivage de dossiers administratifs | OCR du contenu textuel des archives, extraction LLM des informations clés et classification automatique ; support de recherche plein texte |
|
||||
| 9 | Plateforme de commande d'urgence et de distribution de ressources de secours | Collecte d'informations sur les événements, génération LLM de plans de réponse d'urgence ; optimisation algorithmique de la distribution des ressources |
|
||||
| 10 | Système de surveillance en grille de la pollution atmosphérique et de traçabilité de la source | Collecte de données des capteurs de qualité de l'air, modèle CV d'identification des sources de pollution ; analyse LLM des tendances de pollution et traçabilité |
|
||||
|
||||
## 11. Affaires juridiques et gestion contractuelle
|
||||
|
||||
Les scénarios juridiques se concentrent sur l'amélioration de l'efficacité des services juridiques et la gestion de la conformité.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Agent de détection de risques contractuels en un clic | Analyse structurée des textes contractuels, identification par LLM des problèmes potentiels par comparaison avec une liste de contrôle ; marquage des clauses à haut risque |
|
||||
| 2 | Plateforme de vérification de conformité et de suggestions de modification pour le cycle de vie des contrats | Comparaison des clauses avec la base de données réglementaire, génération LLM de rapports de conformité ; suivi des suggestions de modification |
|
||||
| 3 | Conseiller AI d'évaluation du taux de succès de litiges similaires | Extraction de caractéristiques de cas, recherche et correspondance de cas similaires ; analyse LLM des facteurs influençant le succès |
|
||||
| 4 | Radar de surveillance en temps réel des changements législatifs et d'analyse d'impact | Mise à jour en temps réel de la base de données juridique, analyse LLM des modifications et évaluation de l'impact commercial ; alertes push |
|
||||
| 5 | Outil AIGC de rédaction automatique de lettres de mise en demeure | Saisie des faits, génération LLM de modèles de lettres de mise en demeure normalisées ; vérification des éléments et conformité |
|
||||
| 6 | Enregistreur de transcription en temps réel et extraction automatique des points litigieux | Transcription ASR des audiences, extraction LLM des points litigieux et des arguments clés ; annotation de timestamps |
|
||||
| 7 | Système de surveillance automatique de violations de propriété intellectuelle et de preuves blockchain | Surveillance des violations de propriété intellectuelle sur les plateformes e-commerce et les réseaux sociaux ; collecte automatique de preuves |
|
||||
| 8 | Agent de vérification de cohérence et d'alerte de risques pour les prospectus IPO | Comparaison de données multi-chapitres des prospectus, identification LLM des incohérences et des anomalies de données ; marquage des risques |
|
||||
| 9 | Plugin de traduction en langage simple de clauses juridiques complexes | Sélection de clauses juridiques, génération LLM d'explications accessibles |
|
||||
| 10 | Système intelligent de structuration et de visualisation de chaînes de preuves | Upload de documents de preuves, analyse LLM des relations entre les preuves et de la chronologie |
|
||||
|
||||
## 12. Tourisme et voyages
|
||||
|
||||
Les scénarios de tourisme visent à améliorer l'expérience de voyage et la commodité.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Générateur d'itinéraires paresseux basé sur l'AIGC | Saisie des préférences (durée, budget, intérêts), génération LLM d'itinéraires quotidiens ; API de lieux touristiques pour les horaires et les billets |
|
||||
| 2 | Robot de prédiction de tendances de prix de vols et d'hôtels et verrouillage automatique des prix bas | Collecte de données de prix des OTA, modèle ML de prédiction des tendances ; alertes de surveillance des prix |
|
||||
| 3 | Conseiller en recomposition d'itinéraire inter-compagnies et suggestions de plans de secours après annulation de vol | Surveillance de l'état des vols, analyse LLM de plans de rechange ; comparaison multi-compagnies |
|
||||
| 4 | Système de pré-examen des documents de visa et d'aide au remplissage automatique | Photos des documents uploadées, vérification OCR de l'exhaustivité des informations ; remplissage automatique des formulaires |
|
||||
| 5 | Assistant de traduction vocale en temps réel et de visualisation de menus pour voyages à l'étranger | Modèle de traduction vocale hors ligne, OCR de photos de menus et traduction |
|
||||
| 6 | Analyseur de commentaires d'hôtels basé sur le big data pour éviter les mauvaises surprises | Collecte de données de commentaires d'hôtels, extraction LLM des mots-clés positifs et négatifs |
|
||||
| 7 | Plateforme de prévisualisation immersive en VR et sélection interactive de chambres | Collecte de panoramas à 360°, prévisualisation immersive en VR ; visite virtuelle des chambres |
|
||||
| 8 | Assistant de génération de récits de voyage et de posts sociaux à partir de traces de voyage | Extraction d'informations de lieu et de date à partir des photos, génération LLM de textes de récits ; modèles de mise en page |
|
||||
| 9 | Plateforme de collecte et de gestion de justificatifs de frais de déplacement professionnels | Connexion API aux plateformes de voyages d'affaires, collecte automatique de justificatifs ; vérification de conformité |
|
||||
| 10 | Navigation prédictive de la congestion touristique et planification d'itinéraires hors pointe | Collecte de données de fréquentation touristique, modèle ML de prédiction des périodes de pointe ; recommandation d'horaires hors pointe |
|
||||
|
||||
## 13. Accompagnement émotionnel
|
||||
|
||||
Les scénarios d'accompagnement émotionnel se concentrent sur la santé mentale et le soutien affectif.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Compagnon virtuel d'accompagnement profond 24h/24 basé sur les LLM | Système de mémorisation stockant l'historique des conversations, génération LLM de réponses personnalisées ; module de soutien émotionnel |
|
||||
| 2 | Conseiller AI de reconnaissance émotionnelle multimodale et de soutien psychologique | Analyse du ton vocal + reconnaissance émotionnelle textuelle, génération LLM de conseils de soutien ; alerte d'intervention en crise |
|
||||
| 3 | Agent numérique de rééducation cognitive et de stimulation mnésique pour personnes atteintes de la maladie d'Alzheimer | Jeux cognitifs (mémoire, calcul, langage) ; stimulation par vieilles photos/vieilles chansons |
|
||||
| 4 | Coach de simulation sociale AIGC pour personnes souffrant d'anxiété sociale | Simulation de scénarios sociaux virtuels, LLM jouant différents rôles ; suggestions de techniques sociales |
|
||||
| 5 | Machine à histoires personnalisées générative pour enfants par IA | Saisie par les parents du thème et des préférences, génération LLM d'histoires personnalisées ; génération de musique de fond |
|
||||
| 6 | Système de résurrection numérique et de dialogue inter-temporel via LLM pour les défunts | Entraînement d'un modèle personnalisé à partir de données (voix, textes) du défunt ; génération de dialogues mémoriels |
|
||||
| 7 | Robot de chat empathique basé sur les données MBTI | Saisie des résultats du test MBTI, génération LLM d'analyse de personnalité et de réponses empathiques ; recommandation de correspondances de personnalité |
|
||||
| 8 | Assistant de suivi d'humeur 24h/24 et de motivation positive par IA | Enregistrement quotidien de l'état émotionnel, analyse LLM des tendances et génération de contenu motivant ; rappels positifs push |
|
||||
| 9 | Arbre à confidences pour adolescents avec respect de la vie privée | Entrée anonyme pour la confidence, LLM fournit écoute et conseils ; alerte sur les mots sensibles |
|
||||
| 10 | Système d'animaux de compagnie virtuels à évolution autonome | Entraînement d'un modèle de personnalité de l'animal, interaction et croissance évolutives ; système de personnalisation virtuelle |
|
||||
|
||||
## 14. Loisirs et divertissement
|
||||
|
||||
Les scénarios de loisirs visent à offrir une expérience de divertissement numérique riche.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Moteur de décision autonome de PNJ pour jeux en monde ouvert basé sur les LLM | Arbre de comportement des PNJ fusionné avec les décisions LLM, système de dialogue pour des interactions personnalisées ; moteur de comportement |
|
||||
| 2 | Outil AIGC de progression narrative et d'assistance MJ pour murder games immersifs | Les choix des joueurs déclenchent des branches narratives, génération LLM de logique déductive ; génération automatique de cartes d'indices |
|
||||
| 3 | Modificateur génératif de fins pour fiction interactive | Les choix des lecteurs influencent le cours de l'histoire, génération LLM de multiples branches de fins |
|
||||
| 4 | Station de travail AIGC de modélisation 3D de personnages de style anime | Description textuelle pour générer des croquis de personnages, modélisation 3D automatique ; rendu de textures |
|
||||
| 5 | Analyste visuel CV et commentateur intelligent de parties esport | Analyse en temps réel du gameplay, identification des moments clés ; génération LLM de commentaires de match |
|
||||
| 6 | Moteur de recommandation algorithmique de contenu humoristique | Profilage d'intérêts des utilisateurs, correspondance et recommandation de contenu humoristique |
|
||||
| 7 | Logiciel d'optimisation vocale et d'embellissement de chant KTV | Traitement de réduction du bruit et d'amélioration vocale ; algorithme IA d'optimisation vocale |
|
||||
| 8 | Outil d'extraction et de montage intelligent de scènes par personnage de séries | Analyse du contenu vidéo, extraction de séquences par personnage ; montage automatique |
|
||||
| 9 | Système de génération automatique de livres audio multi-voix par TTS | Attribution de rôles textuels, génération de voix personnalisées ; ajout de musique de fond et d'effets sonores |
|
||||
| 10 | Coach d'analyse et de révision de parties de jeux de société basé sur l'apprentissage par renforcement | Analyse de parties, simulation d'adversaire par IA ; génération de suggestions de révision |
|
||||
|
||||
## 15. E-commerce
|
||||
|
||||
Les scénarios d'e-commerce se concentrent sur l'efficacité opérationnelle et l'amélioration des taux de conversion.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Outil de production en masse de fiches produit à fort taux de conversion par AIGC | Saisie d'informations produit, génération LLM de textes vendeurs et de descriptions de scènes ; génération d'images de fond |
|
||||
| 2 | Usine de génération de vidéos d'essayage virtuel par IA pour vêtements | Traitement de photos de vêtements à plat, génération d'essayages virtuels ; vidéos multi-angles |
|
||||
| 3 | Assistant de traduction et d'adaptation multilingue LLM pour e-commerce transfrontalier | Traduction multilingue de descriptions de produits, adaptation culturelle ; interfaces de publication multi-plateformes |
|
||||
| 4 | Robot d'analyse de sentiment client basé sur le NLP et réponse intelligente | Analyse de sentiment des conversations de conseil, génération automatique de réponses apaisantes ; classification des avis positifs/négatifs |
|
||||
| 5 | Système de live shopping 24h/24 par avatar numérique AIGC | Avatar numérique + génération de scripts en temps réel, appel en temps réel aux informations produit ; interaction avec les commentaires en direct |
|
||||
| 6 | Plugin IA de comparaison de prix et de prédiction de tendances pour les produits similaires sur tout le web | Scraping de prix sur les plateformes e-commerce, tableaux comparatifs ; prédiction des tendances de prix |
|
||||
| 7 | Plateforme de filtrage intelligent de photos de clients et de synthèse de vidéos courtes | Scoring de qualité des photos des clients, recommandation automatique des contenus de qualité ; synthèse de modèles de vidéos courtes |
|
||||
| 8 | Analyse en temps réel de conversations de vente et recommandation de scripts performants basée sur LLM | Transcription ASR des appels, détection en temps réel de la conformité des scripts ; recommandation de scripts |
|
||||
| 9 | Moteur de détection de tendances du marché et de prédiction de produits populaires par IA | Collecte et analyse de données de réseaux sociaux et d'e-commerce, détection LLM des tendances et points chauds ; suggestions de sélection de produits |
|
||||
| 10 | Système de segmentation d'utilisateurs par IA et d'exploitation fine basé sur les données comportementales | Analyse par clustering de données comportementales, génération de tags de profils ; déclenchement automatisé du marketing |
|
||||
|
||||
## 16. Énergie
|
||||
|
||||
Les scénarios énergétiques visent à réaliser une gestion intelligente et une transition verte du secteur de l'énergie.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Analyse IA des comportements de consommation domestique et conseiller en économie d'énergie | Collecte de données des compteurs intelligents, analyse des modes de consommation ; génération LLM de conseils d'économie |
|
||||
| 2 | Système de détection CV de défauts de panneaux photovoltaïques par drone | Inspection par drone, analyse d'images thermoinfrarouges ; détection et annotation de défauts |
|
||||
| 3 | Agent de prédiction de tendances de prix de l'énergie et de stratégie automatique de profit | Collecte de données du marché de l'énergie, modèle de prédiction des prix ; génération de stratégies et exécution de transactions |
|
||||
| 4 | Système de détection non destructive de la santé des batteries et d'alerte sur les risques de surchauffe | Surveillance des données de fonctionnement des batteries, modèle d'évaluation de la santé ; alertes push sur les risques |
|
||||
| 5 | Assistant IA de comptabilisation automatique des émissions carbone et de génération de rapports ESG | Collecte de données de consommation d'énergie, calcul des facteurs d'émission ; génération automatique de rapports ESG |
|
||||
| 6 | Système IA de prévision de charge en conditions météorologiques extrêmes et de commande d'urgence | Connexion aux données météorologiques, modèle de prévision de charge ; génération de stratégies d'ordonnancement |
|
||||
| 7 | Gardien IA de détection de violations dans les stations-service et alerte | Analyse vidéo des stations-service, détection de violations (appels téléphoniques, tabagisme) ; alertes push |
|
||||
| 8 | Système IA de surveillance par ondes acoustiques et de localisation précise de fuites d'oléoducs | Collecte de données de capteurs acoustiques, modèle de détection de fuites ; calcul de localisation |
|
||||
| 9 | Système d'agrégation de ressources virtuelles et de prise de décision de trading d'électricité par IA | Connexion de ressources distribuées, optimisation de l'ordonnancement agrégé ; exécution de stratégies de trading |
|
||||
| 10 | Suivi IA de la position des personnes dans les mines et alerte d'intrusion dans les zones dangereuses | Localisation UWB/BLE, suivi des trajectoires de personnes ; barrières électroniques pour les zones dangereuses |
|
||||
|
||||
## 17. Audiovisuel
|
||||
|
||||
Les scénarios audiovisuels se concentrent sur la production et le traitement des médias.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Outil IA d'identification de moments forts et de montage automatique de vidéos longues | Analyse du contenu vidéo, identification des images clés ; montage automatique des moments forts |
|
||||
| 2 | Assistant IA de séparation intelligente du bruit de fond et d'amélioration vocale | Modèle de séparation audio, suppression du bruit de fond ; amélioration vocale |
|
||||
| 3 | Station de restauration 4K et de colorisation IA pour images anciennes | Modèle de super-résolution, restauration de la qualité des images anciennes ; colorisation automatique |
|
||||
| 4 | Système de doublage TTS de qualité professionnelle et contrôle des émotions | Modèle TTS multi-voix, contrôle émotionnel ; export audio |
|
||||
| 5 | Outil de reconnaissance vocale ASR automatique et génération de sous-titres bilingues | Reconnaissance vocale pour génération de sous-titres, traduction multilingue ; superposition de sous-titres bilingues |
|
||||
| 6 | Moteur IA d'effacement intelligent d'objets superflus dans les vidéos | Suivi de cibles vidéo par modèle de suivi d'objets, suppression et restauration par frames ; gestion de la cohérence inter-frames |
|
||||
| 7 | Compositeur automatique de musique de fond sans droits d'auteur par AIGC | Modèle de génération musicale, contrôle des émotions et du style ; détection des droits d'auteur |
|
||||
| 8 | Logiciel de clonage et de conversion vocale par IA pour voix de personnalités spécifiques | Entraînement d'un modèle de voix avec peu d'échantillons ; traitement de conversion vocale |
|
||||
| 9 | Plateforme de conversion de scripts en storyboards et génération de vidéos de prévisualisation par IA | Analyse de scripts pour génération de storyboards, génération LLM de vidéos de prévisualisation |
|
||||
| 10 | Assistant de transcription intelligente de réunions et d'extraction de TODO à partir d'enregistrements | Séparation et transcription vocale de réunions multi-participants, extraction LLM des TODO ; annotation de timestamps |
|
||||
|
||||
## 18. Marketing IA
|
||||
|
||||
Les scénarios de marketing IA visent à améliorer l'efficacité marketing et la production créative.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Moteur AIGC de rédaction automatique de posts viraux pour Xiaohongshu | Saisie de sujets, génération LLM de posts sponsorisés ; optimisation d'emojis et de tags de sujets |
|
||||
| 2 | Outil IA de mise en page de supports marketing et d'adaptation multi-tailles | Saisie de textes, association intelligente de modèles de supports et export multi-tailles |
|
||||
| 3 | Plateforme AIGC de création de logos et de construction de charte VI | Saisie de mots-clés de marque, génération créative de logos ; génération de normes VI |
|
||||
| 4 | Assistant de suivi des tendances et de génération d'idées marketing opportunistes par IA | Collecte de données de tendances, analyse LLM des angles marketing ; génération de concepts créatifs |
|
||||
| 5 | Gestionnaire de budget publicitaire et système deenchères IA en temps réel | Connexion aux données des plateformes publicitaires, modèle d'analyse d'efficacité ; optimisation des stratégies d'enchères |
|
||||
| 6 | Analyseur approfondi des stratégies marketing des concurrents et générateur de rapports hebdomadaires par IA | Collecte et analyse de contenu des concurrents, extraction de stratégies ; génération automatique de rapports hebdomadaires |
|
||||
| 7 | Planification de mots-clés SEO et rédaction en masse d'articles par IA | Analyse de mots-clés, génération en masse d'articles ; suggestions d'optimisation SEO |
|
||||
| 8 | Expert en rédaction d'e-mails marketing personnalisés un-à-un | Données de profils d'utilisateurs, génération de contenu personnalisé ; tests A/B |
|
||||
| 9 | Radar de surveillance de la réputation de marque sur tout le web et alerte de crise IA | Collecte de données d'opinion sur tout le web, analyse de sentiment ; alertes push en cas de crise |
|
||||
| 10 | Outil AIGC de génération de scripts vidéo courts et d'aide au storyboard | Saisie de sujets, génération de scripts et de storyboards ; conseils de tournage |
|
||||
|
||||
## 19. Intelligence de données
|
||||
|
||||
Les scénarios d'intelligence de données se concentrent sur l'analyse et la valorisation des données.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Moteur de recherche en langage naturel basé sur le Text-to-SQL | Conversion de requêtes en langage naturel en SQL, visualisation des résultats |
|
||||
| 2 | BI conversationnel : génération de graphiques en une phrase | Description des besoins en données, génération automatique de graphiques ; support de la bascule entre plusieurs types de graphiques |
|
||||
| 3 | Outil de reconnaissance de tableaux à partir de captures d'écran | Upload de captures d'écran, reconnaissance VLM de la structure et des données du tableau ; export en fichier Excel |
|
||||
| 4 | Outil IA de reconnaissance de tableaux à partir d'images et de captures d'écran | Reconnaissance OCR de la structure des tableaux à partir d'images, export des données en Excel |
|
||||
| 5 | Construction automatisée de graphes de connaissances à partir de données multi-sources | Connexion multi-sources, extraction d'entités et de relations ; stockage en base de données de graphes |
|
||||
| 6 | Assistant intelligent d'interprétation de rapports de données et d'analyse de tendances | Upload d'images ou saisie de données de rapports de données, interprétation VLM des graphiques et analyse de tendances |
|
||||
| 7 | Assistant d'interprétation de structures de tables de bases de données et de génération de requêtes exemple | Saisie de noms de tables ou de descriptions de champs, génération LLM de descriptions de tables et de requêtes SQL exemple |
|
||||
| 8 | Alignement intelligent et déduplication IA des données maîtresses d'entreprise | Correspondance multi-sources de données maîtresses, identification des enregistrements en double ; configuration de règles de fusion |
|
||||
| 9 | Outil de conversion de spécifications de données en scénarios de test | Saisie de descriptions de besoins en données, génération LLM de scénarios de test et de cas de validation |
|
||||
| 10 | Assistant Q&R intelligent sur les indicateurs de données | Construction d'une base de connaissances à partir de documents de définition d'indicateurs, réponses LLM sur la portée et la logique de calcul des indicateurs |
|
||||
@@ -0,0 +1,496 @@
|
||||
---
|
||||
title: "Jobs to Be Done : trouver ce que les utilisateurs veulent vraiment accomplir"
|
||||
description: "Article d'introduction à Jobs to Be Done pour les lecteurs débutants. Comprendre que les utilisateurs n'achètent pas des fonctionnalités mais « emploient » votre produit pour accomplir une progression dans un contexte spécifique, et apprendre à utiliser JTBD pour décomposer la direction produit, les questions d'entretien et les prompts AI."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>1,5 heure</strong>'
|
||||
</script>
|
||||
|
||||
# Jobs to Be Done : trouver ce que les utilisateurs veulent vraiment accomplir
|
||||
|
||||
<a id="top-jtbd"></a>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['JTBD', 'Besoins utilisateurs', 'Réflexion produit', 'Découverte de besoins']"
|
||||
coreOutput="1 phrase JTBD qui ressemble davantage à un vrai besoin"
|
||||
expectedOutput="Transformer une idée vague en un scénario utilisateur et une direction MVP plus concrets"
|
||||
>
|
||||
|
||||
Beaucoup de gens, quand ils commencent à créer un produit, font l'erreur la plus courante de concentrer toute leur attention sur « quelles fonctionnalités je vais créer ». Ils voient que d'autres ont une classification intelligente, ils veulent aussi l'ajouter ; ils voient que d'autres ont un résumé automatique, ils veulent aussi l'intégrer ; ils voient que d'autres ont fait des Agents, du multimodal, des workflows, ils se sentent obligés d'en faire autant.
|
||||
|
||||
Mais dans la réalité, les utilisateurs décident rarement d'utiliser un produit parce que « le nom de la fonctionnalité est cool ». Ils sont plutôt dans un moment précis, voulant faire avancer une tâche, et « embauchent » temporairement un outil, un service, voire une personne pour les aider à franchir cette étape.
|
||||
|
||||
C'est exactement ce que la méthode **Jobs to Be Done (JTBD)** nous rappelle : **les utilisateurs n'achètent pas des fonctionnalités en soi, ils emploient une certaine solution pour les aider à accomplir une progression.**
|
||||
|
||||
Cet article vous guidera, dans un langage aussi simple que possible, pour comprendre JTBD depuis zéro et en faire un outil d'analyse directement utilisable pour vos applications AI.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimale
|
||||
**Objectif** : après avoir lu, vous saurez mieux comment transformer une idée vague en un besoin avec un vrai scénario utilisateur, au lieu de n'avoir en tête qu'une liste de noms de fonctionnalités.
|
||||
|
||||
**Actions** : écrivez 1 idée vague, trouvez 3 utilisateurs potentiels et demandez-leur « comment avez-vous géré ça la dernière fois », puis organisez le tout en 1 phrase JTBD.
|
||||
|
||||
**Résultat** : vous obtiendrez une hypothèse de besoin plus claire, sachant ce que la première version doit résoudre en priorité.
|
||||
|
||||
**Navigation rapide** : [Qu'est-ce que JTBD](#jtbd-what) · [La formule en une phrase](#jtbd-formula) · [Comment l'IA peut vous aider](#jtbd-ai)
|
||||
:::
|
||||
|
||||
## Ce que vous apprendrez
|
||||
|
||||
1. Qu'est-ce que Jobs to Be Done, et pourquoi c'est plus proche des besoins réels que le « brainstorming de fonctionnalités »
|
||||
2. Comment distinguer « les fonctionnalités que les utilisateurs disent vouloir » de « ce qu'ils veulent vraiment accomplir »
|
||||
3. Comment utiliser un modèle simple pour décomposer une idée vague en contexte, déclencheur, obstacle et critère de succès
|
||||
4. Comment utiliser JTBD pour les produits AI, les questions d'entretien et l'organisation des prompts
|
||||
|
||||
<a id="jtbd-what"></a>
|
||||
## [1. Qu'est-ce que Jobs to Be Done](#top-jtbd)
|
||||
|
||||
Jobs to Be Done est souvent abrégé en **JTBD**. L'idée centrale derrière cette méthode est liée à l'expression classique popularisée par l'équipe de Clayton Christensen : **les utilisateurs vont « employer » un certain produit pour accomplir une tâche.**
|
||||
|
||||
La « tâche » ici n'est pas une action superficielle de liste de choses à faire, mais une **progression** que l'utilisateur souhaite voir dans son état. Par exemple :
|
||||
|
||||
- Pas « je veux un outil AI de compte rendu », mais « je veux organiser les points clés, les tâches et les responsables en moins de 10 minutes après la réunion, sans dépendre de ma mémoire pour compléter les notes »
|
||||
- Pas « je veux une app de comptabilité », mais « je veux savoir où va mon argent, pour ne plus être anxieux en fin de mois »
|
||||
- Pas « je veux un optimiseur de CV », mais « je veux soumettre un CV décent avec plus de confiance, sans douter de la qualité de ce que j'ai écrit à chaque candidature »
|
||||
|
||||
Donc, **JTBD ne s'intéresse pas à l'apparence du produit, mais à la raison pour laquelle l'utilisateur en a besoin à ce moment précis.**
|
||||
|
||||
C'est aussi pourquoi de nombreux produits apparemment différents sont en réalité en concurrence pour le même job. L'utilisateur qui veut « ne pas s'ennuyer sur le chemin du travail » peut embaucher des vidéos courtes, des podcasts, des jeux, des chats, ou même la sieste. L'utilisateur qui veut « comprendre rapidement un PDF très long » peut embaucher un outil de résumé AI, un stagiaire, un collègue, lire lui-même en serrant les dents, ou simplement ne pas lire pour l'instant.
|
||||
|
||||
Une fois que vous regardez le problème sous cet angle, vous découvrirez que vos véritables concurrents ne sont souvent pas « une autre app qui vous ressemble », mais **toutes les alternatives actuellement acceptables pour l'utilisateur**.
|
||||
|
||||
## 2. Quelle est la différence entre JTBD, les personas et les listes de fonctionnalités
|
||||
|
||||
Beaucoup de débutants, quand ils commencent l'analyse des besoins, écrivent d'abord un persona : 25 ans, femme, ville de premier rang, cadre, aime les outils d'efficacité, prête à essayer de nouveaux produits. Ce type d'information n'est pas totalement inutile, mais il est généralement **insuffisant pour expliquer pourquoi une personne agirait à ce moment précis**.
|
||||
|
||||
JTBD s'intéresse davantage aux questions suivantes :
|
||||
|
||||
- Dans quel contexte a-t-il décidé de chercher une solution
|
||||
- Qu'est-ce qui le bloquait exactement à ce moment-là
|
||||
- Quelle tâche veut-il faire passer à l'étape suivante
|
||||
- Quelle méthode de fortune utilise-t-il actuellement
|
||||
- Si les choses sont bien résolues, quel résultat lui ferait dire « ça valait le coup »
|
||||
|
||||
Autrement dit, **le persona ressemble davantage à « qui est cette personne en gros », tandis que JTBD ressemble davantage à « que veut-elle vraiment accomplir maintenant »**.
|
||||
|
||||
De même, les listes de fonctionnalités peuvent facilement vous égarer. Les utilisateurs disent « je veux exporter en Word », « je veux une réécriture AI », « je veux une saisie vocale » — tout cela n'est qu'expression de surface. JTBD continue de creuser :
|
||||
|
||||
- Pourquoi avez-vous besoin d'exporter en Word maintenant, et pas en PDF ?
|
||||
- Vous voulez réécrire, est-ce parce que le style est mauvais, ou parce qu'il faut adapter à différents publics ?
|
||||
- Vous voulez la saisie vocale, est-ce parce que vous êtes paresseux pour taper, ou parce que vous êtes souvent en marchant, en conduisant, ou juste après une réunion pour prendre des notes immédiatement ?
|
||||
|
||||
Très souvent, **les fonctionnalités ne sont qu'une traduction temporaire du job**. Si vous ne collectez que des fonctionnalités, vous risquez de construire un produit « qui empile tout ce que les utilisateurs disent » ; si vous pouvez voir le job derrière, vous avez plus de chances de créer une solution vraiment fluide et véritablement compétitive.
|
||||
|
||||
## 3. Un exemple compréhensible même par un débutant
|
||||
|
||||
Ne vous précipitez pas pour penser à des produits AI complexes, commençons par un exemple de la vie quotidienne.
|
||||
|
||||
Supposons que quelqu'un n'a jamais le temps de prendre le petit-déjeuner avant de sortir le matin, alors il achète souvent un sandwich et un café à l'entrée du métro. En surface, il « achète » un petit-déjeuner ; mais vu par JTBD, ce qu'il veut vraiment accomplir pourrait être :
|
||||
|
||||
- Résoudre un repas le matin pressé, avec le moins d'effort mental possible
|
||||
- Ne pas avoir faim avant d'arriver au bureau
|
||||
- Ne pas retarder son trajet à cause du petit-déjeuner
|
||||
|
||||
Ici, l'utilisateur n'embauche pas « un sandwich d'une marque spécifique », mais une solution qui l'aide à faire avancer sa matinée sans encombre. Si le convenience store d'à côté est plus rapide, plus proche et plus fiable, il pourrait changer immédiatement.
|
||||
|
||||
Transposons cette logique aux produits AI et cela devient encore plus évident.
|
||||
|
||||
Par exemple, vous voulez créer un « outil AI de compte rendu de réunion ». Si vous vous arrêtez au niveau des fonctionnalités, vous commencerez facilement à penser :
|
||||
|
||||
- Faut-il supporter l'upload audio
|
||||
- Faut-il intégrer la séparation des locuteurs
|
||||
- Faut-il exporter en Markdown
|
||||
- Faut-il générer automatiquement les tâches
|
||||
|
||||
Tout cela n'est pas faux, mais ce n'est pas suffisant. Avec JTBD, on demande une couche de plus : ce que l'utilisateur veut vraiment accomplir pourrait être :
|
||||
|
||||
- Je veux, dans les 10 minutes après la réunion, synchroniser les résultats de la discussion avec les absents
|
||||
- Je veux extraire proprement les tâches, les responsables et les délais, pour que l'équipe ne collabore plus à base de mémoire
|
||||
- Je veux réduire le temps passé à organiser le contenu des réunions, pour consacrer mon énergie aux décisions et à l'avancement
|
||||
|
||||
Une fois le job clairement énoncé, beaucoup de priorités de fonctionnalités émergent naturellement. La chose la plus importante pour la première version n'est peut-être pas « supporter 12 formats d'exportation », mais :
|
||||
|
||||
- La structure du compte rendu doit être suffisamment claire
|
||||
- L'extraction des tâches doit être fiable
|
||||
- Le lien de partage doit être pratique
|
||||
- Le résultat doit être assez fiable pour être directement transféré à l'équipe
|
||||
|
||||
C'est la valeur de JTBD : **il vous aide à passer de « quelles capacités dois-je empiler » à « quelle progression je dois aider l'utilisateur à accomplir ».**
|
||||
|
||||
## 4. Un modèle JTBD pratique
|
||||
|
||||
Si vous êtes débutant, ne cherchez pas à rendre JTBD trop académique. Saisissez les 5 éléments les plus utiles pour commencer.
|
||||
|
||||
### 4.1 Contexte
|
||||
|
||||
À quel moment, dans quel environnement l'utilisateur pense-t-il à ce produit ?
|
||||
|
||||
- Juste après une réunion
|
||||
- Quand le patron demande soudainement un document
|
||||
- Le soir en préparant une candidature
|
||||
- En fin de mois quand on réalise que l'argent manque à nouveau
|
||||
|
||||
**Un besoin sans contexte n'est généralement pas encore assez réel.**
|
||||
|
||||
### 4.2 Déclencheur
|
||||
|
||||
Qu'est-ce qui le pousse à chercher immédiatement une solution ?
|
||||
|
||||
- Être submergé par un long document, sans savoir par où commencer
|
||||
- Devoir rendre un document demain, et découvrir aujourd'hui que le format est chaotique
|
||||
- Venir d'être rappelé par le manager sur l'avancement, et réaliser qu'on n'a pas organisé clairement
|
||||
- Vouloir tenir un journal, mais l'écriture manuelle, le copier-coller et l'organisation sont trop pénibles
|
||||
|
||||
Le déclencheur porte souvent une émotion. Cette émotion est importante, car elle détermine pourquoi l'utilisateur passe à l'action à ce moment précis.
|
||||
|
||||
### 4.3 La progression souhaitée
|
||||
|
||||
Il ne veut pas seulement « faire une action », mais se propulser vers quel nouvel état ?
|
||||
|
||||
- Du chaos à la clarté
|
||||
- De l'anxiété à la tranquillité
|
||||
- De la procrastination au démarrage
|
||||
- De l'inefficacité à la fluidité
|
||||
- De l'incapacité à expliquer à la capacité de livrer directement
|
||||
|
||||
À cette étape, le mot « progression » est crucial. Parce que beaucoup de gens n'achètent pas vraiment un outil, mais un **changement d'état**.
|
||||
|
||||
### 4.4 L'alternative actuelle
|
||||
|
||||
Sans votre produit, comment fait-il ?
|
||||
|
||||
- Copier-coller manuel
|
||||
- Se débrouiller avec Excel ou Notes
|
||||
- Demander de l'aide à un collègue
|
||||
- Remettre à plus tard
|
||||
- Naviguer entre plusieurs outils
|
||||
|
||||
Qui est l'alternative, qui est votre véritable environnement concurrentiel.
|
||||
|
||||
### 4.5 Critère de succès
|
||||
|
||||
Quand peut-on dire que le problème est vraiment résolu ?
|
||||
|
||||
- Obtenir un résultat partageable en 10 minutes
|
||||
- Pouvoir envoyer aux autres sans révision majeure
|
||||
- Ne pas facilement oublier, se tromper ou manquer quelque chose
|
||||
- Savoir quoi faire dès la première utilisation
|
||||
|
||||
Si vous ne savez même pas « comment l'utilisateur juge si ça valait le coup », cette direction n'est probablement pas encore assez aboutie.
|
||||
|
||||
<a id="jtbd-formula"></a>
|
||||
## [5. La formule en une phrase, prête à l'emploi](#top-jtbd)
|
||||
|
||||
Quand vous voulez clarifier une direction produit, vous pouvez d'abord utiliser cette formule très pratique :
|
||||
|
||||
> Quand __________, je veux __________, afin de __________.
|
||||
> Actuellement, je ne peux accomplir cette tâche qu'en __________.
|
||||
|
||||
Par exemple :
|
||||
|
||||
> Quand je sors d'une réunion de projet chargée en informations, je veux obtenir rapidement un compte rendu structuré avec les tâches, les responsables et les délais, afin de pouvoir synchroniser immédiatement l'équipe et faire avancer l'exécution.
|
||||
> Actuellement, je ne peux m'en sortir qu'en me remémorant, en fouillant dans l'historique de chat et en organisant manuellement.
|
||||
|
||||
Autre exemple :
|
||||
|
||||
> Quand je prépare une candidature pour un nouveau poste, je veux rapidement adapter mes expériences existantes en une version plus ciblée sur le poste, afin de soumettre un CV décent avec plus de confiance.
|
||||
> Actuellement, je ne fais que copier-coller l'ancien CV, modifier les formulations à la main, et à la fin, je suis de moins en moins sûr de moi.
|
||||
|
||||
Si vous pouvez écrire une phrase avec ce niveau de clarté, la conception des pages, des prompts et la hiérératisation des fonctionnalités deviendront beaucoup plus faciles.
|
||||
|
||||
## 6. Pour les produits AI, trois couches de job à examiner particulièrement
|
||||
|
||||
Beaucoup de produits AI semblent impressionnants en démonstration, mais ne parviennent pas à fidéliser les utilisateurs une fois en ligne. La raison courante est qu'ils ne résolvent que l'action de surface, pas le job plus profond.
|
||||
|
||||
Vous pouvez grossièrement diviser un job en trois couches :
|
||||
|
||||
### 6.1 Couche fonctionnelle
|
||||
|
||||
Quelle est la tâche la plus en surface ?
|
||||
|
||||
- Résumer un document
|
||||
- Réécrire un texte
|
||||
- Extraire les tâches
|
||||
- Générer une image
|
||||
|
||||
C'est la couche que les utilisateurs expriment le plus facilement.
|
||||
|
||||
### 6.2 Couche émotionnelle
|
||||
|
||||
Quel inconfort l'utilisateur veut-il réduire, ou quel ressenti veut-il obtenir ?
|
||||
|
||||
- Ne plus paniquer
|
||||
- Ne plus paraître non professionnel
|
||||
- Ne plus recommencer de zéro à chaque fois
|
||||
- Avoir plus de sentiment de contrôle
|
||||
|
||||
Beaucoup de volontés de paiement sont en réalité liées à la couche émotionnelle.
|
||||
|
||||
### 6.3 Couche sociale
|
||||
|
||||
Comment l'utilisateur veut-il être perçu par les autres ?
|
||||
|
||||
- Avoir l'air plus fiable
|
||||
- Avoir l'air plus organisé dans l'équipe
|
||||
- Avoir l'air plus professionnel face aux clients
|
||||
- Avoir l'air plus expressif sur les réseaux sociaux
|
||||
|
||||
Si vous ne faites que la couche fonctionnelle, le produit sera facilement remplaçable ; si vous comprenez aussi les couches émotionnelle et sociale, vous trouverez plus facilement une valeur vraiment engageante.
|
||||
|
||||
## 7. Utiliser JTBD pour filtrer les directions produit en sens inverse
|
||||
|
||||
Parfois, ce n'est pas que vous avez déjà un produit, mais que vous avez 3 à 5 idées et ne savez pas laquelle réaliser. JTBD est alors idéal pour le filtrage.
|
||||
|
||||
Vous pouvez prendre chaque idée et vous poser 5 questions :
|
||||
|
||||
1. Le contexte correspondant à cette idée est-il suffisamment spécifique ?
|
||||
2. Les utilisateurs utilisent-ils déjà une méthode de fortune pour s'en sortir ?
|
||||
3. La douleur de ce job est-elle suffisamment forte, ou suffisamment fréquente ?
|
||||
4. Si je le fais bien, l'utilisateur sentira-t-il clairement que « son état s'est amélioré » ?
|
||||
5. La première version peut-elle se concentrer uniquement sur l'étape clé de ce job, pour produire une version petite mais utile ?
|
||||
|
||||
Si une direction, après réflexion, ne peut toujours être décrite que par « ça a l'air intéressant », sans pouvoir préciser le déclencheur, l'alternative et le critère de succès, c'est probablement encore une inspiration vague, pas une direction aboutie.
|
||||
|
||||
## 8. Des questions prêtes à l'emploi pour interroger les utilisateurs
|
||||
|
||||
Beaucoup de gens, quand ils font une étude, demandent : « Quelle fonctionnalité voulez-vous ? » Ce type de question génère facilement des réponses superficielles.
|
||||
|
||||
JTBD est plus adapté pour poser les questions suivantes :
|
||||
|
||||
- Quand est la dernière fois que vous avez rencontré ce problème ?
|
||||
- Que faisiez-vous à ce moment-là, pourquoi étiez-vous bloqué ?
|
||||
- Comment l'avez-vous finalement résolu ?
|
||||
- Dans ce processus, qu'est-ce qui était le plus pénible, le plus lent, le plus angoissant ?
|
||||
- S'il y avait un outil pour vous aider, quel résultat vous ferait dire qu'il est vraiment utile ?
|
||||
- Quelles alternatives avez-vous essayées ? Pourquoi n'étaient-elles pas assez bonnes ?
|
||||
|
||||
L'avantage de cette approche est qu'elle ramène la conversation vers les expériences réelles, au lieu de rester sur des préférences imaginaires.
|
||||
|
||||
## 9. Utiliser l'IA pour vous aider dans la décomposition JTBD
|
||||
|
||||
JTBD n'a pas été inventé par l'IA, mais l'IA est très bien adaptée pour vous aider à organiser et affiner les analyses JTBD.
|
||||
|
||||
Par exemple, si vous avez collecté 5 à 10 retours utilisateurs, vous pouvez les confier au modèle et lui demander de les synthétiser selon la structure suivante :
|
||||
|
||||
```text
|
||||
Merci de jouer le rôle d'assistant de recherche produit.
|
||||
Je vais vous donner des citations d'utilisateurs, ne donnez pas d'abord de suggestions de fonctionnalités,
|
||||
mais organisez-les d'abord selon le framework Jobs to Be Done :
|
||||
|
||||
1. Dans quel contexte se trouve l'utilisateur
|
||||
2. Quel est l'événement déclencheur de son action
|
||||
3. Quelle progression veut-il vraiment accomplir
|
||||
4. Quelle est l'alternative actuelle
|
||||
5. Quel critère de succès est le plus important pour lui
|
||||
6. Quels mots émotionnels reviennent dans ces retours
|
||||
|
||||
Enfin, organisez tout cela en 3 hypothèses JTBD les plus dignes d'être validées en priorité.
|
||||
```
|
||||
|
||||
Si vous avez déjà une idée, vous pouvez aussi demander à l'IA de faire une première convergence :
|
||||
|
||||
```text
|
||||
Je veux créer un [votre idée produit].
|
||||
Ne me donnez pas directement une liste de fonctionnalités, mais analysez avec la méthode Jobs to Be Done :
|
||||
|
||||
1. Quels contextes spécifiques ce produit pourrait-il servir
|
||||
2. Quel est le job central que l'utilisateur veut accomplir dans chaque contexte
|
||||
3. Quelles sont les alternatives existantes
|
||||
4. Quel job est le plus adapté comme point de départ MVP, et pourquoi
|
||||
5. Écrivez le job final recommandé en une phrase JTBD claire
|
||||
```
|
||||
|
||||
L'avantage de cette approche est que vous ne vous faites pas immédiatement emporter par l'IA vers « 50 idées de fonctionnalités », mais vous clarifiez d'abord la direction.
|
||||
|
||||
## 10. Les 4 erreurs les plus courantes chez les débutants
|
||||
|
||||
### 10.1 Écrire le job comme un nom de fonctionnalité
|
||||
|
||||
« Résumé AI », « Classification intelligente », « Génération automatique » — ce ne sont pas des jobs, ce sont seulement des modes de réalisation possibles.
|
||||
|
||||
### 10.2 Écrire un public beaucoup trop large
|
||||
|
||||
« Tous les professionnels », « tous les étudiants », « tous les entrepreneurs » — tout cela est généralement trop vague. Plus c'est vague, plus il est difficile de voir les scénarios réels.
|
||||
|
||||
### 10.3 Écouter seulement ce que les utilisateurs disent, sans observer ce qu'ils font
|
||||
|
||||
Les utilisateurs peuvent décrire ce qu'ils veulent, mais leurs véritables priorités sont souvent cachées dans la façon dont ils se débrouillent actuellement.
|
||||
|
||||
### 10.4 Vouloir construire une plateforme complète dès le début
|
||||
|
||||
La bonne approche de JTBD n'est généralement pas « je vais construire une grande plateforme qui fait tout », mais cibler d'abord l'étape la plus critique dans un scénario, et la rendre extrêmement fluide.
|
||||
|
||||
## 11. Résumé
|
||||
|
||||
La valeur la plus importante de Jobs to Be Done n'est pas de vous donner un nouveau terme, mais de vous aider à changer de perspective : **ne vous fixez pas uniquement sur les fonctionnalités du produit, mais sur ce que l'utilisateur veut faire avancer à l'étape suivante.**
|
||||
|
||||
Quand vous commencerez à vous poser répétitivement ces questions :
|
||||
|
||||
- Dans quel contexte l'utilisateur embauche-t-il ce produit
|
||||
- Où est-il exactement bloqué
|
||||
- Quelle méthode de fortune utilise-t-il actuellement
|
||||
- Une fois le problème résolu, quel sera le changement d'état
|
||||
|
||||
Vous découvrirez que beaucoup d'idées floues deviennent soudainement claires, et que beaucoup de fonctionnalités tape-à-l'œil deviennent soudainement moins importantes.
|
||||
|
||||
Créer un produit, surtout un produit AI, le plus grand risque est de se laisser absorber par la démonstration de capacités dès le début. JTBD vous aide à ramener l'attention sur ce qui compte vraiment : **pourquoi l'utilisateur a besoin de vous, et quelle progression vous l'aidez à accomplir.**
|
||||
|
||||
<a id="jtbd-ai"></a>
|
||||
## [12. Comment utiliser l'IA pour mettre en pratique JTBD](#top-jtbd)
|
||||
|
||||
JTBD n'a pas été inventé par l'IA, mais l'IA est très bien adaptée pour servir d'assistante de recherche, d'assistante d'organisation et de miroir dans cette méthode. L'essentiel est : **laissez l'IA vous aider à organiser et à élargir, pas à deviner les utilisateurs à votre place.**
|
||||
|
||||
Voici comment l'utiliser :
|
||||
|
||||
### 12.1 Laissez l'IA réécrire vos idées vagues en hypothèses JTBD
|
||||
|
||||
Quand vous n'avez qu'une description vague en tête, comme « je veux créer un outil pour aider les étudiants à trouver un stage », vous pouvez d'abord demander à l'IA de la décomposer en plusieurs jobs possibles :
|
||||
|
||||
```text
|
||||
J'ai une idée produit vague : [votre idée]
|
||||
Ne me donnez pas directement une liste de fonctionnalités, mais analysez avec la méthode Jobs to Be Done :
|
||||
1. Quels contextes spécifiques cela pourrait-il correspondre
|
||||
2. Quelle progression l'utilisateur veut vraiment accomplir dans chaque contexte
|
||||
3. Quelles pourraient être les alternatives actuelles
|
||||
4. Quel job est le plus adapté pour un MVP en premier
|
||||
Écrivez chaque job en une phrase JTBD claire.
|
||||
```
|
||||
|
||||
Vous pouvez même écrire une entrée très basique :
|
||||
|
||||
```text
|
||||
Je veux créer un truc pour aider les étudiants à trouver un stage.
|
||||
Je ne sais pas encore exactement quoi faire, aidez-moi à réfléchir à ce que les utilisateurs veulent vraiment accomplir.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre quelque chose comme :
|
||||
|
||||
```text
|
||||
Directions JTBD possibles :
|
||||
|
||||
1. Quand je prépare ma première candidature de stage, je veux savoir rapidement quels documents préparer en priorité,
|
||||
pour ne pas reporter ma candidature à cause de la confusion.
|
||||
|
||||
2. Quand je vois une offre de stage, je veux juger rapidement si ça vaut le coup de postuler,
|
||||
pour ne pas perdre trop de temps sur des postes inadaptés.
|
||||
|
||||
3. Quand je commence à postuler, je veux adapter mon CV existant en une version plus ciblée sur le poste,
|
||||
pour pouvoir postuler plus vite et améliorer mon taux de réussite.
|
||||
```
|
||||
|
||||
La valeur de ce type de résultat est qu'il décompose votre pensée vague en plusieurs directions plus proches de scénarios réels.
|
||||
|
||||
### 12.2 Laissez l'IA organiser les citations d'utilisateurs
|
||||
|
||||
Si vous avez déjà fait quelques entretiens, vous pouvez confier les notes à l'IA pour qu'elle en extraie les contextes, déclencheurs, alternatives et critères de succès qui reviennent :
|
||||
|
||||
```text
|
||||
Voici les citations de 5 utilisateurs.
|
||||
Ne donnez pas d'abord de solution, mais organisez selon le framework JTBD :
|
||||
1. Dans quel contexte se trouve l'utilisateur
|
||||
2. Quel est l'événement déclencheur de son action
|
||||
3. Quelle progression veut-il vraiment accomplir
|
||||
4. Quelle est l'alternative actuelle
|
||||
5. Quel critère de succès est le plus important pour lui
|
||||
6. Quelles informations reviennent chez plusieurs utilisateurs
|
||||
Enfin, organisez en 3 hypothèses JTBD prioritaires pour validation.
|
||||
```
|
||||
|
||||
Une entrée très simple pourrait être :
|
||||
|
||||
```text
|
||||
J'ai demandé à 3 personnes, ils m'ont dit à peu près ceci :
|
||||
|
||||
1. Chaque fois que je dois postuler, je dois refaire mon CV, c'est vraiment pénible.
|
||||
2. En fait, ce que je crains le plus, c'est de ne pas savoir si ce que j'écris est correct.
|
||||
3. Actuellement, je demande aux anciens de m'aider à relire, mais je n'ose pas toujours les déranger.
|
||||
|
||||
Organisez-moi ça : que veulent-ils vraiment accomplir ?
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Résultat de l'organisation :
|
||||
|
||||
- Contexte commun : préparer une candidature de stage, besoin de traiter le CV
|
||||
- Difficulté commune : ne pas savoir comment modifier pour que ce soit « assez bon »
|
||||
- Alternative actuelle : demander aux anciens de relire, modifier soi-même en boucle
|
||||
- JTBD possible :
|
||||
Quand je prépare ma candidature de stage, je veux juger plus vite si mon CV a atteint le niveau pour être envoyé,
|
||||
pour ne pas rester bloqué à « encore un peu de modification » et ne jamais l'envoyer.
|
||||
```
|
||||
|
||||
Ce type de résultat est utile parce qu'il vous aide à extraire des notes dispersées quelque chose qui ressemble davantage à un « besoin ».
|
||||
|
||||
### 12.3 Laissez l'IA faire une recherche en ligne légère
|
||||
|
||||
Avant de vous lancer dans des entretiens à grande échelle, vous pouvez demander à l'IA de faire un scan externe très léger, comme :
|
||||
|
||||
- Dans les forums ou communautés publics, comment les gens se plaignent-ils de ce problème
|
||||
- Les produits existants résolvent-ils principalement quelle couche du problème
|
||||
- Quelle est l'alternative la plus courante des utilisateurs
|
||||
- Dans les avis fréquents, qu'est-ce que les gens apprécient le plus et le moins
|
||||
|
||||
Ce type de recherche ne remplace pas les entretiens avec de vrais utilisateurs, mais il est idéal comme échauffement en phase Discover, pour construire d'abord une carte des problèmes.
|
||||
|
||||
Une entrée simple pourrait être :
|
||||
|
||||
```text
|
||||
Merci de rechercher :
|
||||
« Quelles sont les douleurs les plus fréquentes quand les étudiants modifient leur CV et postulent pour des stages ? »
|
||||
Priorisez les forums publics, les posts d'expérience et les communautés de recherche d'emploi.
|
||||
Organisez en 5 problèmes les plus fréquents.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Douleurs fréquentes :
|
||||
|
||||
1. Ne sait pas quoi mettre dans le CV, trop peu d'expériences
|
||||
2. Ne sait pas comment adapter pour différents postes
|
||||
3. A modifié beaucoup de versions, mais n'est toujours pas sûr que c'est assez bon
|
||||
4. Ne trouve personne de fiable pour relire
|
||||
5. Le processus de candidature est complexe, tendance à procrastiner
|
||||
```
|
||||
|
||||
Ce type de résultat ne peut pas être considéré comme conclusion finale, mais il est idéal pour décider quel type de problème interviewer en priorité.
|
||||
|
||||
### 12.4 Laissez l'IA jouer le rôle de « contre-partie »
|
||||
|
||||
Très souvent, nous sommes trop attachés à nos propres idées. Vous pouvez demander à l'IA de jouer un rôle de critique pour vous forcer à clarifier vos questions :
|
||||
|
||||
```text
|
||||
Merci de jouer le rôle d'un consultant en recherche produit très strict.
|
||||
Voici mon hypothèse JTBD : [votre hypothèse]
|
||||
Critiquez-la sous les angles suivants :
|
||||
1. Le contexte est-il trop large
|
||||
2. Le job est-il écrit comme une fonctionnalité plutôt qu'une vraie progression
|
||||
3. L'alternative est-elle trop faible
|
||||
4. Le critère de succès n'est-il pas assez clair
|
||||
5. Quel est le risque principal qui nécessite une validation pour cette hypothèse
|
||||
```
|
||||
|
||||
L'avantage de cette approche est que vous découvrirez plus vite si vous regardez un besoin ou seulement une solution que vous aimez.
|
||||
|
||||
## 📚 Exercices
|
||||
|
||||
En vous basant sur le contenu ci-dessus, veuillez réaliser les exercices suivants :
|
||||
|
||||
1. Choisissez une idée produit que vous avez récemment, et écrivez-la clairement avec une phrase JTBD
|
||||
2. Complétez les 5 éléments pour cette idée : contexte, déclencheur, progression, alternative, critère de succès
|
||||
3. Trouvez 3 utilisateurs potentiels, et demandez au moins une fois « quand est la dernière fois que vous avez rencontré ce problème »
|
||||
4. Confiez les notes d'entretien à l'IA et organisez-les en 3 hypothèses JTBD prioritaires pour validation
|
||||
|
||||
## Lectures complémentaires
|
||||
|
||||
- [Christensen Institute : Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
|
||||
- [Harvard Business School Online : What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
|
||||
- [Intercom : Jobs-to-be-Done : A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
|
||||
- [Mural : Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
|
||||
@@ -0,0 +1,589 @@
|
||||
---
|
||||
title: "The Mom Test : comment valider les besoins par les entretiens utilisateurs"
|
||||
description: "Article d'introduction à The Mom Test pour les lecteurs débutants. Apprenez à éviter les retours de politesse, à mener des entretiens utilisateurs axés sur les comportements réels, les faits concrets et les problèmes existants, et à transformer les « ça a l'air pas mal » en jugements de besoins plus fiables."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>1,5 heure</strong>'
|
||||
</script>
|
||||
|
||||
# The Mom Test : comment valider les besoins par les entretiens utilisateurs
|
||||
|
||||
<a id="top-mom"></a>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Entretien utilisateur', 'Validation des besoins', 'Recherche utilisateur', 'Étude de marché']"
|
||||
coreOutput="1 ensemble de questions d'entretien plus à même de révéler des informations réelles"
|
||||
expectedOutput="Ne plus prendre les encouragements de politesse pour une validation, et savoir juger la direction à partir de comportements réels"
|
||||
>
|
||||
|
||||
Beaucoup de gens, lorsqu'ils font leur première étude de marché, pensent que le plus important est de « discuter avec des gens ». Alors ils vont demander à leurs amis, collègues, voire leur famille :
|
||||
|
||||
- Tu penses quoi de mon idée ?
|
||||
- S'il y avait un produit comme ça, tu l'utiliserais ?
|
||||
- Cette fonctionnalité, ça a l'air pas mal, non ?
|
||||
|
||||
L'autre personne donne souvent un retour très encourageant :
|
||||
|
||||
- C'est pas mal
|
||||
- Ça a l'air utile
|
||||
- Je pense que tu devrais essayer
|
||||
|
||||
Le problème, c'est que ces réponses ne vous aident généralement pas à prendre une décision. Elles ressemblent davantage à de la politesse, du soutien, ou une réaction naturelle pour ne pas vous décevoir sur le moment. Vous pensez avoir obtenu une « validation de marché », mais en réalité vous n'avez collecté qu'un ensemble de réconforts difficilement exploitables pour la prise de décision.
|
||||
|
||||
La méthode The Mom Test a été conçue précisément pour résoudre ce problème. Elle nous rappelle : **ce n'est pas que les utilisateurs essaient de vous mentir, c'est que votre façon de poser les questions oriente naturellement l'autre personne vers des réponses flatteuses mais inutiles.**
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimale
|
||||
**Objectif** : après avoir lu, vous saurez mieux comment discuter avec les utilisateurs pour ne pas entendre uniquement « ça a l'air pas mal », mais vraiment obtenir des informations qui vous aident à juger la direction.
|
||||
|
||||
**Actions** : réécrivez vos 5 questions initiales, en privilégiant « quand est la dernière fois que ça s'est produit » et « comment avez-vous géré ça à ce moment-là ».
|
||||
|
||||
**Résultat** : vous saurez plus facilement distinguer ce qui est une opinion de ce qui constitue une véritable preuve pour étayer vos décisions.
|
||||
|
||||
**Navigation rapide** : [Qu'est-ce que The Mom Test](#mom-what) · [Trois principes fondamentaux](#mom-principles) · [Comment l'IA peut vous aider](#mom-ai)
|
||||
:::
|
||||
|
||||
## Ce que vous apprendrez
|
||||
|
||||
1. Quel problème The Mom Test résout réellement, et pourquoi beaucoup de « recherches utilisateurs » ne capturent en fait pas d'informations réelles
|
||||
2. Les principes fondamentaux de cette méthode : moins demander des opinions, plus demander des comportements ; moins demander des hypothèses, plus demander des faits
|
||||
3. Comment transformer une question qui génère facilement des faux positifs en une question d'entretien plus précieuse
|
||||
4. Comment combiner The Mom Test avec JTBD, la validation des besoins et l'évaluation du MVP
|
||||
|
||||
<a id="mom-what"></a>
|
||||
## [1. Qu'est-ce que The Mom Test vraiment](#top-mom)
|
||||
|
||||
The Mom Test vient du livre du même nom de Rob Fitzpatrick. Son nom ressemble à une blague, mais il touche juste :
|
||||
|
||||
**Même votre maman aurait du mal à vous dire directement « c'est une mauvaise idée ».**
|
||||
|
||||
La raison n'est pas qu'elle est malhonnête, mais :
|
||||
|
||||
- Elle ne veut pas vous blesser
|
||||
- Elle va instinctivement vous encourager
|
||||
- Elle a facilement tendance à répondre dans le sens de ce que vous exprimez
|
||||
|
||||
Et ce n'est pas seulement votre maman — les amis, collègues, anciens camarades de classe, et même beaucoup d'inconnus, face à votre idée de produit, donnent souvent des « retours positifs » similaires. Cela ne signifie pas que le besoin est réel, seulement que vous avez formulé votre question d'une manière qui génère facilement des réponses flatteuses.
|
||||
|
||||
Donc, l'essentiel de The Mom Test n'a jamais été « ne demandez pas à votre maman », mais :
|
||||
|
||||
**Ne formulez pas vos questions de façon à ce que n'importe qui soit enclin à vous donner une réponse qui vous va droit au cœur.**
|
||||
|
||||
Ce que cette méthode veut vraiment vous apprendre, c'est comment obtenir, par la conversation, des informations plus proches des besoins réels, plutôt que de collecter un ensemble de commentaires qui vous font simplement vous sentir bien.
|
||||
|
||||
## 2. Quel est le problème fondamental qu'elle résout
|
||||
|
||||
The Mom Test résout principalement une illusion cognitive très courante :
|
||||
|
||||
**Prendre les retours positifs de politesse pour des besoins réels.**
|
||||
|
||||
Par exemple, si vous demandez :
|
||||
|
||||
- Tu penses quoi de cette idée d'application ?
|
||||
- Si je faisais un outil AI pour t'aider à écrire ton CV, tu l'utiliserais ?
|
||||
- Cette fonctionnalité, est-ce qu'elle a de la valeur ?
|
||||
|
||||
Ces questions ont en commun :
|
||||
|
||||
- Elles demandent toutes des « opinions »
|
||||
- Elles portent toutes une pointe de suggestion
|
||||
- Elles parlent toutes d'un futur qui n'est pas encore arrivé
|
||||
|
||||
Or, les réponses des gens aux « opinions » et aux « hypothèses futures » sont généralement instables. Beaucoup de gens surestiment leur intérêt, leur capacité d'exécution, et leur volonté future de payer.
|
||||
|
||||
The Mom Test vous rappelle donc :
|
||||
|
||||
- Ne croyez pas trop les évaluations des autres sur vos idées
|
||||
- Ne croyez pas trop les prédictions des autres sur leurs comportements futurs
|
||||
- Revenez autant que possible aux comportements réels déjà observés chez les utilisateurs
|
||||
|
||||
Parce que comparé à « est-ce que tu utiliserais ça », « comment as-tu géré ce problème la dernière fois » est souvent bien plus proche de la vérité.
|
||||
|
||||
<a id="mom-principles"></a>
|
||||
## [3. Les trois principes fondamentaux](#top-mom)
|
||||
|
||||
Si vous ne deviez retenir que la partie la plus importante, commencez par ces trois principes.
|
||||
|
||||
### 3.1 Parlez moins de votre idée, parlez plus des expériences réelles passées de l'utilisateur
|
||||
|
||||
Beaucoup d'entretiens inefficaces commencent par exposer sa propre solution, à quel point on est enthousiaste, quel produit on prépare. Le problème, c'est qu'une fois que vous avez trop parlé, l'autre personne passe facilement en mode « vous accompagner » et « vous encourager ».
|
||||
|
||||
Une meilleure approche consiste à se concentrer sur l'expérience de l'autre :
|
||||
|
||||
- Quand est la dernière fois que vous avez rencontré ce problème ?
|
||||
- Que faisiez-vous à ce moment-là ?
|
||||
- Comment avez-vous fini par le résoudre ?
|
||||
- Quelle étape était la plus pénible ?
|
||||
|
||||
Ce type de questions ramène naturellement la conversation vers la réalité, au lieu de rester sur des préférences imaginaires.
|
||||
|
||||
### 3.2 Demandez moins d'opinions abstraites, demandez plus de faits concrets
|
||||
|
||||
« Je trouve cette fonctionnalité pas mal », « ça a l'air bien », « ça semble utile » — toutes ces expressions sont trop abstraites pour guider les décisions produit.
|
||||
|
||||
Les informations plus précieuses ressemblent plutôt à ça :
|
||||
|
||||
- La semaine dernière, j'ai passé 2 heures à me débattre avec ce problème
|
||||
- Actuellement, je me débrouille avec Excel et WeChat
|
||||
- Le mois dernier, j'ai déjà payé pour un outil similaire
|
||||
- Ma plus grande crainte est de me tromper, pas d'être lent
|
||||
|
||||
Ce sont ces informations qui vous aident vraiment à juger l'intensité du problème, sa fréquence et la probabilité de paiement.
|
||||
|
||||
### 3.3 Demandez moins aux utilisateurs quelle solution ils veulent, observez davantage comment ils résolvent le problème actuellement
|
||||
|
||||
Les utilisateurs sont très doués pour décrire leurs frustrations, mais pas nécessairement pour concevoir des solutions.
|
||||
|
||||
Si vous demandez :
|
||||
|
||||
- Voudriez-vous un AI qui fait ça automatiquement pour vous ?
|
||||
- Pensez-vous qu'ajouter une fonctionnalité intelligente serait utile ?
|
||||
|
||||
Vous n'obtiendrez généralement qu'une attitude vague envers une solution, pas le besoin lui-même.
|
||||
|
||||
Les meilleures questions sont :
|
||||
|
||||
- Comment gérez-vous ce problème actuellement ?
|
||||
- Pourquoi avez-vous choisi cette méthode ?
|
||||
- Qu'est-ce qui ne va pas avec cette méthode ?
|
||||
|
||||
Comprendre les alternatives actuelles est souvent plus important que de demander directement « que voulez-vous ».
|
||||
|
||||
## 4. Pourquoi les gens vous donnent toujours des réponses flatteuses mais inutiles
|
||||
|
||||
Si vous comprenez cela, vous ferez beaucoup moins d'erreurs de jugement lors des entretiens.
|
||||
|
||||
### 4.1 Les gens sont instinctivement polis
|
||||
|
||||
Surtout quand votre interlocuteur a une relation avec vous, il aura du mal à dire directement :
|
||||
|
||||
- Cette direction ne me semble pas viable
|
||||
- Je n'utiliserais pas ça du tout
|
||||
- Ce problème n'est pas si important pour moi
|
||||
|
||||
Il dira plus probablement « c'est pas mal » ou « ça vaut le coup d'essayer ».
|
||||
|
||||
### 4.2 Les gens surestiment leur futur moi
|
||||
|
||||
Beaucoup de gens croient sincèrement qu'ils seront à l'avenir :
|
||||
|
||||
- Plus disciplinés
|
||||
- Plus disposés à apprendre
|
||||
- Plus disposés à payer
|
||||
- Plus ouverts aux nouveaux outils
|
||||
|
||||
Donc la phrase « si ça existait, je l'utiliserais probablement » ne signifie souvent pas que la personne l'utilisera vraiment.
|
||||
|
||||
### 4.3 Votre façon de poser les questions oriente les réponses
|
||||
|
||||
Quand vous demandez :
|
||||
|
||||
- Mon idée est pas mal, non ?
|
||||
- Cette fonctionnalité vous serait très utile, n'est-ce pas ?
|
||||
|
||||
Vous avez subtilement glissé la « bonne réponse » dans la question.
|
||||
|
||||
C'est pourquoi The Mom Test insiste particulièrement : **ne transformez pas vos entretiens en quête de validation.**
|
||||
|
||||
## 5. Comparaison directe : quelles questions sont inutiles, lesquelles sont plus précieuses
|
||||
|
||||
Ces comparaisons sont utiles pour presque tous les débutants.
|
||||
|
||||
| Questions inutiles | Questions plus précieuses |
|
||||
| --- | --- |
|
||||
| Tu penses quoi de mon idée ? | Quand est la dernière fois que tu as rencontré ce problème ? |
|
||||
| S'il y avait ce produit, tu l'utiliserais ? | Comment gérez-vous ce problème actuellement ? |
|
||||
| Serais-tu prêt à payer pour cette fonctionnalité ? | As-tu déjà dépensé de l'argent pour ce problème ? Pour quoi ? |
|
||||
| Trouves-tu cette fonctionnalité importante ? | Dans ce processus, quelle étape est la plus pénible, la plus lente, la plus angoissante ? |
|
||||
| Voudrais-tu un AI qui fait ça automatiquement ? | Pourquoi n'as-tu pas encore trouvé de meilleure solution ? |
|
||||
|
||||
Ce qui est le plus important dans ce tableau, ce ne sont pas les phrases exactes, mais la direction sous-jacente :
|
||||
|
||||
- Des opinions vers les faits
|
||||
- Du futur vers le passé
|
||||
- De votre solution vers le problème de l'utilisateur
|
||||
|
||||
## 6. Un rythme d'entretien que même un débutant peut utiliser immédiatement
|
||||
|
||||
Si vous voulez aller parler à des gens dès maintenant, vous pouvez suivre cet ordre.
|
||||
|
||||
### 6.1 Ouverture : expliquez que vous apprenez, pas que vous vendez
|
||||
|
||||
Par exemple :
|
||||
|
||||
> Je fais des recherches sur la façon dont les gens gèrent ce type de problème, je veux d'abord comprendre la situation réelle, je ne viens pas vous vendre quelque chose.
|
||||
|
||||
Cette formulation permet à l'autre personne de relâcher plus facilement le fardeau psychologique de « devoir vous donner un retour positif ».
|
||||
|
||||
### 6.2 Commencez par la dernière expérience réelle
|
||||
|
||||
Vous pouvez commencer par ce type de questions :
|
||||
|
||||
- Quand est la dernière fois que vous avez rencontré ce problème ?
|
||||
- Que s'est-il passé à ce moment-là ?
|
||||
- Quelle a été votre première réaction pour le gérer ?
|
||||
|
||||
Une fois que la conversation entre dans des événements précis, la qualité des informations s'améliore généralement de manière significative.
|
||||
|
||||
### 6.3 Approfondissez sur les comportements, les coûts et les alternatives
|
||||
|
||||
Continuez à demander :
|
||||
|
||||
- Comment résolvez-vous ce problème actuellement ?
|
||||
- Qu'est-ce qui est le plus désagréable dans cette méthode ?
|
||||
- Combien de temps, d'argent ou d'énergie y consacrez-vous ?
|
||||
- Avez-vous essayé d'autres méthodes ? Pourquoi ne les avez-vous pas poursuivies ?
|
||||
|
||||
### 6.4 Enfin, évaluez la douleur et la priorité
|
||||
|
||||
Vous n'avez pas besoin de demander directement « est-ce douloureux ? », vous pouvez juger à partir des détails :
|
||||
|
||||
- Est-ce que ça arrive souvent
|
||||
- Est-ce qu'il cherche activement des solutions de secours
|
||||
- Est-ce qu'il est déjà prêt à payer pour ça
|
||||
- Est-ce qu'il montre des émotions évidentes quand il en parle
|
||||
|
||||
Tout cela est plus utile qu'une simple « est-ce que c'est votre point de douleur ».
|
||||
|
||||
## 7. Un exemple plus complet
|
||||
|
||||
Supposons que vous voulez créer un produit « AI qui aide les étudiants à améliorer leur CV ».
|
||||
|
||||
### Mauvaise approche
|
||||
|
||||
Vous allez demander à des camarades :
|
||||
|
||||
> Je veux créer un outil d'optimisation de CV par AI, tu en penses quoi ?
|
||||
> S'il pouvait adapter automatiquement le CV selon le poste, tu l'utiliserais ?
|
||||
|
||||
À ce moment, l'autre personne dira probablement :
|
||||
|
||||
- Ça a l'air pas mal
|
||||
- Je pense que ça pourrait être utile
|
||||
> Si c'est gratuit, j'essaierais
|
||||
|
||||
Ces réponses ne vous aident pratiquement pas à déterminer si le besoin est fort ou non.
|
||||
|
||||
### Meilleure approche
|
||||
|
||||
Vous pourriez reformuler :
|
||||
|
||||
> Quand est la dernière fois que tu as modifié ton CV ?
|
||||
> Pourquoi devais-tu le modifier à ce moment-là ?
|
||||
> Comment t'y es-tu pris ?
|
||||
> Quelle étape t'a le plus bloqué ?
|
||||
> As-tu demandé à quelqu'un de t'aider à le relire ?
|
||||
> As-tu déjà passé beaucoup de temps ou dépensé de l'argent pour ton CV ?
|
||||
|
||||
Grâce à ces questions, les informations que vous pourriez obtenir sont :
|
||||
|
||||
- Beaucoup de gens ne savent pas écrire, mais ne savent pas comment adapter leur CV pour différents postes
|
||||
- Leur plus grande difficulté n'est pas la mise en page, mais « ne pas savoir quelles expériences valent la peine d'être mentionnées »
|
||||
- Ils procrastinent, pas parce qu'ils sont paresseux, mais parce que chaque modification de CV est épuisante
|
||||
- Ils utilisent déjà les conseils de leurs aînés, les sites de modèles, les outils AI et les relectures par des amis pour s'en sortir
|
||||
|
||||
À ce stade, vous êtes bien plus proche du problème réel.
|
||||
|
||||
## 8. Comment combiner The Mom Test avec JTBD
|
||||
|
||||
Si JTBD vous aide à voir « ce que l'utilisateur veut accomplir », The Mom Test vous apprend plutôt :
|
||||
|
||||
**Comment vérifier, par des entretiens, si ce job existe vraiment.**
|
||||
|
||||
Vous pouvez tout à fait les utiliser ensemble :
|
||||
|
||||
1. D'abord, utilisez JTBD pour formuler une hypothèse de job
|
||||
2. Puis utilisez les techniques de The Mom Test pour interroger les utilisateurs sur leur dernière expérience réelle
|
||||
3. Vérifiez si ce job est vraiment fréquent, réel et prioritaire
|
||||
|
||||
Par exemple, votre hypothèse JTBD pourrait être :
|
||||
|
||||
> Quand je prépare ma candidature pour un stage, je veux rapidement adapter mon ancien CV en une version adaptée au poste, pour pouvoir soumettre ma candidature dès que possible.
|
||||
|
||||
Vous pouvez alors vérifier avec des questions de style The Mom Test :
|
||||
|
||||
- Quand est la dernière fois que tu as postulé ?
|
||||
- Comment as-tu modifié ton CV à ce moment-là ?
|
||||
- Quelle partie a été la plus difficile à écrire ?
|
||||
- Après modification, comment jugerais-tu si c'est assez bon ?
|
||||
|
||||
Ainsi, les méthodes se connectent :
|
||||
|
||||
- JTBD vous aide à définir l'hypothèse de besoin
|
||||
- The Mom Test vous aide à vérifier l'hypothèse par entretien
|
||||
|
||||
## 9. Erreurs les plus courantes des débutants lors des entretiens utilisateurs
|
||||
|
||||
### 9.1 Transformer l'entretien en présentation produit
|
||||
|
||||
Plus vous parlez de vos propres idées, plus l'autre personne aura tendance à vous suivre, au lieu de vous dire la réalité.
|
||||
|
||||
### 9.2 N'interroger que des connaissances
|
||||
|
||||
Les connaissances ne sont pas interdites, mais elles sont plus enclines à vous encourager. Vous devez au moins mélanger des personnes plus proches des utilisateurs réels, pas seulement des gens qui vous soutiennent.
|
||||
|
||||
### 9.3 Poser des questions sur les fonctionnalités trop tôt
|
||||
|
||||
Si vous n'avez pas encore compris le problème, commencer à poser des questions sur les boutons, l'interface et les détails des fonctionnalités, c'est généralement entrer trop tôt dans la solution.
|
||||
|
||||
### 9.4 Prendre un « je l'utiliserais » pour un résultat de validation
|
||||
|
||||
L'entretien vous aide au mieux à juger la direction, il ne remplace pas la validation. La vraie validation, c'est de voir si les utilisateurs sont prêts à payer un coût réel — temps, coût de changement, essai, voire paiement.
|
||||
|
||||
### 9.5 Ne pas organiser les notes après l'entretien
|
||||
|
||||
Si vous laissez les informations de côté après avoir discuté, elles deviennent vite des impressions floues. Il vaut mieux les organiser rapidement :
|
||||
|
||||
- Les problèmes les plus fréquents
|
||||
- Les mots émotionnels dans les propos originaux des utilisateurs
|
||||
- Les solutions alternatives actuelles
|
||||
- Les coûts déjà engagés
|
||||
- Vos propres nouveaux jugements
|
||||
|
||||
## 10. Liste de questions prêtes à l'emploi
|
||||
|
||||
Si vous voulez commencer rapidement, voici un ensemble de questions suffisamment polyvalentes.
|
||||
|
||||
### Questions d'ouverture
|
||||
|
||||
- Quand est la dernière fois que vous avez rencontré ce problème ?
|
||||
- Que s'est-il passé exactement à ce moment-là ?
|
||||
|
||||
### Questions sur les comportements
|
||||
|
||||
- Comment avez-vous géré la situation à ce moment-là ?
|
||||
- Pourquoi avez-vous choisi cette méthode ?
|
||||
|
||||
### Questions sur les coûts
|
||||
|
||||
- Combien de temps ou d'énergie cette tâche vous prend-elle généralement ?
|
||||
- Avez-vous déjà dépensé de l'argent pour la résoudre ?
|
||||
|
||||
### Questions sur les alternatives
|
||||
|
||||
- Avez-vous essayé d'autres outils ou méthodes ?
|
||||
- Pourquoi ne les avez-vous pas continués ?
|
||||
|
||||
### Questions de clôture
|
||||
|
||||
- Si vous rencontrez le même problème à l'avenir, à quoi ressemblerait la solution idéale ?
|
||||
|
||||
Notez que cette question de clôture peut être posée, mais il vaut mieux la garder pour la fin. Parce que vous avez d'abord besoin de recueillir des faits, pas des souhaits.
|
||||
|
||||
## 11. Résumé
|
||||
|
||||
La contribution la plus importante de The Mom Test n'est pas de vous donner une technique pour « mieux discuter », mais de vous aider à construire un mode de jugement plus lucide :
|
||||
|
||||
- Ne croyez pas trop vite aux compliments des autres sur vos idées
|
||||
- Ne prenez pas « si ça existait, je l'utiliserais » pour un besoin réel
|
||||
- Ne transformez pas vos entretiens en quête de validation
|
||||
|
||||
Un entretien véritablement précieux devrait revenir autant que possible à ces éléments :
|
||||
|
||||
- La dernière expérience réelle de l'utilisateur
|
||||
- Comment il gère le problème actuellement
|
||||
- Ce qu'il a déjà payé
|
||||
- Où il est visiblement mal à l'aise
|
||||
|
||||
Quand vous commencez à poser les questions de cette façon, les informations que vous obtiendrez seront parfois moins flatteuses, mais généralement plus utiles.
|
||||
Et quand on crée un produit, **une vérité utile est toujours plus importante qu'un encouragement flatteur.**
|
||||
|
||||
<a id="mom-ai"></a>
|
||||
## [12. Comment utiliser l'IA pour vos entretiens utilisateurs](#top-mom)
|
||||
|
||||
The Mom Test est fondamentalement une méthode pour « discuter avec de vraies personnes », l'IA ne peut donc pas remplacer les entretiens réels. Mais l'IA est très utile comme assistante avant, pendant et après les entretiens, surtout pour réduire la barrière d'entrée des débutants.
|
||||
|
||||
### 12.1 Laissez l'IA réécrire vos questions « faciles à rater »
|
||||
|
||||
Beaucoup de gens savent qu'ils ne devraient pas demander « tu penses quoi de mon idée », mais à la première occasion, ils reviennent à ce type de phrase. Vous pouvez d'abord confier vos questions préparées à l'IA pour qu'elle les réécrive :
|
||||
|
||||
```text
|
||||
Voici les questions que je prépare pour des entretiens utilisateurs :
|
||||
[insérez vos questions]
|
||||
|
||||
Merci de les réécrire selon les principes de The Mom Test :
|
||||
1. Supprimez les questions d'opinion
|
||||
2. Supprimez les questions qui supposent l'avenir
|
||||
3. Reformulez-les autant que possible autour des comportements passés réels, des alternatives existantes et des coûts déjà engagés
|
||||
4. Organisez le tout en une liste de 8 à 10 questions prêtes pour l'entretien
|
||||
```
|
||||
|
||||
Même une entrée très basique fonctionne :
|
||||
|
||||
```text
|
||||
Je veux demander aux utilisateurs :
|
||||
1. Tu penses quoi de mon idée d'outil AI pour améliorer les CV ?
|
||||
2. Tu l'utiliserais ?
|
||||
3. Serais-tu prêt à payer ?
|
||||
|
||||
Aide-moi à reformuler ces questions.
|
||||
```
|
||||
|
||||
L'IA pourrait produire quelque chose comme :
|
||||
|
||||
```text
|
||||
Questions réécrites :
|
||||
|
||||
1. Quand est la dernière fois que tu as modifié ton CV ?
|
||||
2. Pourquoi devais-tu le modifier ?
|
||||
3. Comment t'y es-tu pris ?
|
||||
4. Quelle étape t'a pris le plus de temps ?
|
||||
5. As-tu demandé à quelqu'un de t'aider à le relire ?
|
||||
6. As-tu déjà passé beaucoup de temps ou dépensé de l'argent pour modifier ton CV ?
|
||||
```
|
||||
|
||||
Ce type de résultat est très utile parce qu'il transforme directement vos questions « demandant des opinions » en questions « demandant des comportements réels ».
|
||||
|
||||
### 12.2 Laissez l'IA générer des guides d'entretien pour différents profils
|
||||
|
||||
Pour un même domaine, face à différents publics, l'accent de l'entretien sera différent. Par exemple, les étudiants, les RH, les travailleurs indépendants ont des préoccupations complètement différentes. Vous pouvez demander à l'IA de générer une version de guide pour chaque type d'interlocuteur :
|
||||
|
||||
- Pour les utilisateurs débutants, concentrez-vous sur la dernière expérience réelle
|
||||
- Pour les utilisateurs intensifs, concentrez-vous sur les alternatives et la douleur
|
||||
- Pour les utilisateurs payants, concentrez-vous sur les coûts déjà engagés
|
||||
|
||||
Ainsi, vous aurez un meilleur rythme lors des vraies conversations, au lieu de poser les mêmes questions à tout le monde.
|
||||
|
||||
Par exemple, vous pouvez saisir directement :
|
||||
|
||||
```text
|
||||
Je vais discuter avec deux types de personnes :
|
||||
1. Étudiants qui cherchent leur premier stage
|
||||
2. Étudiants plus avancés qui ont déjà relu beaucoup de CV
|
||||
|
||||
Donnez-moi un guide d'entretien pour chacun, 6 questions par guide.
|
||||
```
|
||||
|
||||
L'IA pourrait générer :
|
||||
|
||||
```text
|
||||
Pour les étudiants :
|
||||
1. Quand est la dernière fois que tu as postulé pour un stage ?
|
||||
2. Quelle étape t'a le plus bloqué ?
|
||||
3. Comment sais-tu si ton CV est prêt à être envoyé ?
|
||||
...
|
||||
|
||||
Pour les étudiants avancés :
|
||||
1. Quand est la dernière fois que tu as aidé quelqu'un à relire son CV ?
|
||||
2. Quels problèmes évidents vois-tu le plus souvent ?
|
||||
3. À quelle étape les plus jeunes bloquent-ils le plus ?
|
||||
...
|
||||
```
|
||||
|
||||
Ainsi, vous n'avez pas besoin d'inventer les questions à partir de zéro, la préparation de l'entretien sera beaucoup plus facile.
|
||||
|
||||
### 12.3 Laissez l'IA organiser vos notes d'entretien
|
||||
|
||||
Après les entretiens, le problème le plus fréquent n'est pas « manquer d'informations », mais « les informations sont trop dispersées ». L'IA est très adaptée pour vous aider à organiser des conversations fragmentées en notes structurées :
|
||||
|
||||
```text
|
||||
Voici les notes de mes entretiens avec 3 utilisateurs.
|
||||
Merci de les organiser selon la perspective de The Mom Test :
|
||||
1. Quels contenus sont des faits, lesquels sont juste des opinions
|
||||
2. Quel est le dernier comportement réel de l'utilisateur
|
||||
3. Quelle est la solution alternative actuelle
|
||||
4. Quels sont les coûts en temps, argent ou énergie déjà engagés par l'utilisateur
|
||||
5. Quels problèmes ont été mentionnés à plusieurs reprises
|
||||
6. Quelles déclarations semblent positives mais manquent de preuves
|
||||
```
|
||||
|
||||
Cette étape est particulièrement précieuse car elle vous aide à séparer le contenu « qui a l'air pas mal » du contenu « qui peut vraiment étayer vos décisions ».
|
||||
|
||||
Une entrée simple pourrait être :
|
||||
|
||||
```text
|
||||
Voici les notes après une conversation avec un utilisateur :
|
||||
|
||||
- Elle a dit que si un outil existait, elle essaierait probablement
|
||||
- La semaine dernière, elle a passé une soirée entière à modifier son CV
|
||||
- Actuellement, elle demande principalement à des amis de l'aider à relire
|
||||
- Elle a dit que le plus difficile est de savoir quand un CV est « prêt à être envoyé »
|
||||
|
||||
Aidez-moi à distinguer ce qui est opinion et ce qui est fait.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Opinions :
|
||||
- Si un outil existait, elle essaierait probablement
|
||||
|
||||
Faits :
|
||||
- La semaine dernière, elle a passé une soirée à modifier son CV
|
||||
- La solution alternative actuelle est de demander à des amis de relire
|
||||
- Le point le plus difficile est de savoir quand on peut considérer le CV « prêt à envoyer »
|
||||
|
||||
Points clés pour évaluer le besoin :
|
||||
- Ce problème est survenu récemment
|
||||
- L'utilisateur a déjà investi un temps significatif
|
||||
- La solution actuelle dépend d'autres personnes, elle n'est pas stable
|
||||
```
|
||||
|
||||
Ce résultat montre très intuitivement aux débutants : quelles phrases peuvent servir à prendre des décisions, et lesquelles ne sont que des commentaires.
|
||||
|
||||
### 12.4 Laissez l'IA faire une première recherche en ligne légère
|
||||
|
||||
Si vous n'avez pas encore commencé vos entretiens, vous pouvez d'abord demander à l'IA de faire une recherche externe très légère, comme :
|
||||
|
||||
- Dans les communautés publiques, comment les gens se plaignent-ils de ce problème récemment
|
||||
- Qu'est-ce qui est le plus critiqué dans les outils existants
|
||||
- Les utilisateurs ont-ils déjà payé pour des problèmes similaires
|
||||
- Quelles alternatives existent déjà sur le marché
|
||||
|
||||
Ce type d'information ne remplace pas les entretiens avec de vraies personnes, mais peut vous aider à entrer plus rapidement dans le sujet et à savoir par où commencer les questions.
|
||||
|
||||
Par exemple, une entrée simple pourrait être :
|
||||
|
||||
```text
|
||||
Merci de rechercher :
|
||||
« Ce dont les étudiants se plaignent le plus quand ils modifient leur CV »
|
||||
Organisez les 5 plaintes les plus fréquentes, dans un langage très simple.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Plaintes fréquentes :
|
||||
|
||||
1. Ne sait pas ce qu'il faut mettre dans le CV
|
||||
2. Devoir le modifier pour chaque poste, c'est fatigant
|
||||
3. Après de nombreuses modifications, on n'est toujours pas sûr que c'est bien
|
||||
4. Personne ne peut donner un retour fiable
|
||||
5. On a toujours l'impression de ne pas être prêt, donc on remet à plus tard
|
||||
```
|
||||
|
||||
La valeur de ce type de résultat est qu'il vous permet de trouver plus facilement un angle d'attaque pour vos entretiens.
|
||||
|
||||
### 12.5 Laissez l'IA jouer le rôle de « coach de débriefing d'entretien »
|
||||
|
||||
Vous pouvez aussi confier les notes d'un entretien que vous venez de terminer à l'IA, et lui demander de vous faire des critiques :
|
||||
|
||||
```text
|
||||
Voici les notes d'un entretien utilisateur que je viens de faire.
|
||||
Merci de m'aider à débriefé depuis la perspective de The Mom Test :
|
||||
1. Quelles questions ressemblaient trop à une recherche de validation
|
||||
2. Quelles questions étaient trop orientées
|
||||
3. Où aurais-je pu approfondir sur les faits
|
||||
4. Si je pouvais recommencer, comment pourrais-je mieux poser les questions dans cette conversation
|
||||
```
|
||||
|
||||
C'est particulièrement utile pour les débutants, car vous développerez plus rapidement une sensibilité à « est-ce que je collecte des preuves ou des encouragements ».
|
||||
|
||||
## 📚 Exercices
|
||||
|
||||
En vous basant sur le contenu ci-dessus, veuillez réaliser les exercices suivants :
|
||||
|
||||
1. Choisissez un produit que vous voulez créer récemment, et écrivez d'abord 5 questions « faciles à rater » que vous auriez posées
|
||||
2. Réécrivez ces 5 questions dans un style plus conforme à The Mom Test
|
||||
3. Trouvez 3 utilisateurs potentiels, et posez au moins une fois « quand est la dernière fois que vous avez rencontré ce problème »
|
||||
4. Après l'entretien, organisez 4 types d'informations : comportements réels, alternatives, coûts engagés, difficultés récurrentes
|
||||
|
||||
## Lectures complémentaires
|
||||
|
||||
- [Site officiel de The Mom Test](https://momtestbook.com/)
|
||||
- [Rob Fitzpatrick : The Mom Test](https://www.robfitz.com/the-mom-test/)
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/building-prototype/images
|
||||
@@ -0,0 +1,607 @@
|
||||
---
|
||||
title: "Créer votre prototype : de l'analyse métier au prototype produit multi-pages"
|
||||
description: "Vivre le cycle complet de l'analyse métier à la réalisation d'un prototype produit multi-pages. Apprendre à poser des questions métier, décomposer les besoins, utiliser l'IDE AI pour générer des applications mono-page et multi-pages, et peaufiner et tester les prototypes."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Environ <strong>8 heures</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['fr-fr/stage-1/building-prototype'] ?? []
|
||||
</script>
|
||||
|
||||
# Niveau débutant 3 : Créer votre prototype
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Analyse métier', 'Conception de prototype', 'Programmation assistée par AI', 'Applications multi-pages']" coreOutput="1 prototype d'atelier de contenus e-commerce" expectedOutput="Prototype Web interactif">
|
||||
|
||||
Dans le chapitre précédent, nous avons appris à <strong>trouver de bonnes idées</strong> — partir des besoins utilisateurs pour trouver des directions pour lesquelles quelqu'un est prêt à payer. Mais trouver la direction n'est que la première étape, <strong>ce qui met vraiment à l'épreuve le chef de produit, c'est : comment transformer des besoins flous en un produit utilisable.</strong>
|
||||
|
||||
Ce chapitre va résoudre un <strong>problème réel</strong> : votre patron vous lance un « utilise l'IA pour améliorer l'efficacité de la publication de produits sur les plateformes e-commerce » — comment transformer ça en un <strong>prototype produit fonctionnel</strong> ?
|
||||
|
||||
Contrairement aux jeux Snake et calculatrices précédents, <strong>dans les vrais projets on ne peut pas inventer les fonctionnalités</strong> :
|
||||
|
||||
1. <strong>Identifier les points de douleur</strong> : discuter avec les opérationnels, extraire des <strong>vrais points de douleur</strong> du vague « améliorer l'efficacité »
|
||||
2. <strong>Prioriser</strong> : parmi tous les problèmes, résoudre d'abord <strong>le plus douloureux</strong>, sans vouloir tout faire d'un coup
|
||||
3. <strong>Valider rapidement</strong> : utiliser l'IDE AI pour d'abord faire un <strong>prototype mono-page</strong>, puis étendre en multi-pages une fois que ça fonctionne
|
||||
4. <strong>Produire quelque chose d'utilisable</strong> : livrer finalement un <strong>atelier de contenus e-commerce démontrable et utilisable</strong>
|
||||
|
||||
Nous apprendrons la transition de <strong>faire des jouets à faire des applications</strong>, et à <strong>empathiser et réfléchir aux vrais besoins des clients</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info ℹ️ Note
|
||||
Ce chapitre peut contenir des termes métier que vous ne connaissez pas — vous pouvez demander à l'IA de vous les expliquer.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Analyse des besoins', description: 'Du flou au concret' },
|
||||
{ title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
|
||||
{ title: 'Extension multi-pages', description: 'Structure d\'application complète' },
|
||||
{ title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Définir les besoins avant de coder
|
||||
|
||||
Dans les tutoriels précédents, nous avons utilisé l'IDE AI pour générer facilement des jeux Snake et autres petits jeux, mais ce ne sont que des projets ludiques qui ne peuvent pas être appliqués au travail et à la vie quotidienne ; si nous voulons que les capacités AI soient véritablement utiles à tous, nous devons faire du Vibe Coding en combinant des scénarios de vie et de travail.
|
||||
|
||||
Dans le chapitre précédent, nous avons appris à trouver des <strong>bonnes idées pour lesquelles quelqu'un est prêt à payer</strong>, mais trouver une direction n'est que le début. Quand on fait vraiment un produit, on découvre que : <strong>il y a un énorme fossé entre savoir « quoi faire » et savoir « comment le faire ».</strong>
|
||||
|
||||
Ce fossé, c'est la <strong>spécification des besoins</strong>.
|
||||
|
||||
Par exemple, dans un projet de classe ou personnel, on part souvent de la fonctionnalité exécutable la plus simple pour faire un produit ou une application :
|
||||
|
||||
- « Fais un tableau Kanban, liste les tâches. »
|
||||
- « Aide-moi à faire un outil de dessin. »
|
||||
- « Aide-moi à faire un logiciel pour collecter des questionnaires. »
|
||||
|
||||
Ce ne sont souvent qu'un outil, un module fonctionnel, et même pas un problème métier clair. Plus important encore, <strong>ces idées sont souvent « ce que tu trouves utile » et non « ce dont l'utilisateur a vraiment besoin ».</strong>
|
||||
|
||||
Dans les projets d'entreprise ou de startup, les chefs de produit et les ingénieurs partent souvent d'une proposition métier plus large. Par exemple, nous pouvons imaginer le scénario suivant :
|
||||
|
||||
<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
|
||||
<div style="font-weight: bold; color: #303133; margin-bottom: 10px;">🛍️ Scénario métier :</div>
|
||||
<div style="color: #606266; line-height: 1.6;">
|
||||
<p>Vous êtes chef de produit e-commerce dans une boutique. Le patron vous donne une proposition vague mais stressante :</p>
|
||||
<p style="font-style: italic; margin-top: 10px;">« Maintenant tout le monde utilise l'IA pour faire des images et des textes sur les réseaux sociaux, ça a l'air simple. Aide-moi à mettre ça en place pour qu'on soit plus efficace quand on met de nouveaux produits sur TikTok Shop. »</p>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
À ce moment-là, vous pourriez penser : « Patron, tu rêves encore ! » Pourtant, dans le monde réel, ce genre de décision vague en une phrase est très courant — même plus fréquent que le nombre de bubble tea que vous commandez en une semaine. Donc, pour devenir un bon professionnel (ou mieux, le CEO d'une nouvelle startup), nous devons apprendre à passer de la création d'outils personnels à la création de vrais prototypes produits.
|
||||
|
||||
Puisque nous avons appris l'IDE AI, en y réfléchissant bien, ce besoin est assez simple — il suffit de donner un prompt à l'IA et de laisser l'Agent s'occuper de tout, non ?
|
||||
|
||||
```
|
||||
Merci de te référer à mon besoin xxxx,
|
||||
aide-moi à concevoir un atelier de contenus e-commerce,
|
||||
incluant la génération et la gestion de descriptions produits, images, vidéos et autres contenus.
|
||||
```
|
||||
|
||||
Si vous transformez joyeusement ce besoin en prototype et l'envoyez au patron — félicitations, votre bonus de ce trimestre est annulé !
|
||||
|
||||
**Pourquoi ? C'est le point de douleur central que nous devons résoudre :**
|
||||
|
||||
Quand nous avons appris l'IDE AI, nous faisions des **projets ludiques personnels** comme Snake ou une calculatrice — fonctionnalités simples, on sait ce qu'on veut, et on fait pour soi. Mais **les vrais scénarios métier sont complètement différents** :
|
||||
|
||||
- **Vous n'êtes pas l'utilisateur** : le patron veut « améliorer l'efficacité », mais vous ne savez pas comment les opérationnels travaillent au quotidien ni où ils bloquent ;
|
||||
- **L'IA ne comprend pas le métier** : vous donnez un besoin vague à l'IA, elle ne peut que deviner à partir de connaissances générales, et le résultat peut ressembler à quelque chose mais être inutilisable en pratique ;
|
||||
- **Une bonne idée n'est pas un bon produit** : vous trouvez peut-être que « ajouter une fonctionnalité de génération AI » est cool, mais les utilisateurs pourraient ne pas en avoir besoin, ou l'utiliser pourrait être plus compliqué qu'avant.
|
||||
|
||||
**C'est pourquoi nous devons apprendre à « passer de l'idée à la compréhension utilisateur »**. Ce n'est que lorsque votre idée résout vraiment le problème des autres, en posant des questions et en comprenant le métier en profondeur, que vous pourrez créer quelque chose de véritablement précieux. (Une bonne idée peut même être plus importante que la bonne technique.)
|
||||
|
||||
### 1.1 De l'imaginaire au réel : apprendre à poser des questions métier
|
||||
|
||||
::: info 💡 D'abord, clarifions : qu'est-ce qu'un besoin ? Qu'est-ce que le métier ?
|
||||
|
||||
Un **besoin** (requirement), c'est ce que l'utilisateur veut vraiment, le problème qu'il rencontre, la chose qu'il veut résoudre. Par exemple, « le patron veut que je mette les produits en ligne plus vite » — c'est un besoin.
|
||||
|
||||
Le **métier** (business), c'est ce que l'utilisateur fait réellement chaque jour, sa façon de travailler. Par exemple, un opérationnel e-commerce fait chaque jour : mettre des produits en ligne, modifier les prix, créer des images, analyser les données... tout ça, c'est le métier.
|
||||
|
||||
**Pourquoi s'intéresser au métier ?**
|
||||
Parce que si vous ne comprenez pas le métier, l'outil que vous créerez risque d'être « beau mais inutilisé ». Ce n'est qu'en comprenant vraiment comment les utilisateurs travaillent au quotidien et où ils bloquent que vous pourrez créer quelque chose qui les aide vraiment.
|
||||
|
||||
:::
|
||||
|
||||
En partant de la perspective la plus simple, vous pouvez d'abord vous poser quelques questions :
|
||||
|
||||
- Quand le patron dit « **efficacité améliorée** », qu'est-ce que ça veut dire exactement ? Faire les choses **plus vite** ? **Dépenser moins** ? **Vendre plus** ?
|
||||
- Comment sont mis en ligne les produits actuellement ? **Où ça coince** ?
|
||||
- Combien de **nouveaux produits** faut-il traiter chaque jour ? Combien d'**images** et combien de **textes** par produit ?
|
||||
- Dans le travail actuel, **quelle est la tâche la plus pénible**, celle qu'on **aimerait le plus éviter** ?
|
||||
|
||||
Mais ce sont toutes des questions spéculatives. Nous devons poser directement des questions aux opérationnels TikTok Shop : « Quelles sont vos difficultés et vos points d'attention ? » pour obtenir des réponses plus précises par la communication :
|
||||
|
||||
::: info 📋 Résultats d'entretien métier réel
|
||||
|
||||
Nous avons demandé à des personnes faisant de l'e-commerce, voici leurs frustrations :
|
||||
|
||||
**1. Trop de choses à faire, trop dispersées**
|
||||
- Une personne gère plusieurs boutiques, chacune avec beaucoup de produits à traiter ;
|
||||
- Chaque jour c'est la course : **mise en ligne de nouveaux produits**, **modification de prix**, **création d'images**, **analyse des données**, une tâche pas finie qu'il faut déjà passer à la suivue.
|
||||
|
||||
**2. Le contenu n'est pas fait en une fois, c'est un processus itératif**
|
||||
- On commence avec les **images fournies par le fabricant**, les **anciens contenus** ou des **images de référence trouvées en ligne**, pour rapidement **mettre le produit en ligne** et tester ;
|
||||
- On dépense un peu en promotion pour **voir si ça vend** ;
|
||||
- Ce n'est que pour les **produits qui se vendent bien** qu'on prend le temps de faire de vraies images, descriptions détaillées et vidéos.
|
||||
|
||||
:::
|
||||
|
||||
Après avoir interrogé les opérationnels, nous sommes enthousiastes, car maintenant nous pouvons vraiment créer un prototype produit parfaitement adapté au métier ! — Encore raté. Si nous essayons de « satisfaire toutes les demandes d'un coup », le produit sera très volumineux et difficile à livrer dans le temps du cours. Il faut donc encore trier et converger pour identifier le vrai point de douleur central.
|
||||
|
||||
### 1.2 De la divergence à la convergence : verrouiller le point de douleur métier central et les fonctionnalités
|
||||
|
||||
::: info 💡 Pourquoi « converger » ? Qu'est-ce qu'un « point de douleur » ?
|
||||
|
||||
**Il y a beaucoup de problèmes, mais par lequel commencer ?**
|
||||
|
||||
L'utilisateur peut vous dire plein de problèmes : A est pénible, B est pénible, C est pénible... mais si vous essayez de tout résoudre en même temps, vous risquez de ne rien faire de bien. Donc il faut **converger** — c'est-à-dire, parmi tous les problèmes, choisir celui qui est **le plus douloureux, le plus urgent, le plus soluble** pour commencer.
|
||||
|
||||
**Qu'est-ce qu'un point de douleur ?**
|
||||
C'est le problème spécifique que l'utilisateur **trouve le plus pénible, qui lui prend le plus de temps, qu'il veut le plus résoudre**. Pas « je trouve ça utile », mais la chose dont l'utilisateur **se plaint tous les jours, qui est douloureuse à chaque fois**.
|
||||
|
||||
:::
|
||||
|
||||
À travers les entretiens ci-dessus, nous avons découvert que les opérationnels rencontrent de nombreux problèmes : rythme perturbé par les promotions, gestion de plusieurs boutiques, jonglage entre mise en ligne / modification de prix / création d'images / analyse de données...
|
||||
|
||||
Si nous essayons de « résoudre tous ces problèmes », nous finirons par créer un outil **vaste mais peu utilisable**.
|
||||
|
||||
Classons ces problèmes (l'IA peut vous aider), on trouve grosso modo trois catégories :
|
||||
|
||||
1. **Problème de rythme** : quand mettre en ligne, quand ajuster les prix ;
|
||||
2. **Problème d'efficacité** : comment gérer simultanément plusieurs boutiques et produits ;
|
||||
3. **Problème de contenu** : comment créer rapidement des images et textes de produits.
|
||||
|
||||
Pour notre cours, le plus adapté à résoudre en premier est la **catégorie 3 : le problème de contenu**. Mais « créer du contenu rapidement » reste un peu abstrait, demandons encore aux opérationnels où ils bloquent exactement :
|
||||
|
||||
::: info 📋 Les opérationnels disent : il y a deux endroits les plus douloureux pour le contenu
|
||||
|
||||
**Douleur 1 : la création en masse d'images et de textes est trop pénible**
|
||||
- Les contenus sont éparpillés : cloud, messages WeChat, back-office de la plateforme... **difficiles à retrouver** ;
|
||||
- Il faut mettre en ligne beaucoup de produits d'un coup, **pas le temps de faire chaque chose soigneusement**, on assemble à la va-vite ;
|
||||
- Les exigences ne sont pas élevées, **ça doit être présentable et publiable**, pas besoin d'être magnifique.
|
||||
|
||||
**Douleur 2 : les bonnes solutions ne peuvent pas être sauvegardées pour réutilisation**
|
||||
- Les bons titres et mises en page d'avant, **la prochaine fois on ne les retrouve plus** ;
|
||||
- Les solutions sont dispersées dans les historiques de chat, les anciens liens de produits ;
|
||||
- Quand on veut les utiliser, il faut **chercher pendant des heures, copier-coller et modifier pendant des heures** ;
|
||||
- Il manque un outil pour **sauvegarder, gérer et appliquer directement**.
|
||||
|
||||
:::
|
||||
|
||||
Sur la base de ces deux points de douleur, nous allons créer un petit outil simple : **aider les opérationnels à créer en masse des images et textes, et permettre de sauvegarder les bonnes solutions pour les réutiliser directement la prochaine fois**.
|
||||
|
||||
Il ne fait que deux choses (l'IA peut vous aider à affiner, n'oubliez pas de supprimer les fonctionnalités en fonction des retours métier) :
|
||||
|
||||
::: info Fonctionnalité 1 : Générer en masse des images et textes de produits e-commerce
|
||||
|
||||
**À quoi ça sert ?**
|
||||
Donner au système des informations produit, il génère automatiquement des images et textes utilisables pour la mise en ligne sur les plateformes e-commerce (comme TikTok, Taobao).
|
||||
|
||||
**Entrée**
|
||||
| Type | Contenu |
|
||||
|------|------|
|
||||
| Informations produit | Nom, catégorie, marque, matière, taille, couleur, etc. |
|
||||
| Images produit | Image sur fond blanc ou photo en situation simple |
|
||||
| Images de référence | Captures d'écran de produits qui se vendent bien ou liens de référence |
|
||||
| Mode d'importation | Import par lot via Excel, ou saisie directe sur la page |
|
||||
|
||||
**Sortie (contenus e-commerce générés)**
|
||||
- **Image principale** : image de présentation du produit avec points de vente en texte (la première image que l'utilisateur voit en scrollant)
|
||||
- **Titre du produit** : combinaison de mots-clés trouvables par recherche
|
||||
- **Texte de vente** : 1-2 phrases pour attirer les acheteurs
|
||||
- Tous des produits finis **prêts à publier après quelques ajustements**
|
||||
|
||||
**Résultat**
|
||||
- Avant : chaque produit nécessite de créer des images et textes à partir de zéro
|
||||
- Maintenant : on envoie un lot de produits au système, on obtient des brouillons qu'il suffit de sélectionner et peaufiner
|
||||
|
||||
:::
|
||||
|
||||
::: info Fonctionnalité 2 : Sauvegarder les bonnes solutions en tant que modèles
|
||||
|
||||
**Entrée**
|
||||
| Type | Contenu |
|
||||
|------|------|
|
||||
| Un ensemble complet | Image principale + titre + texte |
|
||||
|
||||
**Sortie**
|
||||
| Fonction | Description |
|
||||
|------|------|
|
||||
| Appliquer | Utiliser le modèle pour générer automatiquement les nouveaux produits |
|
||||
| Modifier | Modifier directement le titre et le texte |
|
||||
| Gérer | Nommer, étiqueter (ex : « modèle sac homme », « titre promo ») pour faciliter la recherche |
|
||||
|
||||
**Résultat**
|
||||
1. Importer un nouveau produit
|
||||
2. Choisir : laisser le système générer par défaut, ou **utiliser mon modèle sauvegardé**
|
||||
3. Le système applique automatiquement le style du modèle, et produit de nouvelles images et textes
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
**Récapitulons ce que nous venons de faire :**
|
||||
|
||||
1. **D'abord poser des questions** : au lieu de se lancer directement, on demande d'abord aux opérationnels « ce qui vous embête le plus » ;
|
||||
2. **Trouver les points de douleur** : on découvre que ce qu'ils trouvent le plus pénible, c'est « créer des images et textes est trop laborieux » et « les bonnes solutions ne peuvent pas être sauvegardées » ;
|
||||
3. **Converger le périmètre** : au lieu de faire une plateforme exhaustive, on se concentre sur « génération en masse d'images et textes + sauvegarde de modèles », ces deux fonctionnalités uniquement.
|
||||
|
||||
**Pourquoi est-ce important ?**
|
||||
|
||||
L'erreur de beaucoup de débutants en produit est : plus il y a de fonctionnalités, mieux c'est. Mais ce dont l'utilisateur a vraiment besoin, c'est qu'on **résolve le problème le plus douloureux**. Mieux vaut faire une ou deux fonctionnalités qui aident vraiment l'utilisateur, qu'un tas de fonctionnalités mal faites.
|
||||
|
||||
**Le cœur de la réflexion produit et métier :**
|
||||
- Ne pas imaginer « je pense que l'utilisateur a besoin de ceci »
|
||||
- Aller demander à l'utilisateur « que fais-tu chaque jour ? Où as-tu le plus mal ? »
|
||||
- Parmi tous les problèmes, **converger** vers le plus douloureux et le plus soluble
|
||||
- D'abord créer la version **minimum viable**, puis itérer progressivement
|
||||
|
||||
Voilà ce qu'il faut clarifier avant de coder. Le code n'est qu'un outil — **comprendre l'utilisateur et identifier le bon problème** est la première étape.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Analyse des besoins', description: 'Du flou au concret' },
|
||||
{ title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
|
||||
{ title: 'Extension multi-pages', description: 'Structure d\'application complète' },
|
||||
{ title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Produire un prototype en 10 minutes : faire atterrir la « fonctionnalité clé » avec l'IDE AI
|
||||
|
||||
::: info 💡 Conseil Plan de programmation
|
||||
Si vous trouvez que l'IDE actuel n'est pas assez intelligent, ou que vous épuisez rapidement vos crédits, vous pouvez acheter un **Plan de programmation**. Pour anticiper, consultez [cet article](../../stage-2/backend/modern-cli/) sur l'utilisation de Claude pour programmer.
|
||||
:::
|
||||
|
||||
Réfléchir est une bonne chose, mais il ne faut pas sur-réfléchir. Arrêtons de trop philosopher et essayons de créer un prototype en commençant par une seule page.
|
||||
|
||||
### 2.1 Première étape : dire à l'IA ce que vous voulez en langage courant
|
||||
|
||||
Au début, ne cherchez pas le prompt parfait. Partez de votre expression la plus naturelle. Comme si vous décriviez le besoin à un collègue, dites à l'IA en langage courant ce que vous voulez faire, puis laissez l'IA vous aider à optimiser en une expression plus professionnelle.
|
||||
|
||||
#### 2.1.1 Commencer par l'oral (recommandé pour les débutants)
|
||||
|
||||
Décrivez d'abord votre idée dans vos propres mots, même si c'est très brut :
|
||||
|
||||
```
|
||||
Je veux créer un outil pour aider les opérationnels e-commerce à générer automatiquement des images principales et des textes de produits.
|
||||
Les opérationnels doivent actuellement créer les images et textes un par un manuellement, c'est très pénible.
|
||||
Mon idée : ils uploadent les informations produit, le système génère un lot de brouillons,
|
||||
et les opérationnels sélectionnent ceux qui sont bons, les modifient légèrement et les utilisent.
|
||||
|
||||
Pour commencer, la version la plus simple : une seule page, à gauche on remplit les infos produit,
|
||||
à droite on affiche les résultats générés. On peut uploader des images, saisir du texte,
|
||||
et après génération on voit l'aperçu de l'image principale et le texte.
|
||||
```
|
||||
|
||||
Ensuite, envoyez ce texte à une IA (comme ChatGPT, Claude, etc.) pour qu'elle vous aide à l'enrichir. L'IA vous aidera généralement à combler des détails auxquels vous n'aviez pas pensé, et à structurer votre idée plus clairement, pour finalement générer un prompt adapté à l'IDE AI.
|
||||
|
||||
Vous pouvez dire à l'IA :
|
||||
```
|
||||
Aide-moi à enrichir l'idée ci-dessus, organise-la en un document de logique métier clair,
|
||||
puis génère un prompt adapté à un IDE AI (comme Cursor, Trae) pour générer le code d'un prototype mono-page.
|
||||
```
|
||||
|
||||
L'IA retournera un besoin structuré et le prompt correspondant. Vérifiez-le vous-même, supprimez les fonctionnalités inutiles, et une fois confirmé, utilisez-le pour générer le code.
|
||||
|
||||
L'avantage de cette approche : l'expression orale est l'idée la plus authentique, mais peut manquer des détails importants. Quand l'IA enrichit, elle peut poser des questions comme « voulez-vous supporter l'upload par lot ? » que vous n'aviez pas envisagées, vous aidant à valider davantage. Vous pouvez choisir de conserver ou supprimer les fonctionnalités non essentielles en fonction des retours, et déterminer le prompt initial pour l'IA après plusieurs révisions.
|
||||
|
||||
#### 2.1.2 Passer l'étape d'enrichissement : envoyer directement votre document métier à l'IA
|
||||
|
||||
Si vous avez déjà préparé un document de logique métier dans les chapitres précédents (par exemple, un cahier des charges en langage courant), vous pouvez directement utiliser le format suivant pour l'envoyer à l'IDE AI, en sautant l'étape d'enrichissement. Adapté quand le besoin est déjà clair et que vous voulez passer directement au code :
|
||||
|
||||
```
|
||||
Aide-moi à implémenter une application mono-page en te référant à la logique métier, pour valider la fonctionnalité clé.
|
||||
|
||||
La logique métier de référence est la suivante :
|
||||
1. Aider les opérationnels à générer en masse une première version de brouillons images/textes :
|
||||
- **Entrée (supporte l'upload direct et l'import par lot de contenus) :**
|
||||
- Informations de base produit : nom, catégorie, marque, matière, taille, couleur, public cible, etc. ;
|
||||
- Images produit : image fond blanc / photo situation simple ;
|
||||
- Chaque génération supporte l'upload supplémentaire de captures de produits best-sellers ou liens de référence, permettant d'avoir des références ;
|
||||
- Supporte l'import par lot via Excel, ou la saisie en ligne / upload sur la page.
|
||||
- Supporte la spécification sur la page pour sauvegarder ou non les contenus dans la bibliothèque, pour réutilisation
|
||||
- **Sortie (contenu directement publiable ou publiable après légères modifications) :**
|
||||
- Pour chaque produit, une image principale brouillon « présentable, contenant les points de vente de base » ;
|
||||
- Un titre « bien structuré, contenant les mots-clés clés » + 1-2 phrases de texte de vente.
|
||||
- **Changement d'usage attendu :**
|
||||
Passer de la création de zéro pour chaque lot de produits à l'envoi d'un lot au système, puis sélection et ajustement des brouillons générés.
|
||||
|
||||
Faire d'abord la première fonctionnalité, la deuxième (bibliothèque de modèles) sera ajoutée plus tard.
|
||||
```
|
||||
|
||||
#### 2.1.3 L'approche programmeur (avancé) : laisser l'IA écrire le « prompt de prompt »
|
||||
|
||||
Si vous voulez contrôler plus finement le processus de génération de code, vous pouvez d'abord demander à une IA (comme ChatGPT) de générer, à partir de votre besoin, un prompt spécialement conçu pour l'IDE AI :
|
||||
|
||||
```
|
||||
En te basant sur l'idée ci-dessous, aide-moi à écrire un prompt pour un Agent de codage,
|
||||
j'ai besoin de ce prompt pour générer du code.
|
||||
|
||||
[Colle ici ta description de logique métier]
|
||||
|
||||
Exigences :
|
||||
1. Le prompt doit contenir une description claire de la mise en page
|
||||
2. Préciser la structure de données et la logique d'interaction
|
||||
3. Spécifier la stack technique (ex : React + Tailwind)
|
||||
4. Lister les points fonctionnels clés à implémenter
|
||||
```
|
||||
|
||||
L'IA générera généralement un prompt structuré comme suit :
|
||||
|
||||
|
||||
Vous pouvez modifier légèrement ce prompt avant de l'envoyer à l'IDE AI pour générer le code.
|
||||
|
||||
### 2.2 Deuxième étape : laisser l'IDE AI générer directement le code
|
||||
|
||||
#### 2.2.1 Préparation : comprendre les opérations de base de l'IDE AI
|
||||
|
||||
Si vous n'êtes pas encore familier avec l'utilisation basique de l'IDE AI (comme Cursor, Trae, Windsurf, etc.), il est recommandé de consulter d'abord le [tutoriel de base sur l'IDE](/fr-fr/appendix/2-development-tools/ide-basics/) en annexe, pour apprendre comment :
|
||||
- Créer un nouveau projet
|
||||
- Dialoguer avec l'AI Agent
|
||||
- Comprendre le processus de génération de code de l'IA
|
||||
|
||||
#### 2.2.2 Commencer à générer le code
|
||||
|
||||
Vous avez maintenant obtenu le prompt initial. Prenons le premier style de prompt comme exemple, et laissons l'IA nous aider à générer le code. Créez d'abord une fenêtre et le dossier correspondant, et ouvrez le dossier (initialisez un nouveau projet à l'emplacement de votre choix) :
|
||||
|
||||
|
||||
|
||||
Dans la barre latérale, choisissez un modèle que vous aimez (recommandé : gemini, gpt, glm, kimi, minimax, etc.), et saisissez le prompt obtenu à la première étape :
|
||||
|
||||
|
||||
Après avoir cliqué sur Générer, nous verrons une séquence familière : l'IA va planifier la structure de répertoires du projet, les fichiers nécessaires, et donner le contenu initial de chaque fichier.
|
||||
|
||||
::: warning ⚠️ Attention particulière : l'IA peut s'arrêter et attendre votre confirmation
|
||||
Pendant la génération, l'AI Agent **s'arrête souvent pour attendre votre saisie ou confirmation**, par exemple :
|
||||
- Vous demander si vous voulez passer à l'étape suivante
|
||||
- Vous demander d'appuyer sur Entrée pour confirmer une action
|
||||
- Vous demander un choix sur un détail technique
|
||||
|
||||
**Si vous voyez que l'IA ne bouge plus, vérifiez d'abord l'interface de chat pour voir si elle attend votre réponse.** Beaucoup de débutants pensent que l'IA est en train de réfléchir, alors qu'elle s'est arrêtée pour les attendre. Répondez activement ou appuyez sur Entrée, et l'IA reprendra son travail.
|
||||
:::
|
||||
|
||||
N'oubliez pas non plus d'appuyer sur Entrée pour confirmer (sinon vous resterez bloqué en attente — certains IDE AI ne rencontrent pas ce problème) :
|
||||
|
||||
|
||||
Si vous rencontrez le scénario suivant, cela signifie qu'un service local a déjà été démarré. Vous devez cliquer pour passer, sinon vous resterez sur cet écran (si rien ne s'affiche après la génération du code, vous devrez dire activement « aide-moi à démarrer ce projet ») :
|
||||
|
||||
|
||||
::: info 💡 Explication du scénario
|
||||
**Explication du scénario** : vous avez créé un projet React + TypeScript avec `npm create vite@latest` (easy-vibe-web). Une fois la création terminée, l'ordinateur va automatiquement « lancer » la page web, pour que vous puissiez voir le résultat immédiatement.
|
||||
|
||||
**Service local** : on peut comprendre ça comme une fenêtre d'affichage web temporaire ouverte sur votre ordinateur, qui ne fonctionne que sur cette machine — les autres n'y ont pas accès.
|
||||
|
||||
**localhost (adresse locale)** : `localhost` signifie « cet ordinateur lui-même ». Quand le navigateur y accède, il accède en fait à la page web exécutée sur votre ordinateur.
|
||||
|
||||
**Port** : le port est un numéro utilisé pour distinguer les différents services web sur le même ordinateur. Ce projet utilise le port 5174.
|
||||
|
||||
**Lien d'accès `http://localhost:5174/`** : cette adresse signifie « accéder à la page web numéro 5174 sur cet ordinateur ». Ouvrez-la dans le navigateur pour voir le résultat.
|
||||
|
||||
**Explication de ce scénario** : le système voulait initialement utiliser le port 5173, mais celui-ci était déjà occupé, donc il a automatiquement basculé vers 5174 — c'est normal.
|
||||
|
||||
**Instructions** : ouvrez le navigateur, tapez `http://localhost:5174/` dans la barre d'adresse et appuyez sur Entrée pour voir la page du projet actuel.
|
||||
:::
|
||||
|
||||
Une fois toutes les confirmations terminées, attendez que l'agent s'exécute quelques instants, et vous obtiendrez le résultat suivant :
|
||||
|
||||
|
||||
On peut voir qu'il y a déjà une première version fonctionnelle, mais la page frontend est vraiment laide. À ce stade, vous pouvez essayer de dialoguer directement avec l'IA pour optimiser l'affichage de l'interface :
|
||||
|
||||
|
||||
Après optimisation, nous obtenons une interface plus esthétique :
|
||||
|
||||
|
||||
Vous pouvez modifier les fonctionnalités de la page selon vos besoins, joindre des captures d'écran et poser des questions librement, par exemple : « Je n'ai pas besoin de la fonctionnalité d'import par lot pour l'instant, aide-moi à la supprimer », « Il y a trop de champs à remplir à gauche, garde uniquement xxxxx ». Vous pouvez même vous référer à d'autres sites matures — par exemple, vous pouvez directement « vous inspirer » d'un produit de design de Google (vous pouvez coller une capture d'écran d'un site mature que vous aimez) :
|
||||
|
||||
|
||||
Et finalement obtenir :
|
||||
|
||||
|
||||
### 2.3 Que faire en cas d'erreur
|
||||
|
||||
En pratique, rencontrer des erreurs est inévitable — c'est normal et ne signifie pas que vous avez fait quelque chose de mal. Vous n'avez pas besoin de comprendre l'erreur ; il suffit de transmettre la « situation observée » en entier à l'IA.
|
||||
|
||||
Il n'y a que trois approches courantes :
|
||||
|
||||
- **Approche 1 : Erreur sur la page ou le terminal**
|
||||
Quand la page devient rouge, affiche un écran blanc, ou quand le terminal affiche un tas de texte rouge, faites une capture d'écran ou copiez l'intégralité du message d'erreur et envoyez-le à l'IA pour qu'elle vous aide à réparer.
|
||||
|
||||
- **Approche 2 : La fonctionnalité ne fonctionne pas mais pas d'erreur**
|
||||
Par exemple, un bouton ne réagit pas, les données ne s'affichent pas, les styles sont cassés — décrivez en langage courant « ce qui se passe + ce que vous vouliez », en ajoutant une capture d'écran si nécessaire.
|
||||
|
||||
- **Approche 3 : Vous n'êtes pas sûr s'il y a un problème**
|
||||
Vous pouvez demander directement à l'IA : « Aide-moi à vérifier si cette fonctionnalité a des problèmes évidents, est-ce qu'il faut ajuster quelque chose. »
|
||||
|
||||
#### 2.3.1 Questions fréquentes des débutants
|
||||
|
||||
- **Q : Je ne sais pas où trouver le message d'erreur ?**
|
||||
- R : En général, cherchez tout le « texte rouge ». Dans le terminal, la console ou sur la page, trouvez les indications rouges, sélectionnez tout et copiez pour l'IA.
|
||||
|
||||
- **Q : L'IA a corrigé mais l'erreur persiste ?**
|
||||
- R : C'est courant. Continuez à faire une capture d'écran ou copiez le dernier message d'erreur et envoyez-le, pour qu'elle corrige davantage sur la base de la modification précédente.
|
||||
|
||||
- **Q : Dois-je comprendre complètement la solution de réparation de l'IA ?**
|
||||
- R : Non, pas besoin de tout comprendre d'un coup. Vous pouvez vous concentrer sur un ou deux points à chaque fois. Avec le temps, vous comprendrez de plus en plus de code, comme en accumulant du vocabulaire anglais.
|
||||
|
||||
- **Q : J'ai corrigé plein de fois, le problème persiste ?**
|
||||
- R : Vous pouvez essayer :
|
||||
- Utiliser la fonction « retour en arrière » de l'IDE, trouver le bouton de retour dans la conversation de l'agent, revenir à une version fonctionnelle et recommencer ;
|
||||
- Changer de modèle ou ajuster le prompt, décrire le phénomène et le message d'erreur plus précisément ;
|
||||
- Regrouper « code actuel + log d'erreurs + comportement attendu » et tout envoyer d'un coup à l'IA, pour qu'elle restructure globalement la partie problématique.
|
||||
|
||||
## 3. Passer d'une application mono-page à une application multi-pages
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Analyse des besoins', description: 'Du flou au concret' },
|
||||
{ title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
|
||||
{ title: 'Extension multi-pages', description: 'Structure d\'application complète' },
|
||||
{ title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Une fois la logique de la fonctionnalité clé générée, nous pouvons générer le reste du contenu. Par exemple, à ce stade, si vous cliquez sur Paramètres ou certains boutons, ils ne fonctionnent pas du tout.
|
||||
|
||||
Vous pouvez demander à l'IA de vérifier selon les besoins du prompt métier, de générer les parties manquantes, ou de compléter directement les pages non implémentées. Vous pouvez aussi spécifier une page pour que l'IA la complète, jusqu'à ce que toutes les pages soient cliquables et que les fonctionnalités soient interactives :
|
||||
|
||||
|
||||
Après quelques instants, nous pouvons voir que le programme a complété plusieurs pages et fonctionnalités interactives sur la base de ce qui existait déjà :
|
||||
|
||||
|
||||
|
||||
|
||||
Il vous suffit alors de cliquer manuellement sur chaque fonctionnalité et bouton qui vous intéresse, pour vous assurer que les interactions sont normales. Si une fonctionnalité n'est pas interactive, vous pouvez en parler avec l'IA pour qu'elle vous aide à la corriger.
|
||||
|
||||
## 4. Rendre le prototype « convaincant »
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Analyse des besoins', description: 'Du flou au concret' },
|
||||
{ title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
|
||||
{ title: 'Extension multi-pages', description: 'Structure d\'application complète' },
|
||||
{ title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Une fois la structure multi-pages en place, la dernière étape consiste à faire passer le prototype de « ça fonctionne » à « c'est fluide à utiliser et ça a l'air pro ». Cela nécessite de tester manuellement tout le flux (parcours utilisateur), et de faire corriger par l'IA les parties qui ne fonctionnent pas, pour qu'à chaque rafraîchissement on puisse simuler un nouvel utilisateur parcourant tout le flux et obtenir le résultat attendu.
|
||||
|
||||
Revenons au besoin initial :
|
||||
|
||||
```
|
||||
1. Aider les opérationnels à générer en masse une première version de brouillons images/textes :
|
||||
- **Entrée (supporte l'upload direct et l'import par lot de contenus) :**
|
||||
- Informations de base produit : nom, catégorie, marque, matière, taille, couleur, public cible, etc. ;
|
||||
- Images produit : image fond blanc / photo situation simple ;
|
||||
- Chaque génération supporte l'upload supplémentaire de captures de produits best-sellers ou liens de référence ;
|
||||
- Supporte l'import par lot via Excel, ou la saisie en ligne / upload sur la page.
|
||||
- Supporte la spécification sur la page pour sauvegarder ou non les contenus dans la bibliothèque
|
||||
- **Sortie (contenu directement publiable ou après légères modifications) :**
|
||||
- Pour chaque produit, une image principale brouillon « présentable, contenant les points de vente de base » ;
|
||||
- Un titre « bien structuré, contenant les mots-clés clés » + 1-2 phrases de texte de vente.
|
||||
- **Changement d'usage attendu :**
|
||||
Passer de la création de zéro pour chaque lot de produits à l'envoi d'un lot au système, puis sélection et ajustement des brouillons générés.
|
||||
|
||||
2. Capitaliser les bonnes sorties en une bibliothèque de modèles réutilisables :
|
||||
- **Que peut-on sauvegarder ?**
|
||||
- Toute sortie que l'opérationnel juge « bonne » peut être sauvegardée en un clic :
|
||||
- Ça peut être la combinaison complète « image principale + titre + texte de vente » ;
|
||||
- Ou seulement une partie, comme une structure de titre ou un texte de vente spécifique.
|
||||
- **Que peut-on faire après sauvegarde ?**
|
||||
- **Réutiliser :**
|
||||
- Utiliser cette sauvegarde pour appliquer un lot de nouveaux paramètres produit, et régénérer des brouillons images/textes ;
|
||||
- Ou sur le même produit, générer plusieurs variantes basées sur ce modèle pour des tests A/B.
|
||||
- **Éditer :**
|
||||
- Modifier directement le titre / texte de vente ;
|
||||
- Si l'édition d'images est supportée, affiner le texte, les stickers, etc. sur l'image principale.
|
||||
- **Gérer :**
|
||||
- Nommer les sauvegardes, étiqueter (ex : « modèle image principale sac homme », « structure titre promo »), classer par boutique pour faciliter la recherche.
|
||||
- **Comment utiliser lors de la prochaine mise en ligne ?**
|
||||
- Après import de nouveaux produits, l'opérationnel peut choisir :
|
||||
- Utiliser la logique par défaut du système, ou
|
||||
- Spécifier « utiliser un de mes modèles sauvegardés pour générer » ;
|
||||
- Le système applique automatiquement la structure et le style du modèle aux nouvelles données produit, et génère de nouveaux brouillons image principale + titre + texte de vente.
|
||||
```
|
||||
|
||||
Si vous devez créer de nouvelles données à chaque test, cela prend beaucoup de temps. C'est là qu'on utilise généralement ce qu'on appelle des « données de test ». Vous pouvez communiquer avec l'IA de la façon suivante, pour qu'elle génère une entrée rapide de données de test sur l'interface, pour que nous puissions vérifier que toutes les fonctionnalités fonctionnent correctement :
|
||||
|
||||
```
|
||||
J'ai besoin de tester ce parcours utilisateur pour m'assurer qu'il fonctionne complètement.
|
||||
Merci de générer une entrée de données de test en te basant sur les besoins suivants,
|
||||
pour que je puisse cliquer et tester rapidement si le flux complet fonctionne normalement :
|
||||
1. Aider les opérationnels à générer en masse une première version de brouillons images/textes :
|
||||
- **Entrée (supporte l'upload direct et l'import par lot de contenus) :**
|
||||
- Informations de base produit : nom, catégorie, marque, matière, taille, couleur, public cible, etc. ;
|
||||
- Images produit : image fond blanc / photo situation simple ;
|
||||
- Chaque génération supporte l'upload supplémentaire de captures de produits best-sellers ou liens de référence ;
|
||||
- Supporte l'import par lot via Excel, ou la saisie en ligne / upload sur la page.
|
||||
- Supporte la spécification sur la page pour sauvegarder ou non les contenus dans la bibliothèque
|
||||
- **Sortie (contenu directement publiable ou après légères modifications) :**
|
||||
- Pour chaque produit, une image principale brouillon « présentable, contenant les points de vente de base » ;
|
||||
- Un titre « bien structuré, contenant les mots-clés clés » + 1-2 phrases de texte de vente.
|
||||
- **Changement d'usage attendu :**
|
||||
Passer de la création de zéro pour chaque lot de produits à l'envoi d'un lot au système, puis sélection et ajustement des brouillons générés.
|
||||
```
|
||||
|
||||
On obtient facilement le résultat (si vous trouvez qu'une donnée c'est trop peu, vous pouvez demander à l'IA de générer plusieurs cas de test) :
|
||||
|
||||
|
||||
Résultat après clic :
|
||||
|
||||
|
||||
À ce stade, nous obtenons directement le résultat, sans qu'il y ait un « processus de génération simulé ». Si nous voulons simuler un vrai processus de génération, nous pouvons directement parler à l'IA : « Merci de simuler un vrai processus de génération, il faut attendre un moment après le clic avant de me donner le résultat. »
|
||||
|
||||
|
||||
Une fois la fonctionnalité de génération validée, nous devons aussi nous assurer que la fonctionnalité de bibliothèque de modèles fonctionne correctement. Sur la carte de génération de la page, nous pouvons voir que la fonctionnalité de favoris de la bibliothèque de modèles n'est pas implémentée. Il faut alors approfondir la conversation avec l'IA : « Merci de t'assurer que le besoin [collez ici le contenu du point 2 ci-dessus] fonctionne correctement, on peut cliquer sur un résultat pour sauvegarder le modèle correspondant, et en l'ouvrant on peut voir les paramètres de génération »
|
||||
|
||||
La génération n'est souvent pas immédiate, il faut régulièrement corriger avec des captures d'écran :
|
||||
|
||||
|
||||
Et finalement obtenir le résultat attendu :
|
||||
|
||||
|
||||
En plus du test manuel du parcours des besoins, vous pouvez aussi demander à l'IA de faire directement une vérification des besoins, par exemple :
|
||||
|
||||
- « Merci de vérifier par rapport à mon besoin initial si l'application actuelle couvre toutes les fonctionnalités clés. »
|
||||
- « Aide-moi à lister un checklist des fonctionnalités, en indiquant lesquelles sont terminées, lesquelles ne sont pas encore implémentées ou ont une expérience insuffisante. »
|
||||
|
||||
L'IA générera généralement un checklist, à partir duquel vous pouvez décider s'il faut continuer à améliorer. Après des modifications itératives, vous obtiendrez un prototype assez abouti.
|
||||
|
||||
## 5. 📚 Exercice : reproduisez votre propre atelier de contenus TikTok e-commerce
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 Défi : reproduire l'atelier de contenus e-commerce</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
En vous référant aux prompts et au contenu de ce cours, réalisez un cycle complet :
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Pratique du cycle complet</strong>
|
||||
<ul>
|
||||
<li>Génération de prompt de synthèse métier → génération de prototype mono-page → génération de prototype multi-pages</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Partage des résultats</strong>
|
||||
<ul>
|
||||
<li>Faites une capture d'écran de votre programme et partagez-la avec tout le monde</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Question de réflexion</strong>
|
||||
<ul>
|
||||
<li>Réservez de l'espace pour la prochaine section « Intégration des capacités LLM et de génération d'images à partir de texte », et anticipez : comment votre atelier pourrait-il intégrer des capacités comme « IA écrit le texte / génère les images / génère le script » ?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Prochaine étape
|
||||
|
||||
Dans la section suivante, nous construirons sur cet atelier de production de contenus en y intégrant des capacités AI spécifiques (texte vers texte, image vers texte, texte vers image), par exemple :
|
||||
|
||||
- Générer automatiquement des brouillons de textes et plusieurs propositions de titres pour une tâche de contenu
|
||||
- Générer automatiquement des brouillons d'images à partir de la description de la tâche (texte vers image)
|
||||
- Classer et résumer automatiquement les tâches de contenu passées, pour vous aider à planifier les sujets de la prochaine promotion
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Continuer à apprendre"
|
||||
description="Il est recommandé de continuer dans l'ordre : intégrer les capacités AI → cycle complet du projet → ingénierie du design."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'Projet complet - De la démo au prototype de niveau produit'
|
||||
description: 'Dépassez le stade de la démo, apprenez à compléter les parcours produit, à construire des données simulées réalistes, à itérer rapidement grâce au feedback, et finalisez un prototype AI complet, présentable et interactif.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Environ <strong>3 jours</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['fr-fr/stage-1/complete-project-practice'] ?? []
|
||||
</script>
|
||||
|
||||
# Débutant 5 : Projet complet en conditions réelles
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Esprit produit', 'Données simulées', 'Interactions complètes', 'LocalStorage']" coreOutput="1 prototype de produit AI fonctionnel" expectedOutput="Application Web avec des parcours complets et des données réalistes">
|
||||
|
||||
Au chapitre précédent, vous avez intégré les capacités AI et la démo fonctionne, mais vous êtes encore <strong>très loin</strong> d'un vrai « produit » : au premier rafraîchissement, <strong>les données disparaissent</strong>, en cas d'erreur c'est <strong>un écran blanc</strong>, la liste ne contient que des « données de test 1, données de test 2 », et si l'utilisateur se trompe, <strong>impossible d'annuler</strong>...
|
||||
|
||||
Ce chapitre va <strong>combler toutes ces lacunes</strong> : nous allons <strong>compléter les parcours produit</strong>, utiliser l'AI pour générer des <strong>données métier réalistes</strong> à la place des fausses données, ajouter la <strong>gestion des erreurs et le feedback utilisateur</strong>, et enfin produire un <strong>prototype complet que vous pourrez fièrement montrer</strong>.
|
||||
|
||||
C'est le <strong>dernier chapitre</strong> de la phase débutant. Une fois cette étape franchie, vous serez passé de « incapable de programmer » à « <strong>capable de créer seul un prototype de produit AI</strong> ».
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
|
||||
{ title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
|
||||
{ title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
|
||||
{ title: 'Projet final', description: 'Votre projet de fin d\'études' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Refuser le « Happy Path » : compléter les parcours critiques
|
||||
|
||||
Beaucoup de débutants, en réalisant un prototype, se contentent du « Happy Path » (le chemin idéal) : l'utilisateur clique -> l'API répond avec succès -> le résultat s'affiche.
|
||||
Mais dans le monde réel, les choses se passent rarement aussi bien. Pour que votre prototype ressemble à un vrai produit, vous devez prendre en compte ces étapes « invisibles ».
|
||||
|
||||
### 1.1 Ajouter de l'attente et du feedback
|
||||
|
||||
Lorsque l'utilisateur clique sur « Générer le texte », l'AI met souvent plusieurs secondes à répondre. Si l'interface ne réagit pas, l'utilisateur pensera que le programme est planté.
|
||||
**Demandez à votre AI IDE d'ajouter un état de chargement (Loading) :**
|
||||
|
||||
> Exemple de prompt :
|
||||
> « Lorsque je clique sur le bouton de génération, transforme le bouton en "Génération en cours..." et rends-le non cliquable, tout en affichant une animation de chargement dans la zone de droite. Ce n'est qu'au retour de l'API que tout redevient normal. »
|
||||
|
||||
### 1.2 Gérer les échecs et les exceptions
|
||||
|
||||
La clé API peut expirer, le réseau peut tomber en panne.
|
||||
**Demandez à votre AI IDE de gérer les erreurs :**
|
||||
|
||||
> Exemple de prompt :
|
||||
> « Si la requête API échoue, ne te contente pas d'afficher une erreur dans la console. Fais apparaître une notification rouge (Toast) en haut de la page indiquant "Échec de la génération, veuillez réessayer plus tard", et permets à l'utilisateur de cliquer à nouveau sur le bouton. »
|
||||
|
||||
### 1.3 Persistance de l'historique de conversation
|
||||
|
||||
Au cours de l'interaction avec l'AI, nous devons sauvegarder le contenu des conversations pour que l'utilisateur puisse revoir l'historique et poursuivre ses échanges précédents. À ce stade, nous n'introduisons pas encore de base de données ; vous pouvez choisir l'une des solutions légères suivantes :
|
||||
|
||||
**Choix de la solution de stockage :**
|
||||
|
||||
| Solution | Cas d'usage | Caractéristiques |
|
||||
| ---------------- | -------------------------------- | ------------------------------------ |
|
||||
| **LocalStorage** | Projet purement frontend, données utilisateur sauvegardées dans le navigateur | Simple à implémenter, persiste au rafraîchissement, pas de synchronisation entre appareils |
|
||||
| **Fichier JSON** | Prototype local, données stockées sous forme de fichier | Structure claire, facile à déboguer, modifiable manuellement |
|
||||
| **Fichier TXT** | Solution minimale, enregistrement rapide de texte | Format libre, bonne compatibilité |
|
||||
|
||||
**Exemple de contenu de conversation :**
|
||||
L'historique sauvegardé contient généralement les éléments suivants :
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"role": "user",
|
||||
"content": "Aide-moi à générer un texte promotionnel TikTok pour des écouteurs Bluetooth",
|
||||
"timestamp": "2026-01-20 10:30:00"
|
||||
},
|
||||
{
|
||||
"role": "assistant",
|
||||
"content": "【Texte promotionnel écouteurs Bluetooth】\n\n🎧 Dites adieu à la latence, une expérience d'écoute immersive\n\nLes amis ! Ces écouteurs Bluetooth sont vraiment incroyables 👇\n\n✅ 40 dB de réduction de bruit active, plongez instantanément dans la musique\n✅ 30 heures d'autonomie, une semaine de trajets sans recharge\n✅ Appels clairs comme en face-à-face, même dans le métro\n✅ Design demi-intra, confortable même après des heures d'utilisation\n\n💰 Offre à durée limitée, cliquez sur le lien ci-dessous pour commander !",
|
||||
"timestamp": "2026-01-20 10:30:05"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**Prompt pour l'implémentation :**
|
||||
|
||||
> « Aide-moi à implémenter la fonctionnalité de sauvegarde de l'historique de conversation. Supporte la sauvegarde des enregistrements de conversation entre l'utilisateur et l'AI sous forme de fichier JSON (ou utilise LocalStorage). Au chargement de la page, charge automatiquement l'historique précédent. Permet de consulter et de supprimer des conversations individuelles. »
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
|
||||
{ title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
|
||||
{ title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
|
||||
{ title: 'Projet final', description: 'Votre projet de fin d\'études' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Insuffler l'âme : simuler des données réalistes (Mock Data)
|
||||
|
||||
Une page vide ne convaincra personne. Imaginez que vous présentiez un « espace de travail e-commerce » et que l'historique soit totalement vide, ou ne contienne qu'une seule ligne « test / test / test ».
|
||||
Pour obtenir le meilleur effet de démonstration, nous devons « forger » des données réalistes afin que votre prototype ressemble à un vrai produit en exploitation depuis six mois.
|
||||
|
||||
### 2.1 Laissez l'AI concevoir la structure de données
|
||||
|
||||
Nous n'avons pas besoin de réfléchir nous-mêmes au nom de chaque champ (par exemple, faut-il utiliser `name` ou `title` ?). Cette tâche peut être entièrement déléguée à l'AI.
|
||||
|
||||
Il suffit de décrire votre **scénario métier** à l'AI :
|
||||
|
||||
> **Exemple de prompt :**
|
||||
> « Je suis en train de réaliser le prototype d'un **espace de travail e-commerce TikTok**.
|
||||
> Aide-moi à concevoir une structure de données JSON pour décrire une "tâche produit".
|
||||
> Cette tâche doit contenir : les informations de base du produit (nom, catégorie), les ressources fournies en entrée (liens d'images), et les résultats générés par l'AI (titre, texte, image d'affiche).
|
||||
> Donne-moi directement un exemple JSON. »
|
||||
|
||||
L'AI concevra automatiquement des champs comme `productName`, `generatedContent` en fonction de votre description.
|
||||
|
||||
### 2.2 Laissez l'AI produire en masse des données « réalistes »
|
||||
|
||||
Une fois la structure de données établie, l'étape suivante consiste à demander à l'AI de « remplir les cases » et de générer un jeu de données d'apparence réaliste.
|
||||
|
||||
**Astuces pour les prompts :**
|
||||
Vous ne pouvez pas simplement dire à l'AI « génère des données ». Vous devez lui donner des instructions comme si vous assigniez une tâche à un stagiaire : précisez le **contexte métier** et les **exigences de contenu** :
|
||||
|
||||
- **Contexte métier** : dites à l'AI que nous faisons du « e-commerce TikTok », donc les titres de produits doivent être accrocheurs (par exemple « L'astuce infaillible pour paraître plus mince », « Indispensable pour les étudiants »), et les textes doivent être conversationnels.
|
||||
- **Exigences pour les images** : pour que le prototype soit attrayant, les images ne doivent pas être des espaces réservés en noir et blanc ; il est préférable d'utiliser des images aléatoires en couleur (paysages ou objets réels).
|
||||
|
||||
> **Exemple de prompt :**
|
||||
> « En te basant sur la structure conçue précédemment, génère 10 entrées de données simulées réalistes.
|
||||
> (Remarque : le format n'a pas besoin d'être JSON. Si tu écris du frontend, tu peux générer directement un tableau JavaScript ; si tu utilises Python, tu peux générer une List.)
|
||||
>
|
||||
> **Exigences du scénario métier :**
|
||||
>
|
||||
> 1. Suppose qu'il s'agit d'un grand magasin généraliste, avec des produits couvrant les catégories "Mode féminine", "Électronique" et "Beauté".
|
||||
> 2. **Les titres et textes générés doivent être très "style TikTok"** : par exemple, les titres doivent contenir des Emoji (🔥, ✨), les textes doivent utiliser un ton comme "C'est trop bien !", "Testé et approuvé".
|
||||
> 3. **Champ image** : utilise systématiquement le format `https://picsum.photos/seed/{random_id}/300/400` pour garantir que chaque image est différente. »
|
||||
|
||||
**Exemple de Mock Data généré :**
|
||||
|
||||
```javascript
|
||||
export const mockProductTasks = [
|
||||
{
|
||||
id: 'task_001',
|
||||
name: 'Robe d\'été vintage à imprimé fleuri style français',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Mode féminine',
|
||||
features: ['Taille marquée', 'Amincissant', 'Élégant'],
|
||||
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: '✨ Magnifique sur tout le monde ! Cette robe à imprimé fleuri style français est vraiment incroyable 🔥',
|
||||
generatedCopy:
|
||||
'Les filles ! Cette robe affine vraiment la silhouette ! La taille marquée est parfaite, on a immédiatement une silhouette élégante. Le tissu est très respirant, pas du tout étouffant en été. Idéale pour un rendez-vous ou une sortie ! 👗',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-20T10:00:00Z'
|
||||
},
|
||||
{
|
||||
id: 'task_002',
|
||||
name: 'Écouteurs Bluetooth Pro à réduction de bruit ultra-puissante',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Électronique',
|
||||
features: ['Réduction de bruit', 'Autonomie prolongée', 'Faible latence'],
|
||||
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: '🎧 Enfin trouvés ! Ces écouteurs ont une réduction de bruit incroyable ! 🔇',
|
||||
generatedCopy:
|
||||
'Dès qu\'on les met, le monde devient silencieux. La qualité sonore est exceptionnelle, écouter de la musique c\'est comme être en concert. L\'autonomie est aussi très bonne, une seule charge pour une semaine entière ! Indispensable pour les étudiants !',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-21T14:30:00Z'
|
||||
}
|
||||
// ... plus de données
|
||||
]
|
||||
```
|
||||
|
||||
### 2.3 (Avancé) Implémenter de « fausses opérations CRUD » avec LocalStorage
|
||||
|
||||
Si vous souhaitez que les « données simulées » générées précédemment soient non seulement consultables, mais aussi supprimables et modifiables, et que les nouvelles tâches persistent après un rafraîchissement de la page, vous pouvez combiner cela avec `LocalStorage`.
|
||||
|
||||
> **Exemple de prompt :**
|
||||
> « Aide-moi à implémenter une fonctionnalité de stockage de données.
|
||||
>
|
||||
> 1. Lis d'abord les données depuis `localStorage`.
|
||||
> 2. Si `localStorage` est vide, initialise avec les données Mock générées précédemment et stocke-les dans `localStorage`.
|
||||
> 3. Écris également les fonctions `addProductTask` et `deleteProductTask`, en mettant à jour `localStorage` à chaque opération. »
|
||||
|
||||
Avec cette étape, votre prototype acquiert une « mémoire » et l'expérience utilisateur est presque identique à celle d'un vrai produit.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
|
||||
{ title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
|
||||
{ title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
|
||||
{ title: 'Projet final', description: 'Votre projet de fin d\'études' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Collecter les retours et itérer rapidement
|
||||
|
||||
On ne peut pas créer un bon produit en travaillant isolément. Maintenant que votre prototype dispose de « fonctionnalités clés » + « parcours complets » + « données de démonstration », il est temps de le montrer à d'autres personnes.
|
||||
|
||||
### 3.1 Qui tester ? Comment tester ?
|
||||
|
||||
- **Amis / collègues** : pas besoin qu'ils comprennent la technique, il suffit de leur demander d'essayer.
|
||||
- **Observer plutôt que guider** : ne dites pas « clique ici », mais observez où ils cliquent naturellement. S'ils ne trouvent pas un bouton, c'est que le design pose problème.
|
||||
- **Méthode « Wizard of Oz »** : si votre AI n'est pas encore connectée, vous pouvez modifier manuellement les données en arrière-plan (ou dans la base de données) pour simuler le retour de l'AI, afin de valider d'abord si l'utilisateur a réellement besoin de cette fonctionnalité.
|
||||
|
||||
### 3.2 Face aux bugs et aux critiques
|
||||
|
||||
- **Mise en page cassée** : sur certaines tailles d'écran, l'affichage peut être dégradé.
|
||||
- **Action** : faites une capture d'écran et envoyez-la à l'AI IDE -> « La mise en page est cassée à cette largeur d'écran, aide-moi à corriger. »
|
||||
- **Interactions maladroites** : « ce processus est trop compliqué ».
|
||||
- **Action** : transmettez la suggestion à l'AI IDE -> « L'utilisateur trouve le processus upload puis génération trop lent, peut-on passer à une génération en un clic ? »
|
||||
- **Nouvelles demandes** : « si seulement il y avait cette fonctionnalité ».
|
||||
- **Action** : évaluez si c'est essentiel ; si oui, demandez à l'AI d'implémenter rapidement une version simplifiée.
|
||||
|
||||
**Rappelez-vous : à ce stade, l'AI est votre meilleur assistant pour les modifications. Vous êtes uniquement responsable d'identifier les problèmes ; confiez la modification du code à l'AI.**
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
|
||||
{ title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
|
||||
{ title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
|
||||
{ title: 'Projet final', description: 'Votre projet de fin d\'études' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 4. 🎓 Projet final : réalisez votre « projet de fin d'études »
|
||||
|
||||
Félicitations ! Vous avez parcouru tout le processus, du « besoin » au « prototype » puis à l'« intégration AI ». Il est maintenant temps de présenter votre résultat final.
|
||||
|
||||
**Ce projet final n'est plus limité à l'« espace de travail e-commerce ». Vous devez combiner vos propres centres d'intérêt ou votre expérience professionnelle pour créer un prototype de produit AI unique.**
|
||||
|
||||
### Choix du sujet et exigences
|
||||
|
||||
Vous devez choisir le scénario le plus pertinent parmi les **[Références de scénarios multi-sectoriels](../appendix-industry-scenarios/index.md)**, ou imaginer un scénario entièrement nouveau à partir de vos propres idées.
|
||||
|
||||
**Le projet doit utiliser de manière intégrée tout ce que vous avez appris dans les chapitres précédents :**
|
||||
|
||||
1. **Construction du prototype** : utilisez des technologies frontend pour créer une interface esthétique et facile à utiliser.
|
||||
2. **Maîtrise des besoins** : ne visez pas l'exhaustivité, mais assurez-vous que les fonctionnalités centrales forment une boucle logique complète.
|
||||
3. **Intégration API** : connectez un véritable modèle AI (LLM/VLM, etc.) pour donner à l'application une véritable intelligence.
|
||||
4. **Une application fonctionnelle** : pas seulement une page statique, mais une application dynamique avec un flux de données et des interactions avec feedback.
|
||||
|
||||
### Livrables du projet
|
||||
|
||||
Vous devez finalement soumettre les deux éléments suivants :
|
||||
|
||||
1. **Un prototype d'application complet** : déployé en ligne ou exécutable localement, avec un parcours d'utilisation complet.
|
||||
2. **Une vidéo de démonstration de 30 secondes** : enregistrez une vidéo présentant brièvement le scénario de votre application et démontrant le fonctionnement réel des fonctionnalités clés.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 Liste de vérification finale</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
C'est la dernière épreuve du Stage 1. Vérifiez votre travail selon la liste suivante :
|
||||
</p>
|
||||
|
||||
<div style="font-weight: bold; margin-bottom: 10px;">Auto-vérification des fonctionnalités clés</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Scénario clair</strong> : un secteur ou scénario d'application spécifique a été choisi</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Boucle logique</strong> : le flux principal fonctionne, pas seulement le Happy Path</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Piloté par l'AI</strong> : l'API du grand modèle est réellement appelée, pas de réponses prédéfinies</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Expérience complète</strong> : inclut le Loading, la gestion des erreurs et les données simulées</label></li>
|
||||
</ul>
|
||||
|
||||
<div style="font-weight: bold; margin: 20px 0 10px;">Préparation des livrables</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Prototype d'application</strong> : le code est terminé et exécutable</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Vidéo de démonstration</strong> : environ 30 secondes, montrant clairement les points forts</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Prochaine étape
|
||||
|
||||
Une fois le projet final terminé, vous êtes désormais capable de « développer seul un prototype d'application AI ».
|
||||
Dans le Stage 2 qui suit, nous approfondirons le développement full-stack plus complexe et apprendrons comment transformer ce prototype en une véritable application commerciale, déployable en ligne, avec une base de données et un système utilisateur.
|
||||
|
||||
Rendez-vous à la prochaine étape !
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Continuer à progresser"
|
||||
description="Félicitations pour avoir terminé le Stage 1, ces chapitres peuvent vous aider à passer au développement professionnel."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/finding-great-idea/images
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/integrating-ai-capabilities/images
|
||||
@@ -0,0 +1,808 @@
|
||||
---
|
||||
title: 'Ajouter des capacités IA à votre prototype - Intégrer les API de texte et d''image'
|
||||
description: 'Intégrez de véritables capacités IA dans un prototype Web existant : comprenez les concepts clés des API, apprenez à trouver votre API Key et les exemples officiels ; pratiquez l''intégration du modèle de texte DeepSeek et de plusieurs services de génération d''images (SiliconFlow Qwen-Image, Recraft, Seedream), et maîtrisez les méthodes courantes de sélection de modèles.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'environ <strong>1 jour</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['fr-fr/stage-1/integrating-ai-capabilities'] ?? []
|
||||
</script>
|
||||
|
||||
# Module 4 : Injecter des capacités IA dans votre prototype
|
||||
|
||||
## Introduction au chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['API', 'Modèle de texte', 'Texte vers image', 'Intégration de prototype']" coreOutput="Prototype connecté à 1 modèle de texte + 1 modèle d'image (optionnel)" expectedOutput="Prototype IA capable d'appeler de vraies API">
|
||||
|
||||
Dans les chapitres précédents, nous avons terminé le processus complet, de <strong>trouver une bonne idée</strong> à <strong>créer un prototype de produit</strong>. Mais le prototype actuel n'est qu'une « coquille » -- cliquer sur un bouton ne génère pas vraiment de contenu, et les données de la page sont figées.
|
||||
|
||||
Vous rappelez-vous ce que nous avons souligné dans le premier chapitre ? <strong>Nous voulons créer « un produit que les gens paient », pas « un prototype qui a l'air correct ».</strong> La véritable valeur vient de la capacité du produit à <strong>résoudre de vrais problèmes</strong>, et pour cela, le prototype doit <strong>réellement fonctionner</strong>.
|
||||
|
||||
Ce chapitre va <strong>« donner vie » au prototype</strong> : nous allons intégrer de <strong>véritables capacités IA</strong>, de l'obtention d'une API Key à la lecture de la documentation officielle, en passant par la demande à l'AI IDE d'intégrer les API dans votre code. Vous prendrez le <strong>modèle de texte DeepSeek</strong> comme exemple pour apprendre à faire en sorte que votre application <strong>appelle réellement un grand modèle pour générer du contenu</strong> ; si vous êtes intéressé, vous pouvez aussi <strong>intégrer la génération d'images en option</strong>.
|
||||
|
||||
À la fin de ce chapitre, votre prototype ne sera <strong>plus une démonstration statique</strong>, mais <strong>une application capable d'appeler de vraies capacités IA et de résoudre de vrais problèmes</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Bases de l\'API', description: 'Comprendre les concepts clés et les règles de sécurité' },
|
||||
{ title: 'Intégration texte', description: 'Pratique de génération de texte avec DeepSeek' },
|
||||
{ title: 'Intégration image', description: 'Compréhension et génération d\'images VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 1. Concepts de base des API
|
||||
|
||||
Comme mentionné précédemment, notre objectif est « d'intégrer les capacités IA », pour que le prototype ne soit plus une démonstration statique, mais un outil capable d'appeler de vrais services IA. Pour réaliser cela, la clé est de comprendre et d'utiliser les API (Application Programming Interface).
|
||||
|
||||
L'API est un concept d'abstraction important en informatique, que l'on peut comprendre simplement comme : **vous envoyez une « question » dans le format requis, et l'autre partie vous renvoie un « résultat » dans le même format**.
|
||||
|
||||
- **Ce que vous envoyez** : généralement inclut la « clé (API Key) » et « ce que vous voulez générer »
|
||||
- **Ce que vous recevez en retour** : en cas de succès, le résultat ; en cas d'échec, la raison (par exemple « clé incorrecte », « solde insuffisant », « paramètre erroné »)
|
||||
|
||||
Concrètement, vous devez maîtriser les éléments clés suivants :
|
||||
|
||||
1. **API Key** : votre « passe », aussi votre « clé de portefeuille ». Si quelqu'un d'autre l'obtient, il peut utiliser l'API en votre nom et engendrer des frais.
|
||||
2. **Endpoint (chemin de l'interface)** : le chemin spécifique de la requête API, indiquant au serveur quelle fonctionnalité vous souhaitez accéder. L'adresse complète se compose généralement du « URL de base + chemin de l'endpoint ». Par exemple :
|
||||
- Génération de texte : URL de base (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = URL complète `https://api.service.com/v1/chat/completions`
|
||||
- Génération d'images : URL de base (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = URL complète `https://api.service.com/v1/images/generations`
|
||||
3. **Appel/Requête** : le processus d'envoi d'une tâche au service IA et d'obtention du résultat
|
||||
4. **Contenu de la requête** : ce que vous envoyez à l'IA, comme le sujet de l'article que vous voulez générer ou la description de l'image
|
||||
5. **Réponse** : ce que l'IA vous renvoie après traitement, comme l'article généré ou l'image
|
||||
6. **Gestion des erreurs** : savoir comment diagnostiquer et résoudre les problèmes (API Key incorrecte, requêtes trop fréquentes, etc.)
|
||||
|
||||
::: info ℹ️ Qu'est-ce qu'une API
|
||||
Pour une explication plus approfondie des API, consultez l'annexe : [Introduction aux API](/fr-fr/appendix/4-server-and-backend/api-intro).
|
||||
|
||||
::: warning 🔐 **Consignes de sécurité des API**
|
||||
L'API Key est votre « passe » pour accéder aux services IA. C'est une chaîne de caractères de type mot de passe, utilisée pour l'authentification et la facturation.
|
||||
|
||||
Puisque l'API Key est directement liée à votre compte et à vos frais, veillez à :
|
||||
|
||||
- Ne <strong>jamais la partager</strong> dans des chats, des captures d'écran publiées en ligne ou des forums publics
|
||||
- <strong>Ne pas la coder en dur</strong> dans le code et la committer dans un dépôt Git (surtout un dépôt public)
|
||||
- Si vous soupçonnez que la Key a été compromise, <strong>changez-la immédiatement</strong>
|
||||
|
||||
Dans ce qui suit, nous <strong>allons directement coller l'API KEY dans l'AI IDE pour les opérations</strong>. <strong>Ne faites pas ça dans un vrai projet !!</strong> Comme nous sommes en phase d'apprentissage, c'est acceptable. (Quand vous serez plus expérimenté, vous pourrez demander à l'IA de générer un fichier de configuration dans lequel vous placerez simplement l'API KEY)
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Bases de l\'API', description: 'Comprendre les concepts clés et les règles de sécurité' },
|
||||
{ title: 'Intégration texte', description: 'Pratique de génération de texte avec DeepSeek' },
|
||||
{ title: 'Intégration image', description: 'Compréhension et génération d\'images VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 2. Intégrer l'API de génération de texte : DeepSeek
|
||||
|
||||
Bien que les API impliquent des concepts techniques, la phase de développement de prototype peut être très simple et efficace. L'idée centrale est :
|
||||
|
||||
> **Trouver l'exemple officiel, obtenir l'API Key, demander à l'AI IDE de l'intégrer à votre bouton.**
|
||||
|
||||
Une fois ces concepts maîtrisés, vous découvrirez que le processus est le même pour l'intégration de modèles de texte ou d'images : quand l'utilisateur clique sur un bouton, le frontend organise l'entrée et envoie la requête ; quand l'interface renvoie le résultat, il l'affiche sur la page. Voyons cela en pratique.
|
||||
|
||||
Dans la section 1.2, vous avez déjà créé un prototype interactif. Ce que nous allons faire maintenant, c'est transformer les « fonctionnalités qui ressemblent à de l'IA » en véritables capacités : <strong>quand l'utilisateur clique sur un bouton, le prototype envoie une requête à un service IA externe et affiche le texte renvoyé.</strong>
|
||||
|
||||
::: info ℹ️ Pour aller plus loin sur les principes
|
||||
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux grands modèles de langage (LLM)](/fr-fr/appendix/8-artificial-intelligence/llm-principles).
|
||||
::: details Pour en savoir plus : Qu'est-ce que DeepSeek ?
|
||||
|
||||
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, commercialisée sous le nom de DeepSeek, est une <strong>entreprise chinoise d'intelligence artificielle (IA) qui développe des grands modèles de langage (LLM)</strong>. DeepSeek est basée à Hangzhou, dans la province du Zhejiang, et est détenue et financée par le fonds quantitatif chinois High-Flyer. DeepSeek a été fondée en juillet 2023 par Liang Wenfeng, cofondateur de High-Flyer, qui est également PDG des deux entreprises. L'entreprise a lancé son chatbot éponyme et son modèle DeepSeek-R1 en janvier 2025.
|
||||
|
||||
Regardons les performances de DeepSeek dans le classement GPQA par rapport à d'autres modèles de premier plan. Il est à noter que DeepSeek est un modèle open source (tout le monde peut télécharger le modèle depuis Internet), alors que d'autres modèles courants comme Grok, Google Gemini et ChatGPT sont propriétaires. Comme on peut le voir, DeepSeek s'est considérablement rapproché des modèles de premier rang.
|
||||
|
||||
|
||||
|
||||
GPQA signifie « Graduate-Level Google-Proof Question Answering benchmark », un benchmark de niveau graduate pour les tâches de Q&R scientifiques.
|
||||
|
||||
GPQA contient 448 questions à choix multiples couvrant les sous-domaines de la biologie, de la physique et de la chimie, tels que la mécanique quantique, la chimie organique, la biologie moléculaire, etc. Ces questions ont été rédigées par 61 experts titulaires d'un doctorat ou en cours de doctorat, et ont fait l'objet d'un processus de validation rigoureux.
|
||||
:::
|
||||
|
||||
Suivez ces 3 étapes pour réaliser une intégration rapide de l'API de génération de texte :
|
||||
|
||||
1. **Créer une API Key sur la plateforme DeepSeek**
|
||||
2. **Trouver un exemple de génération de texte dans la documentation DeepSeek** (il y a généralement du code prêt à copier)
|
||||
3. **Ouvrir l'AI IDE, coller l'API Key + l'exemple officiel**, et dire à l'IA ce que vous voulez accomplir :
|
||||
> Aide-moi à intégrer l'API de ce grand modèle de langage pour prendre en charge la fonction de génération de textes publicitaires de cette application
|
||||
|
||||
Ensuite, nous allons faire une démonstration que vous pouvez suivre. Tout d'abord, inscrivez-vous sur [DeepSeek](https://platform.deepseek.com/usage) et créez une API Key, puis rechargez un petit montant pour vérifier.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Cliquez sur « API KEYS » et trouvez « create new API key » en bas de l'écran. Vous obtiendrez finalement une clé API comme sk-8573341c39fc44315aadc071c53rh7d2.
|
||||
|
||||
|
||||
|
||||
Une fois que vous avez la clé, vous avez l'autorisation d'appeler le modèle.
|
||||
|
||||
À ce stade, vous pouvez directement lire la documentation [API](https://api-docs.deepseek.com/), qui fournit généralement des exemples d'appel en curl ou Python.
|
||||
|
||||
|
||||
|
||||
Après avoir trouvé l'exemple, vous pouvez copier tout le contenu de la documentation et votre clé dans la boîte de dialogue de l'AI IDE, et lui demander de vous aider à intégrer le grand modèle de langage dans le prototype déjà développé.
|
||||
|
||||
|
||||
|
||||
Référence de prompt à utiliser :
|
||||
|
||||
```
|
||||
En te référant à cette méthode d'appel, aide-moi à prendre en charge la fonction de génération de textes publicitaires, qui peut générer des textes publicitaires pour le commerce électronique de Douyin en plusieurs styles sur la base des informations produit.
|
||||
|
||||
Matériel de référence :
|
||||
clé API : sk-8573341c39aefa1efe
|
||||
Référence de requête API :
|
||||
curl \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
|
||||
-d '{
|
||||
"model": "deepseek-chat",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
Après un certain temps de génération de code par l'IA, nous pouvons facilement obtenir le bouton de génération de texte publicitaire correspondant pour le tester. Si vous ne trouvez pas l'entrée, vous pouvez demander à l'AI IDE de vous indiquer depuis quelle page vous pouvez accéder à cette page. Si vous ne trouvez vraiment pas, vous pouvez demander à l'AI IDE de reconstruire et d'améliorer directement votre idée.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Bien sûr, vous pourriez vous demander : comment savoir si le grand modèle a vraiment été appelé et qu'il ne s'agit pas simplement d'une réponse figée intégrée ? Vous pouvez saisir du texte personnalisé et demander au modèle de générer le texte publicitaire correspondant en fonction de votre demande personnalisée.
|
||||
|
||||
Si vous constatez que les résultats sont différents à chaque fois et logiques, vous pouvez être sûr que l'API est appelée normalement. Vous pouvez aussi vérifier sur la [plateforme de gestion d'utilisation de l'API](https://platform.deepseek.com/usage) si l'appel a réussi (bien qu'il puisse falloir attendre quelques minutes pour voir les résultats).
|
||||
|
||||
## Autres modèles de génération de texte
|
||||
|
||||
En plus de DeepSeek, vous pouvez aussi essayer d'autres grands modèles de langage. Comme la plupart des modèles fournissent une **interface compatible OpenAI**, le changement est très simple -- il suffit de modifier l'API Key, l'URL de base et le nom du modèle.
|
||||
|
||||
### Intégration MiniMax
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que MiniMax ?
|
||||
|
||||
**MiniMax** est une entreprise chinoise d'intelligence artificielle dédiée à la recherche et au développement de technologies d'intelligence artificielle générale. MiniMax a lancé sa série de modèles de langage MiniMax-M2.7, qui affiche d'excellentes performances dans de nombreux benchmarks, avec un rapport qualité-prix exceptionnel.
|
||||
|
||||
**Principales caractéristiques de la série MiniMax-M2.7 :**
|
||||
|
||||
- **Contexte ultra-long** : prend en charge une fenêtre de contexte de 204 800 tokens, adaptée au traitement de documents longs et de dialogues multi-tours
|
||||
- **Rapport qualité-prix élevé** : prix très compétitif
|
||||
- **Interface compatible OpenAI** : peut être appelée directement avec le SDK OpenAI, sans apprentissage supplémentaire
|
||||
- **Deux modèles disponibles** :
|
||||
- `MiniMax-M2.7` : modèle phare, adapté aux tâches complexes
|
||||
- `MiniMax-M2.7-highspeed` : version haute vitesse, mêmes performances mais plus rapide
|
||||
:::
|
||||
|
||||
La méthode d'intégration est identique à DeepSeek, en 3 étapes :
|
||||
|
||||
1. Allez sur la [plateforme ouverte MiniMax](https://platform.minimax.io/) et créez un compte et une API Key
|
||||
2. Trouvez un exemple d'appel dans la documentation MiniMax
|
||||
3. Collez l'API Key + l'exemple dans l'AI IDE
|
||||
|
||||
Comme MiniMax fournit une interface compatible OpenAI, vous pouvez directement copier l'exemple curl ci-dessous et votre clé API, et les envoyer à l'AI IDE pour l'intégration :
|
||||
|
||||
```bash
|
||||
curl https://api.minimax.io/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${MINIMAX_API_KEY}" \
|
||||
-d '{
|
||||
"model": "MiniMax-M2.7",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
::: tip ✅ Conseil
|
||||
Le format d'API de MiniMax est presque identique à celui de DeepSeek (tous deux utilisent le format compatible OpenAI), donc si vous avez déjà réussi à intégrer DeepSeek, passer à MiniMax ne nécessite de modifier que trois choses :
|
||||
1. **URL de base** : changez en `https://api.minimax.io/v1`
|
||||
2. **API Key** : utilisez l'API Key de MiniMax
|
||||
3. **Nom du modèle** : changez en `MiniMax-M2.7` ou `MiniMax-M2.7-highspeed`
|
||||
|
||||
Pour plus d'informations, consultez la [documentation de l'interface compatible OpenAI de MiniMax](https://platform.minimax.io/docs/api-reference/text-openai-api).
|
||||
:::
|
||||
|
||||
# 3. Intégrer l'API de conversion image-texte : Qwen3 VL
|
||||
|
||||
::: info ℹ️ Pour aller plus loin sur les principes
|
||||
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux modèles de langage visuel (VLM)](/fr-fr/appendix/8-artificial-intelligence/multimodal-models).
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que Qwen3 VL ?
|
||||
|
||||
**Qwen3 VL** est la dernière version de la série de modèles de langage visuel multimodal développée par l'équipe Tongyi Qianwen d'Alibaba Cloud. VL signifie « Vision-Language », c'est-à-dire un modèle de langage visuel. Il est capable de comprendre le contenu des images et de générer des descriptions textuelles, de répondre à des questions sur les images et d'extraire des informations des images.
|
||||
|
||||
|
||||
|
||||
|
||||
**Principales capacités de Qwen3 VL :**
|
||||
|
||||
- **Compréhension d'images** : capable d'identifier les objets, scènes, personnages et textes dans les images
|
||||
- **Questions-réponses visuelles** : répondre avec précision aux questions sur les images
|
||||
- **Description d'images** : générer des descriptions textuelles détaillées ou concises
|
||||
- **Compréhension multi-images** : prendre en charge le traitement simultané de plusieurs images pour une analyse comparative
|
||||
- **Extraction de texte** : extraire du contenu textuel des images (capacité OCR)
|
||||
|
||||
**Pourquoi choisir Qwen3 VL ?**
|
||||
|
||||
Par rapport au modèle de génération précédent, Qwen3 VL a significativement amélioré la précision de la compréhension d'images, prenant en charge des tâches d'analyse d'images plus longues et plus complexes. Il excelle dans la compréhension du chinois, avec un coût d'appel API relativement faible et un excellent rapport qualité-prix. De plus, sa fenêtre de contexte est plus grande, ce qui lui permet de gérer des tâches de raisonnement visuel plus complexes.
|
||||
|
||||
**Scénarios d'application typiques :**
|
||||
|
||||
- Commerce électronique : génération automatique de titres, descriptions et points forts à partir de photos de produits
|
||||
- Création de contenu : génération automatique de textes publicitaires ou de suggestions d'images à partir de visuels
|
||||
- Bureau : extraction du contenu d'images, reconnaissance automatique de rapports
|
||||
- Éducation : analyse automatique de questions illustrées, extraction de points de connaissance
|
||||
|
||||
:::
|
||||
|
||||
Dans la partie précédente, nous avons expliqué comment intégrer l'API de génération de texte. Mais pour le scénario de notre application, nous constatons un problème : nous téléchargeons une image, et si nous n'utilisons qu'un modèle de langage, il ne peut pas bien comprendre le contenu de l'image, ce qui peut entraîner des résultats imprécis.
|
||||
|
||||
Nous voulons un modèle capable de transformer une image en description textuelle, ce qui nécessite un modèle de langage visuel (VLM). Dans notre cas, nous utiliserons un modèle VLM pour générer des descriptions de points de vente de produits afin d'améliorer l'expérience utilisateur.
|
||||
|
||||
Pour plus de simplicité, nous utiliserons l'API fournie par la plateforme cloud [SiliconFlow](https://cloud.siliconflow.cn/me) pour l'intégration de l'API de conversion image-texte.
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que SiliconFlow ?
|
||||
**SiliconFlow** est une plateforme chinoise bien connue d'agrégation de modèles IA, offrant des services d'API pour de nombreux modèles de langage et de vision grand public et open source.
|
||||
|
||||
**Caractéristiques de la plateforme :**
|
||||
|
||||
- **Support multi-modèles** : intègre de nombreux modèles IA populaires, notamment DeepSeek, Qwen, Llama et d'autres modèles open source
|
||||
- **Optimisation technique** : optimisation d'inférence pour les modèles open source, offrant des services API à faible latence et haute concurrence
|
||||
- **Compatibilité d'interface** : fournit des API compatibles avec le format OpenAI pour une intégration facile
|
||||
- **Paiement à l'usage** : facturation à l'utilisation
|
||||
|
||||
SiliconFlow est relativement mature dans les services d'inférence de modèles open source et constitue un choix courant pour l'utilisation de modèles IA open source chinois.
|
||||
:::
|
||||
|
||||
Sur la page d'accueil de SiliconFlow, vous pouvez voir qu'il y a beaucoup de modèles disponibles. Trouvez le filtre dans le coin supérieur gauche, cliquez pour l'ouvrir, sélectionnez le tag « vision », et vous verrez plusieurs modèles de conversion image-texte, comme GLM-4.6V de Zhipu ou Qwen3-VL.
|
||||
|
||||
|
||||
|
||||
Vous pouvez choisir n'importe lequel pour tester, ici nous prenons `Qwen/Qwen3-VL-8B-Instruct` comme exemple.
|
||||
|
||||
|
||||
|
||||
Accédez à la [plateforme SiliconFlow](https://cloud.siliconflow.cn/me/account/ak), cliquez sur « Nouvelle clé API » dans la section des clés API, et créez une nouvelle clé API.
|
||||
|
||||
Vous pouvez utiliser directement le code ci-dessous comme référence et l'envoyer à l'AI IDE avec votre clé API générée pour l'intégration fonctionnelle.
|
||||
|
||||
::: details Code de référence pour la conversion image-texte
|
||||
|
||||
```python
|
||||
from openai import OpenAI
|
||||
from typing import Dict, Any, List
|
||||
import base64
|
||||
import os
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
|
||||
MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
|
||||
|
||||
def encode_image(image_path: str) -> str:
|
||||
with open(image_path, "rb") as image_file:
|
||||
return base64.b64encode(image_file.read()).decode('utf-8')
|
||||
|
||||
def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL_NAME,
|
||||
messages=messages,
|
||||
max_tokens=512,
|
||||
temperature=0.7,
|
||||
top_p=0.7,
|
||||
frequency_penalty=0.5,
|
||||
stream=False,
|
||||
n=1
|
||||
)
|
||||
return response.choices[0].message.content
|
||||
|
||||
def caption_image(image_path: str) -> str:
|
||||
base64_image = encode_image(image_path)
|
||||
messages = [
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Please describe this image in detail."
|
||||
},
|
||||
{
|
||||
"type": "image_url",
|
||||
"image_url": {
|
||||
"url": f"data:image/jpeg;base64,{base64_image}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
client = OpenAI(
|
||||
api_key=SILICONFLOW_API_KEY,
|
||||
base_url=SILICONFLOW_BASE_URL
|
||||
)
|
||||
|
||||
return get_vlm_completion(client, messages)
|
||||
|
||||
image_path = "images.jpg"
|
||||
caption = caption_image(image_path)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Dans ce scénario, nous allons directement demander à l'AI IDE de nous aider à implémenter la fonction de génération automatique de texte de points de vente et de mots-clés à partir des images téléchargées, comme suit :
|
||||
|
||||
```
|
||||
Sur la base de l'API de conversion image-texte ci-dessous, aide-moi à implémenter la fonction de génération automatique de texte de points de vente et de mots-clés à partir des images téléchargées.
|
||||
|
||||
<Collez ici le code de référence et la clé>
|
||||
```
|
||||
|
||||
Résultat final :
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Bases de l\'API', description: 'Comprendre les concepts clés et les règles de sécurité' },
|
||||
{ title: 'Intégration texte', description: 'Pratique de génération de texte avec DeepSeek' },
|
||||
{ title: 'Intégration image', description: 'Compréhension et génération d\'images VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 4. Intégrer l'API de génération d'images : Seedream Jimeng
|
||||
|
||||
Dans les parties précédentes, nous avons principalement traité des tâches liées au texte. Nous allons maintenant essayer d'intégrer la génération d'images, en prenant en charge la génération d'images à partir de descriptions textuelles ou la modification d'images.
|
||||
|
||||
::: info ℹ️ Pour aller plus loin sur les principes
|
||||
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction à la génération d'images](/fr-fr/appendix/8-artificial-intelligence/image-generation).
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que [Seedream Jimeng](https://seed.bytedance.com/en/seedream4_5) ?
|
||||
|
||||
|
||||
|
||||
> Vous connaissez peut-être déjà Nano Banana (développé par Google), mais vous ne devriez pas manquer Seedream. Seedream 4.5 est le nouveau modèle de création d'images de ByteDance. Il intègre la génération et l'édition d'images dans une architecture unifiée, ce qui lui permet de gérer de manière flexible des tâches multimodales complexes comme la génération basée sur la connaissance, le raisonnement complexe et la cohérence de référence. De plus, sa vitesse d'inférence est bien supérieure à celle de la génération précédente, et il peut générer des images haute définition jusqu'à 4K.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
**Principales capacités :**
|
||||
|
||||
- **Texte vers image** : générer des images à partir de descriptions textuelles, prenant en charge plusieurs styles (réaliste, cartoon, encre, cyberpunk, etc.)
|
||||
- **Transfert de style** : convertir une image dans un style artistique spécifié
|
||||
- **Variantes d'images** : générer de nouvelles images de style similaire à partir d'une image de référence
|
||||
- **Amélioration de la résolution** : augmenter la clarté et les détails des images
|
||||
- **Édition d'images** : modifier et retoucher des images existantes via des instructions en langage naturel
|
||||
|
||||
**Pourquoi choisir Seedream ?**
|
||||
|
||||
- **Accès stable depuis la Chine** : vitesse d'accès rapide et latence faible
|
||||
- **Excellents résultats** : performances stables et fiables dans les scénarios de commerce électronique et de création de visuels
|
||||
- **Optimisé pour le chinois** : meilleure compréhension des prompts en chinois, adapté aux utilisateurs chinois
|
||||
- **Rapidité** : efficacité de génération élevée, temps de réponse court
|
||||
- **Qualité stable** : génération d'images haute définition jusqu'à 4K
|
||||
|
||||
**Scénarios d'application typiques :**
|
||||
|
||||
- Commerce électronique : génération d'images principales, de visuels pour les pages de détails, de posters promotionnels
|
||||
- Réseaux sociaux : génération d'avatars, de stickers, d'images d'accompagnement
|
||||
- Design : création rapide de concepts, de visuels, d'images d'arrière-plan
|
||||
- Marketing : création de publicités, de bannières d'événements, de posters de fêtes
|
||||
|
||||
**Complémentarité avec Qwen3 VL :**
|
||||
|
||||
Ces deux API peuvent être utilisées en chaîne : d'abord utilisez Qwen3 VL pour analyser l'image de référence et comprendre le contenu visuel, puis utilisez Seedream pour générer une nouvelle image basée sur le prompt dérivé de l'analyse de l'image de référence.
|
||||
:::
|
||||
|
||||
Beaucoup de « posters IA / images principales IA / images de personnages IA » que vous voyez sur Douyin, Bilibili ou YouTube utilisent essentiellement la technologie présentée ici. Ce que vous devez faire est simple : organiser l'entrée de l'utilisateur en une phrase, envoyer une requête à l'API d'image, puis afficher l'image renvoyée. Le modèle utilisé ici s'appelle un modèle de génération d'images / d'édition d'images.
|
||||
|
||||
Nous allons démontrer progressivement comment intégrer l'API Seedream dans votre projet (avec l'aide de l'AI IDE).
|
||||
|
||||
[Accédez à la page d'accueil](https://www.volcengine.com/experience/ark?launch=seedream) puis cliquez sur connexion.
|
||||
|
||||
|
||||
|
||||
Après connexion, trouvez l'option de recharge dans le coin supérieur droit.
|
||||
|
||||
|
||||
|
||||
La recharge nécessite une vérification d'identité.
|
||||
|
||||
|
||||
|
||||
Une fois la vérification réussie, vous pouvez [recharger 1 yuan pour tester](https://console.volcengine.com/finance/fund/recharge).
|
||||
|
||||
Retournez à la [page initiale](https://www.volcengine.com/experience/ark?launch=seedream) et cliquez sur Accès API.
|
||||
|
||||
|
||||
|
||||
Créez d'abord une clé API, puis cliquez sur les options de sélection.
|
||||
|
||||
|
||||
|
||||
Cela vous amènera à l'étape 2. Ici, vous devez confirmer que le service appelé est Seedream 4.5 et copier l'exemple d'appel fourni. (Les captures d'écran ici datent d'une période antérieure, la version du modèle affichée est donc encore la 4.0)
|
||||
|
||||
|
||||
|
||||
Une fois que vous avez la clé API et l'exemple d'appel, vous pouvez les coller directement dans l'AI IDE pour qu'il génère la démo frontend ou intègre la capacité dans votre prototype existant. Notez que dans l'image, vous pouvez choisir entre le mode texte-vers-image ou la génération d'une image à partir de plusieurs images. Vous devez sélectionner le code de référence en fonction de vos besoins actuels.
|
||||
|
||||
::: warning ⚠️ Remarque importante
|
||||
L'exemple par défaut est relativement complexe. N'oubliez pas de désactiver **« Ajouter un filigrane »** et **« Réponse en flux continu »** pour éviter de générer un filigrane et de provoquer des échecs de requête.
|
||||
:::
|
||||
|
||||
Comme nous utilisons ensuite le mode de génération à partir d'images de référence, nous allons d'abord vers la fonctionnalité de génération d'une image à partir de plusieurs images. Le code de référence est le suivant :
|
||||
|
||||
```
|
||||
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer xxxxxxx" \
|
||||
-d '{
|
||||
"model": "doubao-seedream-4-5-251128",
|
||||
"prompt": "Remplacer la tenue de l'image 1 par celle de l'image 2",
|
||||
"image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
|
||||
"sequential_image_generation": "disabled",
|
||||
"response_format": "url",
|
||||
"size": "2K",
|
||||
"stream": false,
|
||||
"watermark": true
|
||||
}'
|
||||
```
|
||||
|
||||
Avec le code de référence d'image, nous demandons à l'AI IDE de prendre en charge les tâches d'image courantes dans le commerce électronique :
|
||||
|
||||
```
|
||||
Sur la base de l'API ci-dessous, aide-moi à implémenter les fonctionnalités courantes du commerce électronique dans ce projet (par exemple, la génération de posters, la génération d'images principales pour Douyin, etc.)
|
||||
|
||||
<Collez ici la clé API et le code d'édition d'image>
|
||||
```
|
||||
|
||||
Résultat de l'implémentation :
|
||||
|
||||
|
||||
|
||||
Il est à noter que la génération d'images peut rencontrer des problèmes inhabituels. Il est recommandé de demander à l'AI IDE d'afficher les messages d'erreur complets pour faciliter le copier-coller et la modification (sinon, vous risquez de voir s'afficher « échec de la génération » à répétition sans savoir pourquoi). Par exemple, vous pouvez dire :
|
||||
|
||||
```
|
||||
N'affiche pas seulement « échec de la génération d'image », affiche systématiquement la raison complète de l'échec, comme une incompatibilité d'image, une erreur de requête, un délai d'attente, etc. !
|
||||
```
|
||||
|
||||
Parfois, après une modification, la mise à jour n'est pas appliquée à la page web. Si vous constatez que la page continue de générer des erreurs après plusieurs modifications, vous pouvez aussi essayer de dire directement à l'AI IDE : redémarre ce projet.
|
||||
|
||||
Dans le contexte du commerce électronique, nous pourrions vouloir que les vêtements téléchargés par l'utilisateur s'habillent automatiquement sur un personnage, ou que des images de vente attrayantes et des posters soient générés automatiquement pour les produits. Ici, le prompt que nous avons essayé consistait à lui faire générer un poster pour le commerce électronique :
|
||||
|
||||
|
||||
|
||||
Vous pouvez utiliser l'API texte-vers-image ou image-vers-image pour implémenter différentes fonctionnalités en fonction de vos scénarios métier imaginés.
|
||||
|
||||
## Autres services de génération d'images
|
||||
|
||||
Voici d'autres options. Il est recommandé de d'abord réussir l'intégration avec Qwen, puis de remplacer par les services suivants en fonction des résultats et des coûts (choisissez en fonction de votre expérience réelle).
|
||||
|
||||
### Intégration Recraft
|
||||
|
||||
Si votre prototype est plus orienté vers la « production de design » (par exemple, la génération d'illustrations de style de marque, de posters marketing, de ressources vectorielles), Recraft peut être plus adapté. La méthode d'intégration est identique à la section précédente : **obtenir la clé + trouver l'exemple officiel + demander à l'AI IDE d'intégrer l'exemple dans votre bouton/page**.
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que Recraft ?
|
||||
|
||||
> Recraft est un outil IA pour les designers, illustrateurs et professionnels du marketing -- fondé en 2022 aux États-Unis, basé à Londres. Il aide à générer/itérer des visuels (images, art vectoriel, graphiques 3D), avec des avantages comme une sortie de haute qualité (pour toute taille/longueur de texte), un positionnement précis des éléments et un design cohérent de marque. Approuvé par plus de 3 millions d'utilisateurs dans 200 pays (dont Ogilvy et Netflix), avec plus de 350 millions d'images créées, son équipe vise à en faire un outil indispensable pour les designers, en s'assurant que les créateurs gardent le contrôle de leur flux de travail assisté par IA.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
Il faut d'abord trouver l'[entrée API](https://www.recraft.ai/profile/api) pour obtenir une clé API.
|
||||
|
||||
Comme il n'y a pas de crédit gratuit ici, nous devons recharger 1 000 crédits nous-mêmes. Ce site accepte Alipay et WeChat Pay, il est donc facile d'obtenir 1 000 crédits (attention : ne rechargez pas plus que nécessaire).
|
||||
|
||||
|
||||
|
||||
Ensuite, nous suivons toujours la même méthode : aller dans la documentation officielle pour trouver l'exemple de requête correspondant :
|
||||
|
||||
- <https://www.recraft.ai/docs/api-reference/getting-started>
|
||||
- <https://www.recraft.ai/docs/api-reference/usage>
|
||||
- <https://www.recraft.ai/docs/api-reference/guides>
|
||||
|
||||
:::
|
||||
|
||||
### Intégration Qwen Image / Qwen Image Edit
|
||||
|
||||
Si vous souhaitez utiliser une approche plus simple pour intégrer un service de génération d'images, vous pouvez envisager Qwen Image (Tongyi Wanxiang). L'approche reste la même : considérez-le comme une « API de génération d'images » et connectez-la à votre bouton de prototype.
|
||||
|
||||
::: details Pour en savoir plus : Qwen Image / Qwen Image Edit ?
|
||||
|
||||
**Qwen Image** (aussi appelé Tongyi Wanxiang) est la série de modèles de génération d'images de l'équipe Tongyi d'Alibaba Cloud, comprenant deux modèles principaux :
|
||||
|
||||
**1. Qwen Image -- modèle texte-vers-image (Text-to-Image)**
|
||||
|
||||
Génère de nouvelles images à partir de descriptions textuelles. Vous entrez un prompt, le modèle comprend votre intention et génère une image correspondante.
|
||||
|
||||
|
||||
|
||||
**Principales capacités :**
|
||||
|
||||
- **Texte vers image** : générer des images à partir de descriptions textuelles, prenant en charge plusieurs styles (réaliste, cartoon, encre, cyberpunk, etc.)
|
||||
- **Transfert de style** : convertir une image dans un style artistique spécifié
|
||||
- **Variantes d'images** : générer de nouvelles images de style similaire à partir d'une image de référence
|
||||
- **Amélioration de la résolution** : augmenter la clarté et les détails des images
|
||||
|
||||
**2. Qwen Image Edit -- modèle image-vers-image (Image-to-Image)**
|
||||
|
||||
Modifie et retouche des images existantes via des instructions en langage naturel. Le modèle comprend votre intention de modification et génère le résultat.
|
||||
|
||||
**Principales capacités :**
|
||||
|
||||
- **Remplacement partiel** : remplacer un objet ou un personnage dans une image (par exemple « changer le fond pour la mer »)
|
||||
- **Suppression d'éléments** : retirer les éléments indésirables d'une image
|
||||
- **Conversion de style** : ajouter des filtres ou des effets artistiques à une image
|
||||
- **Extension d'image** : étendre les bords d'une image et générer du nouveau contenu
|
||||
- **Retouche intelligente** : embellissement automatique, ajustement de la lumière et des ombres, correction de défauts
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Pourquoi choisir la série Qwen Image ?**
|
||||
|
||||
- **Optimisé pour le chinois** : meilleure compréhension des prompts en chinois, adapté aux utilisateurs chinois
|
||||
- **Coût réduit** : prix plus abordable par rapport aux concurrents internationaux
|
||||
- **Rapidité** : efficacité de génération élevée, temps de réponse court
|
||||
- **Qualité stable** : performances stables et fiables dans les scénarios de commerce électronique et de création de visuels
|
||||
- **Styles variés** : prise en charge de nombreux styles artistiques et effets créatifs
|
||||
|
||||
**Scénarios d'application typiques :**
|
||||
|
||||
- Commerce électronique : génération d'images principales, de visuels pour les pages de détails, de posters promotionnels
|
||||
- Réseaux sociaux : génération d'avatars, de stickers, d'images d'accompagnement
|
||||
- Design : création rapide de concepts, de visuels, d'images d'arrière-plan
|
||||
- Marketing : création de publicités, de bannières d'événements, de posters de fêtes
|
||||
:::
|
||||
|
||||
Consultez le site [SiliconFlow](https://siliconflow.cn/). Sur le côté gauche, il y a une section « Playground » où vous pouvez tester différents modèles sans appel API. En haut de la page, il y a un bouton « Filters » ; cliquez pour filtrer la liste de modèles.
|
||||
|
||||
Si vous sélectionnez « Image », vous ne verrez que les modèles de génération d'images actuellement supportés. Dans ce cas, nous utiliserons Qwen/Qwen-Image.
|
||||
|
||||
|
||||
|
||||
Une fois tout configuré, vous devez vous référer à la documentation correspondante de l'API de génération d'images. Vous pouvez trouver la section « API Reference » sur la page de documentation officielle. Cliquez dessus, puis naviguez vers la [section API de génération d'images](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) et trouvez l'exemple de requête correspondant.
|
||||
|
||||
Vous pouvez envoyer l'exemple de requête suivant et votre clé API à l'AI IDE pour intégrer la fonctionnalité de génération d'images.
|
||||
|
||||
```bash
|
||||
curl --request POST \
|
||||
--url https://api.siliconflow.cn/v1/images/generations \
|
||||
--header 'Authorization: Bearer <token>' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data '
|
||||
{
|
||||
"model": "Qwen/Qwen-Image-Edit-2509",
|
||||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||||
}
|
||||
'
|
||||
```
|
||||
|
||||
Ici, le modèle peut être Qwen/Qwen-Image ou Qwen/Qwen-Image-Edit-2509.
|
||||
|
||||
::: details Code de référence pour l'édition d'images
|
||||
|
||||
Copiez le code ci-dessous et la clé, puis envoyez-les ensemble à l'AI IDE :
|
||||
|
||||
```python
|
||||
import requests
|
||||
import os
|
||||
from typing import Dict, Any, Optional
|
||||
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
|
||||
QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
|
||||
|
||||
def generate_image_edit(
|
||||
prompt: str,
|
||||
image: Optional[str] = None,
|
||||
image2: Optional[str] = None,
|
||||
image3: Optional[str] = None,
|
||||
negative_prompt: Optional[str] = None,
|
||||
cfg: Optional[float] = 4.0,
|
||||
seed: Optional[int] = None
|
||||
) -> Optional[Dict[str, Any]]:
|
||||
payload: Dict[str, Any] = {
|
||||
"model": QWEN_IMAGE_EDIT_MODEL,
|
||||
"prompt": prompt,
|
||||
}
|
||||
if image:
|
||||
payload["image"] = image
|
||||
if image2:
|
||||
payload["image2"] = image2
|
||||
if image3:
|
||||
payload["image3"] = image3
|
||||
if negative_prompt:
|
||||
payload["negative_prompt"] = negative_prompt
|
||||
if cfg is not None:
|
||||
payload["cfg"] = cfg
|
||||
if seed is not None:
|
||||
payload["seed"] = seed
|
||||
|
||||
headers: Dict[str, str] = {
|
||||
"Authorization": f"Bearer {SILICONFLOW_API_KEY}",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
|
||||
response.raise_for_status()
|
||||
return response.json()
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error generating image: {e}")
|
||||
return None
|
||||
|
||||
def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
|
||||
try:
|
||||
response = requests.get(image_url)
|
||||
response.raise_for_status()
|
||||
os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
|
||||
with open(output_path, "wb") as f:
|
||||
f.write(response.content)
|
||||
print(f"Image saved successfully to: {output_path}")
|
||||
return True
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error downloading image: {e}")
|
||||
return False
|
||||
except Exception as e:
|
||||
print(f"Error saving image: {e}")
|
||||
return False
|
||||
|
||||
prompt: str = "Transformer le ciel en soirée, avec la lune et les étoiles, dans un style onirique"
|
||||
negative_prompt: str = "flou, basse qualité, déformé"
|
||||
image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
|
||||
image2_url: Optional[str] = None
|
||||
image3_url: Optional[str] = None
|
||||
|
||||
cfg: float = 4.0
|
||||
seed: int = 12345
|
||||
output_path: str = "edited_image.png"
|
||||
|
||||
print(f"Generating edited image with prompt: {prompt}")
|
||||
print(f"Input image: {image_url}")
|
||||
print(f"CFG: {cfg}, Seed: {seed}")
|
||||
print("-" * 50)
|
||||
|
||||
result = generate_image_edit(
|
||||
prompt=prompt,
|
||||
image=image_url,
|
||||
image2=image2_url,
|
||||
image3=image3_url,
|
||||
negative_prompt=negative_prompt,
|
||||
cfg=cfg,
|
||||
seed=seed
|
||||
)
|
||||
|
||||
if result and "images" in result:
|
||||
images = result["images"]
|
||||
if images and len(images) > 0:
|
||||
image_url_result = images[0]["url"]
|
||||
print(f"Image edit generated successfully. URL: {image_url_result}")
|
||||
success = save_image_from_url(image_url_result, output_path)
|
||||
if success:
|
||||
print(f"Image saved to: {output_path}")
|
||||
else:
|
||||
print("Failed to save image to local file")
|
||||
else:
|
||||
print("No images found in response")
|
||||
else:
|
||||
print("Image generation failed")
|
||||
if result:
|
||||
print(f"Response: {result}")
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# Annexe : Comment trouver « le modèle le plus puissant actuellement »
|
||||
|
||||
Le développement des modèles de texte (souvent appelés « grands modèles de langage ») est très rapide, et nous devons toujours nous assurer que nous utilisons l'un des modèles les plus performants. Grâce aux deux sites suivants, vous pouvez facilement voir « quels modèles sont les plus utilisés et les mieux notés actuellement ».
|
||||
|
||||
En général, ces sites peuvent être compris comme des **« arènes de modèles »** : ils mettent côte à côte les résultats de deux modèles, et vous votez pour celui que vous préférez. Plus un modèle reçoit de votes, plus il est probablement considéré comme « meilleur ».
|
||||
|
||||
De plus, vous pouvez occasionnellement voir des modèles anonymes mystérieux (« Unknown Model ») dans ces arènes. Cela signifie généralement que quelqu'un a discrètement introduit un « modèle de test interne » pour un test en aveugle, et vous pourriez avoir l'opportunité d'expérimenter des capacités plus avancées avant les autres.
|
||||
|
||||
## LMArena
|
||||
|
||||
Site : <https://lmarena.ai/>
|
||||
|
||||
LMArena est plus adapté pour déterminer « quel modèle est préféré par la majorité ». Plus il y a de votes et plus le score est élevé, plus le modèle est probablement fiable dans les scénarios d'utilisation réels.
|
||||
|
||||
Une utilisation simple est de :
|
||||
|
||||
1. Consulter directement le classement (Leaderboard)
|
||||
2. Choisir d'abord une direction (par exemple, conversation générale / programmation / vision)
|
||||
3. Choisir parmi les 3 premiers celui que vous pouvez utiliser (accès disponible, prix acceptable, latence acceptable)
|
||||
|
||||
|
||||
|
||||
## Artificial Analysis
|
||||
|
||||
Site : <https://artificialanalysis.ai/>
|
||||
|
||||
Artificial Analysis est plus adapté pour comparer « qualité / prix / vitesse » dans un même tableau. Vous pouvez l'utiliser comme tableau de référence pour la sélection de modèles.
|
||||
|
||||
L'utilisation courante est de :
|
||||
|
||||
1. Trouver la catégorie de modèles qui vous intéresse (texte / génération d'images, etc.)
|
||||
2. Consulter les indicateurs de qualité (Quality) + prix (Price) + latence/débit (Latency/Throughput)
|
||||
3. Choisir celui qui offre le meilleur rapport qualité-prix pour votre produit
|
||||
|
||||
::: tip ✅ Conseil
|
||||
Ne vous disputez pas au feeling sur « lequel est le plus puissant ». Une approche plus fiable est de tester 2 à 3 modèles avec les mêmes entrées, puis de combiner les classements et les prix pour prendre une décision.
|
||||
:::
|
||||
|
||||
## Résumé
|
||||
|
||||
Lors de l'intégration de divers services IA, il n'est pas nécessaire de considérer les API comme trop complexes. Si vous maîtrisez les concepts clés suivants, vous pourrez gérer la plupart des scénarios :
|
||||
|
||||
**L'essence de l'API est un pont de communication.** Ce qu'elle fait est simple : envoyer votre requête et ramener la réponse du modèle. Vous n'avez pas besoin de savoir ce qui se passe en coulisses, il suffit d'organiser correctement le format de la requête.
|
||||
|
||||
**Le SDK est une encapsulation de l'API.** Si l'API est l'interface brute, le SDK est une boîte à outils prête à l'emploi -- il s'occupe des détails fastidieux comme la signature des requêtes, la gestion des erreurs et la validation des paramètres. Dans le développement quotidien, privilégiez le SDK plutôt que l'appel direct à l'API, cela vous évitera bien des tracas.
|
||||
|
||||
**Quand vous lisez la documentation, concentrez-vous sur trois choses :** l'adresse du service (endpoint), les identifiants (clé API) et comment remplir les paramètres d'appel. Une fois ces trois points clarifiés, la mise en marche n'est qu'une question de temps.
|
||||
|
||||
Le reste du travail sera accompli par l'IDE et les outils de développement modernes. Concentrez-vous sur votre logique métier, laissez le travail d'appel de bas niveau aux SDK et aux chaînes d'outils matures.
|
||||
|
||||
# 5. 📚 Devoir : Intégrer votre première capacité IA
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Défi : Intégrer une capacité IA dans votre espace de travail</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
En vous référant aux prompts et au contenu de cette leçon, complétez un cycle complet :
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Pratique complète en boucle fermée</strong>
|
||||
<ul>
|
||||
<li>Choisissez et intégrez un service IA (LLM / texte-vers-image / image-vers-image) -> Implémentez l'interaction frontend-backend -> Intégrez dans votre prototype</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Partage des résultats</strong>
|
||||
<ul>
|
||||
<li>Capturez d'écran votre page fonctionnelle et partagez-la avec le groupe</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Question de réflexion</strong>
|
||||
<ul>
|
||||
<li>Réservez de l'espace pour le prochain chapitre « Projet complet », réfléchissez à l'avance : comment combiner ces capacités IA pour créer une fonctionnalité intéressante ?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Prochaine étape
|
||||
|
||||
Dans le prochain chapitre, nous allons relier ces capacités IA dispersées et créer un produit complet basé sur un scénario métier réel :
|
||||
|
||||
- Connecter les étapes de planification de contenu, de mise en ligne de produits et d'analyse de données en un flux métier complet
|
||||
- Intégrer les capacités IA apprises dans ce chapitre (génération de textes publicitaires LLM, texte-vers-image, édition d'images) dans les étapes métier réelles
|
||||
- Réaliser un « espace de travail IA commerce électronique » véritablement utilisable, et non une démo isolée
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Articles connexes"
|
||||
description="Parcours d'apprentissage recommandé d'une capacité IA unique à un flux produit complet."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/introduction-to-ai-ide/images
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,275 @@
|
||||
---
|
||||
title: "De l'idée au produit AI - Parcours d'apprentissage Easy-Vibe"
|
||||
description: "Parcours d'apprentissage complet de la programmation AI : de zéro au développement full-stack. Maîtrisez le Vibe Coding, Claude Code, Cursor et d'autres outils IDE AI, apprenez la réflexion produit, le développement full-stack et l'intégration de capacités AI."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['fr-fr/stage-1/learning-map'] ?? []
|
||||
</script>
|
||||
|
||||
# De l'idée au produit AI
|
||||
|
||||
::: info Remerciements spéciaux
|
||||
Un grand merci aux étudiants de l'**Université Tsinghua, Campus international de Shenzhen** pour leurs tests, retours et soutien de ce cours ! Vos avis et contributions ont permis d'améliorer ce cours. [👉 Voir la liste complète des contributeurs](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
|
||||
:::
|
||||
|
||||
Autrefois, créer un logiciel était un processus très exigeant : il fallait connaître la programmation, comprendre les algorithmes et avoir des années d'expérience en projet.
|
||||
Aujourd'hui, tout a changé. Si vous avez une idée, l'IA peut écrire le code pour vous.
|
||||
|
||||
C'est un changement majeur : **les langages de programmation deviennent des langages naturels**.
|
||||
|
||||
L'apparition des grands modèles de langage (LLM) a fait en sorte que le développement n'est plus « l'apanage des experts techniques », mais un outil que tout le monde peut prendre en main. Ce qui était autrefois le plus difficile — « comment écrire du code » — est devenu ce qui est le plus difficile aujourd'hui : « **que voulez-vous créer** ».
|
||||
|
||||
> **Qu'est-ce que le Vibe Coding ?**
|
||||
> En termes simples, c'est « programmer en parlant ». Le Vibe Coding signifie que vous pouvez réaliser un projet de programmation en vous appuyant uniquement sur des conversations avec l'IA, plutôt que d'écrire du code directement.
|
||||
|
||||
Bien sûr, faire en sorte que l'IA écrive du code n'est que la première étape. Pour créer un produit véritablement utilisable, vous rencontrerez d'autres défis :
|
||||
- Comment faire en sorte que l'IA écrive un code propre et maintenable ?
|
||||
- Comment assembler des fragments de code en une application fonctionnelle ?
|
||||
- Comment mettre une application en ligne et la faire utiliser par de vrais utilisateurs ?
|
||||
- Comment intégrer des capacités AI comme la génération de texte et la reconnaissance d'images dans votre produit ?
|
||||
|
||||
Ce cours vous aidera à trouver des réponses à ces questions.
|
||||
|
||||
Que vous soyez étudiant, enseignant, médecin, ouvrier, ou toute personne sans aucune connaissance technique — sans avoir besoin d'apprendre la programmation pendant des années, vous pourrez en deux semaines créer un prototype fonctionnel et démontrable.
|
||||
|
||||
| Votre profil | Ce que ce cours peut vous apporter |
|
||||
|---------|-------------|
|
||||
| Étudiant | Devoirs, concours, création d'entreprise : réalisez vos projets vous-même, sans dépendre de personne |
|
||||
| Professionnel | Automatisez les tâches répétitives, améliorez votre efficacité, voire développez un projet parallèle |
|
||||
| Chef de produit / Designer | Vos idées ne restent plus sur papier : créez rapidement des démos pour votre patron ou vos clients |
|
||||
| Entrepreneur / PME | Validez vos idées à moindre coût, créez un MVP sans dépenser des milliers en sous-traitance |
|
||||
| Enseignant / Formateur | Créez des outils pédagogiques, des supports de cours, générez automatiquement des exercices |
|
||||
| Médecin / Avocat / Professionnel | Automatisez vos processus métier, créez vos propres outils d'efficacité |
|
||||
| Tout le monde | Utilisez l'IA pour résoudre des problèmes concrets du quotidien ou professionnel, rendez l'impossible possible |
|
||||
|
||||
À l'ère de l'IA, la capacité d'exécution et les idées sont toujours plus importantes que la technique.
|
||||
|
||||
## Parcours de croissance : de « savoir utiliser l'IA » à « savoir créer des produits AI »
|
||||
|
||||
<div class="stage-intro">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎮</div>
|
||||
<h3>Débutant</h3>
|
||||
<p class="stage-role">Découvrir la programmation AI</p>
|
||||
<div class="stage-tags">
|
||||
<span>Jeu du serpent</span>
|
||||
<span>Prise en main sans prérequis</span>
|
||||
<span>Première expérience Vibe Coding</span>
|
||||
<span>Génération en quelques minutes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-grid">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🛠️</div>
|
||||
<h3>Première étape</h3>
|
||||
<p class="stage-role">Chef de produit / Operations</p>
|
||||
<div class="stage-tags">
|
||||
<span>IDE AI (Cursor/Claude)</span>
|
||||
<span>Décomposition des besoins & Prototype</span>
|
||||
<span>Intégration de capacités AI</span>
|
||||
<span>Développement complet d'une démo</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Deuxième étape</h3>
|
||||
<p class="stage-role">Développeur junior / Développeur indépendant</p>
|
||||
<div class="stage-tags">
|
||||
<span>De Figma au code</span>
|
||||
<span>Base de données Supabase</span>
|
||||
<span>Intégration de paiement Stripe</span>
|
||||
<span>Base de connaissances Dify</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Troisième étape</h3>
|
||||
<p class="stage-role">Développeur senior / Architecte</p>
|
||||
<div class="stage-tags">
|
||||
<span>Web/Mini-programmes/Multi-plateforme</span>
|
||||
<span>Outils avancés MCP</span>
|
||||
<span>RAG & LangGraph</span>
|
||||
<span>Mentalité d'ingénieur senior</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stage-intro {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: var(--vp-c-bg-mute);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stage-role {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stage-tags span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-card:hover .stage-tags span {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
À travers ce parcours d'apprentissage complet, vous acquerrez :
|
||||
|
||||
- **Compétences en développement Vibe Coding :** Maîtrisez la mentalité du Vibe Coding et les outils de codage AI pour multiplier votre efficacité de développement. Au lieu de mémoriser la syntaxe, apprenez à guider l'IA pour qu'elle génère du code de haute qualité.
|
||||
- **Compétences en développement full-stack :** De la conception UI à l'implémentation frontend, de la conception de base de données au développement d'API, du développement local au déploiement cloud, maîtrisez la stack technologique complète des applications Web modernes.
|
||||
- **Intégration de capacités AI :** Apprenez à appeler diverses API AI multimodales, intégrez de manière transparente les capacités AI de texte, image et voix dans vos applications, et construisez des produits intelligents grâce à des technologies comme le RAG.
|
||||
- **Réflexion produit et compétences opérationnelles :** De la recherche utilisateur à la décomposition des besoins, de la conception MVP à l'itération produit, de l'intégration des paiements à la gestion des utilisateurs, formez un cycle complet de développement et d'exploitation de produits.
|
||||
|
||||
# Que pourrez-vous faire après avoir appris ?
|
||||
|
||||
## Première étape : Créer votre premier prototype de produit
|
||||
|
||||
Cette étape est destinée à ceux qui n'ont aucune base en programmation, ou qui n'en ont qu'une petite mais manquent de confiance. Vous n'avez pas besoin d'apprendre d'abord beaucoup de théorie — vous apprenez directement en pratiquant, en utilisant des outils AI pour écrire du code.
|
||||
|
||||
**Après avoir appris, vous pourrez :**
|
||||
- Utiliser des outils de programmation AI pour réaliser indépendamment une application web
|
||||
- Transformer une idée produit en un prototype cliquable et interactif
|
||||
- Ajouter des fonctionnalités AI à votre prototype (par exemple, génération d'images à partir de texte, conversation intelligente)
|
||||
- Savoir comment diagnostiquer et résoudre les erreurs
|
||||
|
||||
En bref, vous serez capable de créer quelque chose qui « fonctionne et peut être montré à d'autres ».
|
||||
|
||||
Nous pouvons d'abord découvrir la programmation AI à travers des petits jeux, puis apprendre à utiliser des outils de programmation AI pour vous aider à écrire du code et corriger les erreurs. Ensuite, en commençant par des pages simples, nous réaliserons progressivement des applications multi-pages interactives, puis ajouterons des fonctionnalités AI comme la génération d'images à partir de texte et les conversations intelligentes. Enfin, vous réaliserez indépendamment un projet complet, donnant à vos idées une véritable chance de se concrétiser.
|
||||
|
||||
# Pourquoi utiliser une approche par projets pour s'entraîner ?
|
||||
|
||||
> **Les défis du monde réel**
|
||||
>
|
||||
> La raison est en fait assez simple : dans l'état actuel de la plupart des étudiants, entrer directement dans le monde professionnel signifierait se faire rudement « corriger » par les projets réels et les patrons / clients. Les scénarios les plus courants dans le monde réel sont plutôt :
|
||||
|
||||
> Votre mentor / patron : Nous devons créer un xxx, l'objectif est d'atteindre l'effet yyy.
|
||||
>
|
||||
> Documentation ? Framework existant ? Spécifications détaillées ? Bien souvent, rien de tout cela n'existe.
|
||||
|
||||
De nombreuses tâches dans le travail réel consistent essentiellement à résoudre des problèmes jamais vus auparavant dans un environnement hautement incertain : les besoins sont flous, les périmètres évoluent, personne ne vous donne de réponse standard. Vous devez chercher vous-même des informations, faire des expériences, construire des prototypes, itérer constamment, et finalement proposer une solution « qui fonctionne, qui est utilisable et qui peut être mise en ligne ».
|
||||
|
||||
Ce que ce cours cherche à faire, c'est de vous donner une « simulation de correction du monde réel » dans un environnement relativement sûr :
|
||||
|
||||
- Par des projets qui semblent difficiles, vous forcer à pratiquer la décomposition de problèmes, la conception de solutions et la recherche autonome d'informations
|
||||
- Par des outils et du code qui ne sont pas « simplifiés à l'extrême », vous apprendre à lire, comprendre et modifier une base de code de taille moyenne à grande
|
||||
- Par un cycle complet de l'idée à la mise en ligne, vous faire vivre le processus complet de création d'un produit de 0 à 1
|
||||
|
||||
À court terme, cet entraînement est effectivement exigeant ; mais à long terme, il augmentera considérablement votre compétitivité dans votre recherche d'emploi et votre évolution professionnelle : vous serez plus capable de supporter la pression, de trouver des percées dans des environnements incertains, et plus capable de transformer l'IA en produits réellement déployés, au lieu de rester au stade des « démos ».
|
||||
|
||||
# L'art de poser des questions : une compétence essentielle à l'ère de l'IA
|
||||
|
||||
À l'ère de l'IA, savoir poser des questions est aussi une « compétence fondamentale ». Pour un même code, une même erreur, **la façon dont vous posez la question détermine presque la qualité de la réponse que l'IA peut donner** : une réponse générique ou une correction étape par étape applicable.
|
||||
|
||||
**Prenez une bonne habitude :** intégrez « poser des questions à l'IA » dans votre flux de développement quotidien : dès que vous ne comprenez pas quelque chose ou que vous êtes bloqué, posez la question immédiatement.
|
||||
|
||||
## Pourquoi est-ce une compétence essentielle ?
|
||||
|
||||
- **Rarement il existe une documentation complète dans la réalité** : la plupart du temps, vous êtes confronté à des besoins imprécis, du code à moitié fini, des messages d'erreur épars
|
||||
- **L'IA est votre mentor et collègue de toujours** : une personne qui sait poser des questions peut en faire un « pair programming de haute qualité »
|
||||
- **La limite de vos capacités est déterminée par votre communication** : plus vous fournissez d'informations clés et plus vous contraignez le format de sortie, plus la réponse sera utilisable
|
||||
|
||||
**Malentendu courant :** poser simplement « pourquoi ça plante ? » ne donnera souvent que des suppositions. Complétez le contexte pour obtenir des solutions actionnables.
|
||||
|
||||
## Comment « nourrir » l'IA en informations : capture d'écran vs copier-coller
|
||||
|
||||
Les deux méthodes fonctionnent, mais pour des usages différents :
|
||||
|
||||
| Méthode | Scénarios appropriés | Points clés |
|
||||
| ------------ | --------- | --------- |
|
||||
| **Copier-coller** | Piles d'erreurs, logs, code, configuration, réponses d'API | Copiez le plus complètement possible, ne vous contentez pas d'une seule ligne clé |
|
||||
| **Capture d'écran** | Problèmes de mise en page UI, anomalies d'interaction, interface d'outil où vous ne trouvez pas un bouton | Capture d'écran complète + annotation des zones importantes, idéalement avec une brève description textuelle |
|
||||
|
||||
::: danger ⚠️ Prérequis important
|
||||
**Tous les modèles AI ne prennent pas en charge l'entrée d'images.** La communication par capture d'écran nécessite que l'IA possède des capacités multimodales (c'est-à-dire la capacité de comprendre et d'analyser des images). Les AI prenant actuellement en charge l'entrée d'images incluent : Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google), ainsi que certains modèles chinois comme Qwen, ERNIE Bot, etc.
|
||||
|
||||
**Si l'IA que vous utilisez ne prend pas en charge l'entrée d'images**, les captures d'écran ne pourront pas être reconnues. Dans ce cas, utilisez plutôt la méthode du copier-coller de texte.
|
||||
:::
|
||||
|
||||
## Techniques de prompt pour que l'IA « explique bien »
|
||||
|
||||
Si vous ne voulez pas seulement la réponse, mais « comprendre » la réponse, utiliser des instructions similaires à celles ci-dessous améliorera significativement la qualité des explications :
|
||||
|
||||
> **Exemple de question d'apprentissage**
|
||||
>
|
||||
> - « Explique-moi d'abord ce concept en 5 phrases, puis pose-moi quelques questions pour vérifier que j'ai bien compris. »
|
||||
> - « Explique-moi en détail ce message d'erreur, je ne comprends pas pourquoi cela plante. »
|
||||
|
||||
# J'ai persévéré longtemps mais je n'y arrive toujours pas, je veux abandonner
|
||||
|
||||
C'est peut-être votre méthode de persévérance qui n'est pas la bonne. Ne vous débattez pas seul dans le noir — venez discuter avec les auteurs et les assistants : exposez honnêtement les méthodes que vous avez déjà essayées, les blocages spécifiques que vous rencontrez, et votre état psychologique actuel. Très souvent, un léger ajustement de direction ou l'ajout d'une connaissance clé vous permettra de continuer à avancer.
|
||||
|
||||
# Je trouve que certains aspects du tutoriel ne sont pas bien conçus
|
||||
|
||||
N'hésitez pas à contacter les auteurs, à soumettre une issue, ou à faire part de vos retours dans le groupe ou en cours. Nous espérons vraiment travailler avec vous pour perfectionner ce tutoriel : ce qui n'est pas clair, ce qui donne une mauvaise expérience, ce qui vous fait perdre du temps inutilement — tout cela peut être signalé franchement. Plus les retours sont authentiques et spécifiques, plus ils aideront les futurs apprenants à éviter les pièges.
|
||||
|
||||
# Références
|
||||
|
||||
- [Université de Nanking, Département d'informatique, Fondamentaux des systèmes informatiques, Travaux pratiques](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Que pouvez-vous apprendre ensuite"
|
||||
description="Continuez à progresser selon le parcours « de savoir utiliser l'IA à savoir créer des produits »."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
+6
-6
@@ -9,7 +9,7 @@ import { withBase } from 'vitepress'
|
||||
const WELCOME_SEEN_KEY = 'easy-vibe-welcome-seen'
|
||||
|
||||
onMounted(() => {
|
||||
// 语言映射：浏览器语言代码 -> 网站路径
|
||||
// Language map: browser language code -> site path
|
||||
const langMap = {
|
||||
'zh': '/zh-cn/',
|
||||
'zh-cn': '/zh-cn/',
|
||||
@@ -34,14 +34,14 @@ onMounted(() => {
|
||||
'vi-vn': '/vi-vn/'
|
||||
}
|
||||
|
||||
// 获取浏览器语言
|
||||
// Get browser language
|
||||
const browserLang = navigator.language.toLowerCase()
|
||||
const browserLangShort = browserLang.split('-')[0]
|
||||
|
||||
// 确定目标语言
|
||||
// Resolve target language
|
||||
let targetLang = langMap[browserLang] || langMap[browserLangShort]
|
||||
|
||||
// 如果没有匹配的语言，默认使用中文
|
||||
// Fallback when no match
|
||||
if (!targetLang) {
|
||||
targetLang = '/zh-cn/'
|
||||
}
|
||||
@@ -61,8 +61,8 @@ onMounted(() => {
|
||||
return
|
||||
}
|
||||
|
||||
// 立即跳转，不显示任何内容
|
||||
// 使用 withBase 自动处理 base 路径（根据 config.mjs 中的配置）
|
||||
// Redirect immediately without rendering content.
|
||||
// Use withBase to handle base path (see config.mjs).
|
||||
window.location.replace(targetPath)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
# プロジェクト紹介
|
||||
|
||||
2025年は、多くの人にとってAIプログラミングの元年と呼ばれています。AIを使ってコードを書く人が増えていますが、その多くはまだおもちゃレベルにとどまっています。Vibe Codingで開発プロセスをどう組むか、どのツールを選ぶべきか、プロトタイプから本番運用までに何が足りないのか、わからないことが多いでしょう。
|
||||
|
||||
私たちは段階的な**三段階の実践パス**を採用しています。初心者向けステージではミニゲームでAIプログラミングに素早く慣れ、第一段階ではVibe Codingのワークフローを身につけWebアプリケーションのプロトタイプを完成させ、第二段階ではフルスタック開発とデプロイを学び、第三段階ではクロスプラットフォームの複雑なアプリケーションを構築します。
|
||||
|
||||
各ステージには完全なプロジェクト実践が含まれており、実際の課題の中でおもちゃから製品へと進化し、最終的に**どんなアイデアも実用アプリとして具現化する能力**を身につけます。
|
||||
|
||||
私たちは、Vibe Codingをマスターし、体系的なトレーニングを積めば、一人で**フロントエンド・バックエンド開発、AI能力の統合、プロダクトデザインを兼ね備えたオールラウンド開発者**になれると信じています。
|
||||
|
||||
本プロジェクトは主に3種類の学習者を対象としています：
|
||||
|
||||
- **初心者（一般の方 / プロダクト・運営側）**：非技術背景の方や入門学習者が重要な概念を理解し、最初のAI小ツールやプロダクトプロトタイプを完成させるのを支援します。
|
||||
- **初中級開発者（基礎のある学生や開発者）**：vibe codingとネイティブAIアプリケーション開発を体系的に習得します。
|
||||
- **上級開発者（企業・スタートアップ、オープンソース・独立開発者）**：チームや個人がネイティブAIアプリケーションを迅速に構築・検証・反復できるよう支援します。
|
||||
|
||||
## 📖 コンテンツナビゲーション
|
||||
|
||||
### 総付録
|
||||
|
||||
[AI能力辞典：一般的なAIコア概念と用語、シナリオの解説](/ja-jp/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### ゼロ、ようちえん
|
||||
|
||||
| 章节 | キーコンテンツ | 状態 |
|
||||
| :--- | :--- | :--- |
|
||||
| [初心者向け：学習マップ](/ja-jp/stage-1/learning-map/) | 全体学習パスガイド | ✅ |
|
||||
| [初心者向け：AI時代、話せばプログラミング](/ja-jp/stage-1/ai-capabilities-through-games/) | 貪食蛇などのケースでAIプログラミングの能力を初体験 | ✅ |
|
||||
|
||||
### 一、AIプロダクトマネージャー
|
||||
|
||||
| 章节 | キーコンテンツ | 状態 |
|
||||
| :--- | :--- | :--- |
|
||||
| [初級二：AI IDEツールを知る](/ja-jp/stage-1/introduction-to-ai-ide/) | IDEの使い方を学び、インターフェース構造と効率的なプロンプト方法を習得 | ✅ |
|
||||
| [初級三：プロトタイプを作る](/ja-jp/stage-1/building-prototype/) | プロダクト分析の分解から、マルチページプロダクトプロトタイプ実装までの完全ループ | ✅ |
|
||||
| [初級四：プロトタイプにAI能力を追加](/ja-jp/stage-1/integrating-ai-capabilities/) | 一般的なAI能力（テキスト・画像・動画）のAPI導入を理解し完了 | ✅ |
|
||||
| [初級五：完全プロジェクト実践](/ja-jp/stage-1/complete-project-practice/) | 実シナリオのシミュレーション、ユーザーフィードバックの反復とプロジェクト発表（課題あり） | ✅ |
|
||||
|
||||
#### 付録
|
||||
|
||||
| 章节 | キーコンテンツ | 状態 |
|
||||
| :--- | :--- | :--- |
|
||||
| [付録A：プロダクト思考補足](/ja-jp/stage-1/appendix-a-product-thinking/) | アイデア評価からニーズ分解、MVPまでのプロダクト思考フレームワーク | ✅ |
|
||||
| [付録B：よくあるエラーと解決策](/ja-jp/stage-1/appendix-b-common-errors/) | vibe codingでのよくあるエラーとトラブルシューティング方法 | ✅ |
|
||||
| [付録：アイデアの探し方](/ja-jp/stage-1/appendix-idea-sources/) | 参考アプリ、トレンド、VCリストから細分化方向を見つける | ✅ |
|
||||
| [付録：ダブルダイヤモンドモデル](/ja-jp/stage-1/appendix-double-diamond/) | まず問題を定義し、それからソリューション設計を展開する完全リズムを理解 | ✅ |
|
||||
| [付録：Jobs to Be Done](/ja-jp/stage-1/appendix-jobs-to-be-done/) | JTBD手法でユーザーが本当に達成したいことを見極める | ✅ |
|
||||
| [付録：The Mom Testユーザーインタビュー法](/ja-jp/stage-1/appendix-mom-test/) | ユーザーインタビューを通じてニーズを検証する調査方法 | ✅ |
|
||||
|
||||
### 二、初中級開発エンジニア
|
||||
|
||||
#### フロントエンド部分
|
||||
|
||||
| 章节 | キーコンテンツ | 状態 |
|
||||
| :--- | :--- | :--- |
|
||||
| lovartで素材制作 | lovartを使って人物、シーンなどのビジュアル素材を一括生成し、UIデザインとフロントエンド開発に素材基盤を提供 | 🚧 |
|
||||
| FigmaとMasterGo入門 | デザインツールで情報アーキテクチャとページ構造を整理し、フロントエンド実装の基盤を作る | 🚧 |
|
||||
| 最初のモダンアプリケーション構築 - UIデザイン | デザインカンプに基づいてコンポーネント化インターフェースを完成し、デザインからコードへの最初のリンクを実現 | 🚧 |
|
||||
| UIデザイン仕様を参考にページとボタンを設計 | 主要なデザイン仕様を使ってページ構造、ボタン階層を整理し、AIでデザイン案を生成する方法を学ぶ | 🚧 |
|
||||
| [ホグワーツの肖像画を一緒に作ろう](/ja-jp/stage-2/frontend/hogwarts-portraits/) | ゼロからAI能力を組み込んだフロントエンドアプリを作り、デザインと開発を連携させる | 🚧 |
|
||||
|
||||
#### バックエンド開発部分
|
||||
|
||||
| 章节 | キーコンテンツ | 状態 |
|
||||
| :--- | :--- | :--- |
|
||||
| APIとは何か | HTTPインターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携の準備 | 🚧 |
|
||||
| [データベースからSupabaseまで](/ja-jp/stage-2/backend/database-supabase/) | SupabaseでデータベースとAPIを構築し、データモデルとフロントエンドページを接続 | 🚧 |
|
||||
| 大規模モデルでインターフェースコードとドキュメントを支援 | 大規模モデルでインターフェースとデータベースのドキュメントおよびコードを生成し、読みやすくテスト可能なバックエンドを実現 | 🚧 |
|
||||
| GitワークフローとZeaburデプロイ | Gitワークフローでコードを管理し、アプリケーションをZeaburにデプロイして公開 | 🚧 |
|
||||
| モダンCLI開発ツール | CLI系AIプログラミングツールで開発とデバッグを加速し、個人のエンジニアリングワークフローを形成 | 🚧 |
|
||||
| stripeなどの決済システムの統合方法 | 決済システムを導入し、課金フローと基本決済プロセスを完了 | 🚧 |
|
||||
| 最初のモダンアプリケーション構築 - フルスタックアプリ | フロントエンド、バックエンド、決済モジュールを統合し、デプロイ可能なフルスタックWebアプリを完成 | 🚧 |
|
||||
| モダンフロントエンドコンポーネントライブラリ + Trae実戦 | モダンフロントエンドコンポーネントライブラリとTraeを使い、ログイン登録と課金対応のプロダクトを独立して完成 | 🚧 |
|
||||
|
||||
#### AI能力付録
|
||||
|
||||
| 章节 | キーコンテンツ | 状態 |
|
||||
| :--- | :--- | :--- |
|
||||
| [Dify入門とナレッジベース統合](/ja-jp/stage-2/ai-capabilities/dify-knowledge-base/) | Dify Workflowと基本RAGでツール系プロダクトを構築し、今後のアプリアップグレードのサンプルを作成 | 🚧 |
|
||||
| AI辞典の調べ方とマルチモーダルAPIの統合を学ぶ | 適切なモデルとAPIの調べ方を学び、テキスト、画像などのマルチモーダル能力をプロダクトに組み込む | 🚧 |
|
||||
|
||||
### 三、上級開発エンジニア
|
||||
@@ -0,0 +1 @@
|
||||
../../../zh-cn/stage-1/ai-capabilities-through-games/images
|
||||
@@ -0,0 +1,765 @@
|
||||
# 初級一：AI 時代、話せるならプログラミングできる
|
||||
|
||||
これは**プロジェクトベースの学習**チュートリアルです。ステップに沿って操作し、結果を再現してみましょう。
|
||||
間違えても気にしないでください。私たちはあなたができると信じています。常に覚えておいてください：
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
|
||||
<span style="font-size: 15px; font-weight: 500; color: #666;">完成は完璧より重要 🐣</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = '約 <strong>4 時間</strong>、複数回に分けて完了可能'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['zh-cn/stage-1/ai-capabilities-through-games'] ?? []
|
||||
</script>
|
||||
|
||||
## 本章のガイド
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['対話型 AI プログラミング', 'AI ネイティブミニゲーム', 'スネークゲーム実践']" coreOutput="AI ネイティブスネークゲーム + 自作ミニゲーム" expectedOutput="1つの動作する AI ネイティブスネークゲーム +（オプション）1つの自作 AI ネイティブミニゲームまたはデモ">
|
||||
|
||||
<strong>完全にプログラミングができない</strong>、あるいは少ししか知らない場合、この章はあなたのために用意されています。最も基礎的なところから始めます：<strong>対話方式で</strong>AI にコードを書かせます。構文を覚える必要はなく、環境設定も不要で、Web ページ上で直接実行できます。
|
||||
|
||||
最初の<strong>動作するプログラム</strong>——「単語を食べ、詩を書き、絵を描く」スネークゲームを自分で作ります。この実践を通じて、AI プログラミングが実際にどのようなものかを体験します。AI があなたの思考を代わりにするのではなく、あなたがアイデアを言葉にし、AI がそれを実現してくれます。
|
||||
|
||||
すべての創造は 0 から 1 へのスタートです。あなたに自信と専門性を伝えられたら嬉しいです。あなたにとっては、<strong>実行力 is all you need</strong>。
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: '課題と機会', description: '一般人のプログラミングの新たな可能性' },
|
||||
{ title: '能力の初探', description: '60秒の高速開発体験' },
|
||||
{ title: 'ネイティブ実践', description: 'AI ネイティブスネークゲームを作る' },
|
||||
{ title: '創造の拡張', description: '応用してゲームを作る' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. 一般人の課題と機会
|
||||
|
||||
多くの人は頭の中にたくさんのプロダクトアイデアを持っています：家計簿ツール、子供の成長を記録するウェブページ、あるいは小さなゲームなど。しかし、コードを書いたりプログラマーを探したりすることを考えると、すぐに諦めてしまいます。
|
||||
|
||||
AI の登場により、初めて一般人に全く新しい可能性がもたらされました。コードを書く必要はなく、AI に自分が欲しいものを明確に伝えるだけでいいのです。GitHub Copilot からの[データ](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics)によると、1500万人以上の開発者が AI 補助プログラミングを使用しており、平均46%のコードが AI によって生成されています。Java プロジェクトではこの割合は61%に達します。
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">🚀</span>
|
||||
<span style="font-weight: bold; font-size: 16px;">効率と採用率の飛躍</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" style="margin-bottom: 24px;">
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">速度の向上</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">日</span></div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">タスク所要時間（元9.6日）</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">初日のインストール率</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">提案採用率</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="line-height: 1.8; color: #606266;">
|
||||
本当に興奮するのは効率の飛躍です：開発者がタスクを完了する速度が <b>55%</b> 向上しました。元々 9.6 日かかっていたコードの提出が、今では <b>2.4 日</b>で完了します。この目に見える効率の向上は、AI がもはや「オプションツール」ではなく、開発プロセスに不可欠なプログラミングアシスタントになりつつあることを示しています。採用率のデータもこれを裏付けています：アクセス権を取得した当日、<b>81%</b> の開発者が最初のうちにインストールを完了し、使用を開始しました。そのうち <b>96%</b> が当日に AI が提供するコード提案を採用しました。つまり、開発者はほぼ即座に AI を日常のコーディング作業に統合しているのです。
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
一般人にとって、このトレンドはさらに意義があります：プロのプログラマーでさえ大量に AI に依存してコードを書いているなら、**プログラミングのできない私たちが、なぜ AI と対話して自分のアイデアを実現できないのでしょうか？**
|
||||
|
||||
このコースの目標は、あなたに新しいスキルを習得させることです：自然言語の対話でアプリケーションを作れるようになります。コンピュータの言葉で AI とコミュニケーションする方法、AI に頭の中のアイデアを実用的なプロダクトにする方法を教えます。
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: '課題と機会', description: '一般人のプログラミングの新たな可能性' },
|
||||
{ title: '能力の初探', description: '60秒の高速開発体験' },
|
||||
{ title: 'ネイティブ実践', description: 'AI ネイティブスネークゲームを作る' },
|
||||
{ title: '創造の拡張', description: '応用してゲームを作る' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. AI はどこまでできるか
|
||||
|
||||
このセクションでは、一つの問題だけを議論します：プログラミングが全くできない場合、現在の AI はどこまでできるのでしょうか？
|
||||
|
||||
大まかに言えば、現在の大規模モデルの能力は次のように理解できます：**シンプルな社内ツール**、**データ可視化ダッシュボード**、および一部の**軽量ミニゲーム**の開発に対応できます。これらの能力は、**個人用ツール**の作成や、**プロダクトマネージャーの視点からのニーズ検証**には基本的に十分です。ただし、ワンクリックで**商用レベルの完成品**を生成したい場合、通常は**プロセス設計**や**ディテールの仕上げ**において人手による継続的な最適化が必要です。
|
||||
|
||||
次に、スネークゲームを例に、AI プログラミングが現在どこまでできるかを具体的に見てみましょう。
|
||||
|
||||
### 2.1 60秒でスネークゲームを作る
|
||||
|
||||
まず、コースで使用する実験用ウェブページ [z.ai](https://chat.z.ai/) を開いてください。`z.ai` は智譜 AI（中国を代表する大規模言語モデル企業の一つ）が開発した AI プラットフォームで、その中核能力は智譜が自社開発した GLM シリーズの大規模モデルによって支えられています。このプラットフォームはスライド生成、ポスターデザイン、フルスタック開発など、複数の AI 機能を統合しています。このチュートリアルでは、そのフルスタック開発モジュールの使用に焦点を当てます。
|
||||
|
||||
::: details 💡 「Web ページでプログラミングできる」とは？
|
||||
|
||||
過去、Web アプリケーションを開発するには：
|
||||
- プログラミング環境のインストール（Python、Node.js など）
|
||||
- コードエディタの設定
|
||||
- HTML/CSS/JavaScript などの言語の学習
|
||||
- 各種依存関係やエラーの処理
|
||||
|
||||
しかし今は、AI プログラミングプラットフォームを使えば、次のことだけが必要です：
|
||||
- ブラウザを開き、Web ページにアクセスする
|
||||
- 自然言語で欲しい機能を説明する
|
||||
- AI が自動的にコードを生成し、リアルタイムでプレビューする
|
||||
|
||||
この「対話即プログラミング」のモードにより、プログラミングは「コードを書く」ことから「要件を説明する」ことになりました。あなたは技術的な詳細を気にする必要がなく、AI に欲しいものを明確に伝えるだけで、アイデアを実行可能なプログラムに変えてくれます。これが AI 時代のプログラミングの新しいパラダイム——**Vibe Coding（バイブコーディング）**です。
|
||||
:::
|
||||
|
||||
|
||||
|
||||
シンプルな要件を入力して**フルスタック開発**ボタンをクリックすると、Web ページの完全な作成プロセスをリアルタイムで見ることができます。通常、コーヒーを淹れる時間で Web ページが自動的に生成されます！
|
||||
|
||||
```
|
||||
スネークゲームを作ってください：
|
||||
1. 方向キーで蛇の移動を制御
|
||||
2. 食べ物を食べると蛇が長くなり、スコアが増加
|
||||
3. 壁や自分の体にぶつかるとゲームオーバー
|
||||
4. スタートとリスタートボタンを付ける
|
||||
5. シンプルで美しいインターフェース
|
||||
```
|
||||
|
||||
|
||||
|
||||
生成が完了すると、右側にブラウズ可能な Web ページのインターフェースが表示されます。ページのコンテンツを上下にスクロールしたり、ページ上部の 🧭 ボタンをクリックしてフルスクリーンモードに切り替えて効果を確認したりできます。
|
||||
|
||||
> 上部の左から右へのボタンの役割はそれぞれ：矢印ボタンはサイドバーの対話履歴を展開、鉛筆ボタンは新しい対話を作成、ループ矢印ボタンはページをリロード、コンパスボタンはフルスクリーンモードに切り替え、Download ボタンはプロジェクトをダウンロード、<> ボタンはコードビューに切り替え、Publish ボタンはプロジェクトを公開。
|
||||
|
||||
|
||||
|
||||
この Web ページのソースコードを表示したい場合は、右上隅のコードアイコンをクリックして完全なコードを確認できます。
|
||||
|
||||
|
||||
|
||||
::: tip 🌐 他の AI プログラミングツールを探索
|
||||
|
||||
z.ai のほかに、以下の優れた AI プログラミングプラットフォームもおすすめです：
|
||||
|
||||
| ツール | URL | 特徴 |
|
||||
|------|------|------|
|
||||
| **Google AI Studio**（おすすめ） | [aistudio.google.com/apps](https://aistudio.google.com/apps) | Google 公式、Gemini モデル対応、高速プロトタイプ開発に最適 |
|
||||
| **Figma Make** | [figma.com/make](https://www.figma.com/make) | デザインツールとの深い統合、デザイナー向けのインタラクティブプロトタイプに最適 |
|
||||
| **Coze** | [coze.com](https://www.coze.cn) | ByteDance の AI Bot 開発プラットフォーム、ノーコードのビジュアル構築機能。豆包、Kimi などの中国産大規模モデルと深く統合、プラグインマーケットプレイス、スケジュールタスク、マルチチャネル配信（Feishu、WeChat など）をサポート |
|
||||
| **v0.dev** | [v0.dev](https://v0.dev) | Vercel の AI UI 生成ツール、説明を入力するだけで実行可能な React コンポーネントを生成 |
|
||||
| **Bolt.new** | [bolt.new](https://bolt.new) | StackBlitz の AI フルスタック開発プラットフォーム、完全な Web アプリケーションを直接生成・デプロイ可能 |
|
||||
| **Lovable** | [lovable.dev](https://lovable.dev) | 高品質な React アプリの生成に特化、GitHub 統合とワンクリックデプロイをサポート |
|
||||
| **Replit Agent** | [replit.com](https://replit.com) | AI プログラミングアシスタントを統合したオンライン IDE、複数言語とリアルタイムコラボレーションをサポート |
|
||||
|
||||
他の Web プログラミングツールの詳細な比較と使用チュートリアルについては、拡張読み物を参照してください：[7 つの主流 Vibe Coding オンラインプラットフォーム実測比較](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
|
||||
:::
|
||||
|
||||
### 2.2 対話型プログラミングでできること・できないこと
|
||||
|
||||
このセクションでは、一つの具体的な問題に焦点を当てます：対話型 AI のみに依存し、コードを一切書かない場合、一体どこまで進めることができるのか。
|
||||
経験則として、比較的安定した結論は次のとおりです：「小さくて完成度の高い」ものを作ることはできますが、「どこまでやれば十分か」は、あなたが各ステップの詳細を自分で判断する必要があります。
|
||||
|
||||
#### 「小さくて明確な」アプリに適している
|
||||
|
||||
前のスネークゲームの例からわかるように、典型的なパターンがあります：
|
||||
インターフェースとインタラクションを明確に説明できれば、AI は通常、数回の対話で、開ける、クリックできる、遊べる完全な Web ページを組み立てることができます。
|
||||
|
||||
この種のタスクにはいくつかの共通特徴があります：
|
||||
|
||||
- 範囲が明確：1ページの Web ページ、シンプルな社内ツール、小さなゲーム
|
||||
- 結果が見える：ブラウザで期待通りに動作するかすぐに確認できる
|
||||
- 修正が直接的：問題を見つけた後、後続の対話で具体的な現象を指摘し修正を求めることができる（エラーをコピーして貼り付けたり、スクリーンショットを貼り付けたりして AI に修正させる）
|
||||
|
||||
この範囲内では、対話型 AI を実行力のある「アシスタント開発者」と見なすことができます。各ラウンドで自然言語を使って要件を細分化・修正するだけで、素早く使えるプロトタイプを得ることができます。
|
||||
|
||||
**AI が単独で小規模プロジェクトを完了する成功率：**
|
||||
<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
|
||||
|
||||
#### 大規模プロジェクトには「プロセスの視点」が必要
|
||||
|
||||
小さくて明確な範囲を超えると、数回の対話だけで AI に複雑なシステムをエンドツーエンドで完成させることは、すぐに限界に達します。大規模プロジェクトは多くの場合、バックエンド、データベース、サードパーティサービスの統合が必要で、権限、セキュリティ、同時実行、大量のビジネスルールも関係し、1ページの Web ページではなく、既存のビジネスと深く統合されたシステム全体の構築が目標です。
|
||||
|
||||
この場合、より合理的なアプローチは、すべての要件を一度に AI に投げるのではなく、まず明確な全体プロセスを整理することです：重要なステップは何か、各ステップの入力・出力と状態変化は何か、どのノードがパフォーマンスとセキュリティに最も敏感か。このフローチャートに基づいて、比較的独立した部分を分割し、対話型 AI にインターフェース、モジュール、スクリプト、テストの生成を任せます。
|
||||
|
||||
現在の能力では、AI は一つ一つの小さなステップを加速するのに適しており、あなた（またはチーム）がステップの分割方法、連携方法を決定し、最終的なアーキテクチャ設計、システム統合、運用保守を担当します。
|
||||
|
||||
#### 「書ける」ことと「使える」ことの違い
|
||||
|
||||
一見すると、AI は何でも書けるように見えますが、これらが本当に使えるのか、どこまで使えるのか、どのように区分すべきでしょうか？
|
||||
|
||||
一つの参考となる経験則は次のとおりです：
|
||||
|
||||
::: warning ⚠️ 適用シナリオガイド
|
||||
|
||||
- **プロトタイプ / デモ / 社内ツール**：まず AI に初版を作らせ、その後あなたがディテールを反復するのに非常に適しています。
|
||||
- **実際のユーザー向けの大規模プロダクト**：通常、エンジニアがアーキテクチャ、抽象化、パフォーマンス、保守に長期的に取り組む必要があります。
|
||||
- **高セキュリティ / 高コンプライアンスシステム（決済、リスク管理、医療など）**：現段階では「生成してそのまま本番稼働」は推奨されず、厳格なレビューとテストプロセスを導入する必要があります。
|
||||
:::
|
||||
|
||||
現在、AI を効率的なデモと個人用ツールのパートナーとして比較的安心して見なすことができます：
|
||||
十分にテストし、反復し、「ここが違う、修正して理由を説明して」と何度も聞けば、プロトタイプと社内ツールのレベルでは、全体的な品質は通常十分であり、実践的な価値があります。
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: '課題と機会', description: '一般人のプログラミングの新たな可能性' },
|
||||
{ title: '能力の初探', description: '60秒の高速開発体験' },
|
||||
{ title: 'ネイティブ実践', description: 'AI ネイティブスネークゲームを作る' },
|
||||
{ title: '創造の拡張', description: '応用してゲームを作る' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. 実践：あなた初の AI ネイティブアプリケーション
|
||||
|
||||
実践パートに戻りましょう。前半では、AI を使って遊べるスネークゲームのプロトタイプを素早く作成し、AI が何ができて何ができないかを大まかに理解しました。次に、最も基本的な **vibe coding** のテクニックを使って、**現代版**の AI スネークゲームを作成する方法を学びます。蛇が豆ではなく文字を食べるようにします。最後に、ゲームが食べた文字に基づいて詩を生成し、絵を描かせます。
|
||||
この実際のケースを通じて、新しいプログラミング方法の核心理念を理解できます：自然言語で要件を明確に表現する方法を学びます。
|
||||
|
||||
### 3.1 AI ネイティブスネークゲーム
|
||||
|
||||
最初は、最もシンプルな方法で大規模モデルと対話します。これにより、迅速にプロダクトプロトタイプを得ることができます。チャットボックスに直接入力できます：
|
||||
|
||||
> **💡 プロンプト例：** スネークゲームを作ってください
|
||||
>
|
||||
> 
|
||||
|
||||
> **💡 プロンプト例：** スネークゲームを作ってください。以下の機能をサポートしてください
|
||||
>
|
||||
> 1. さまざまな単語を食べることができ、それらがボックスに収集されます
|
||||
> 
|
||||
|
||||
> **💡 プロンプト例：** スネークゲームを作ってください。以下の機能をサポートしてください：
|
||||
>
|
||||
> 1. さまざまな単語を食べることができ、それらがボックスに収集されます
|
||||
> 2. 蛇が8つの単語を食べると、LLM がそれらの単語に基づいて詩を作成し、必要に応じて詩を再ミックスできます
|
||||
> 3. 詩が完成したら、次のステップでその詩に基づいて画像が自動的に作成されます
|
||||
>
|
||||
> 
|
||||
|
||||
注意：開発中に期待通りにいかない問題に遭遇する場合があります。ボタンをクリックしても反応がない、機能使用時にエラーが発生する、機能が期待通りに動作しない、またはフロントエンドページが期待したデザインと一致しないなどです。
|
||||
|
||||
この場合、モデルにさらに質問して、これらの予期せぬ問題を修正するよう助けてもらう必要があります。
|
||||
|
||||
|
||||
|
||||
### 3.2 ゲームに新機能を追加する
|
||||
|
||||
基本機能が完成したら、プログラムに新しい工夫を追加してみましょう。蛇が単語や文字を食べるプロセスが少し退屈だと思うなら、蛇に異なる色の単語を食べさせ、それに応じて蛇の色を変えることができます。
|
||||
|
||||
また、「食べる」プロセスにエフェクトを追加したり、エフェクトをトリガーするマジックワードを導入したりすることもできます。たとえば、蛇の速度やサイズを増やすなど。別のアイデアとして、蛇が単語を食べるたびにモデルに詩と画像を生成させることもできます。8つの単語を食べるまで待つ必要はありません。
|
||||
|
||||
これが難しいと思うなら、言語モデルに直接助けを求めることができます。創造的な提案を出して、ゲームをより面白くしてくれます。試してみてください！
|
||||
|
||||
```
|
||||
1. "単語が世界をアンロック" メカニズム
|
||||
蛇が単語を食べるたびに、LLM がその単語に対して詩的な連想を行い（例：「木」→「森」「緑陰」）、画像モデルがその単語の小さなアートワークを即座に生成します。これらの画像は徐々にユニークなパノラマを構成し、プレイヤーは毎回プレイするたびに「絵を描き、詩を書いている」ことになります。
|
||||
|
||||
2. "詩のパズル" プレイ
|
||||
蛇が食べた各単語が LLM に短い詩の行を生成させ、画像モデルが挿絵を生成します。これらの詩と画像はパズルのように組み合わされ、ラウンド終了時に AI コラボレーションの詩と絵になります。
|
||||
|
||||
3. "マジックワード" & "ストーリー分岐"
|
||||
特別な「マジックワード」（例：「風」「夜」「夢」）は、LLM に詩を生成させるだけでなく、シーンの雰囲気やテーマを変えます——画像生成のスタイルを夜、嵐、夢の雰囲気に切り替えます。
|
||||
分岐ストーリー：LLM は開始時にテーマやなぞなぞ（例：「秋の思い出」）を提示します。プレイヤーの単語選択がストーリーと詩の進化に直接影響し、画像モデルはリアルタイムで背景とビジュアル効果を更新します。
|
||||
|
||||
4. "リアルタイムインタラクティブ生成"
|
||||
各単語の後、LLM が一行の対話や説明を生成し、ゲーム内の NPC がプレイヤーに「話しかけ」たり、環境に応じて変化したりします。
|
||||
蛇の外観やゲーム内の障害物は、食べた単語に基づいて視覚的に変化します。これは画像モデルのおかげです。
|
||||
|
||||
5. "創作 & シェア"
|
||||
プレイヤーはセッション終了時に AI 創作の詩と画像を保存・シェアでき、ユニークな「AI コラボレーション」を自慢できます。
|
||||
「最も美しい詩+アート」「最も創造的な単語の組み合わせ」などのランキングは、リプレイと創造性を促します。
|
||||
|
||||
6. "フレーズスネーク" チャレンジ
|
||||
リバースモード：LLM が詩の一行またはなぞなぞを提示し、プレイヤーは蛇を操作して単語を順番に食べ、文を再構成する必要があります。間違った単語を食べると、画像生成モデルによって面白いまたは芸術的な結果がトリガーされます。
|
||||
|
||||
7. "テーマレベル" & "スタイル選択"
|
||||
ゲーム開始時に、プレイヤーがテーマ（例：「童話」「SF」「唐詩」）を選択し、LLM と画像モデルの両方が単語選択、詩のスタイル、ビジュアル効果を調整し、毎回のプレイが新鮮に感じられるようにします。
|
||||
|
||||
8. "リアルタイムコラボレーション"
|
||||
特別な単語を食べると、LLM はプレイヤーにフレーズやスタイルの入力を促し、AI が対応する詩と挿絵を生成し、真の人間-AI コラボレーションを実現します。
|
||||
|
||||
9. "AI イースターエッグ & 実績"
|
||||
特定の単語の組み合わせが LLM によって特別なテーマや内部ジョーク（例：「月」「桂花」「川岸」）として認識され、レアな詩と挿絵がトリガーされ、探索を報酬します。
|
||||
|
||||
10. "成長の物語"
|
||||
蛇が成長するにつれて、LLM が連続する物語詩を生成し、画像モデルがシームレスな長巻物またはパノラマを作成し、プレイヤーは「書き、描き、遊ぶ」ことを同時に楽しめます。
|
||||
```
|
||||
|
||||
また、LLM にプロジェクトレベルのプロンプトを直接生成させるよう依頼することもできます。前のセクションでは、スネークゲームのプロンプトを自分で書きました。今回は、大規模モデルに全体フレームワークと実装パスを含むプロンプトを生成させましょう（z.ai で直接生成できます）。
|
||||
|
||||
より良いプロンプトの書き方を学びたい場合は、[プロンプトエンジニアリング付録](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering)を参照してください。
|
||||
|
||||
> AI にウェブスネークゲームを生成させたいのですが、より完全なプロンプトが必要で、結果をより印象的で面白くしたいです。詩を生成する機能を実装するスネークゲームを生成してください。また、画像生成モジュールを含める必要があります。
|
||||
|
||||
z.ai の回答は次のようになります：
|
||||
|
||||
|
||||
|
||||
このプロンプトを使ってフルスタック開発モードでプロジェクトを再生成できます：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: '課題と機会', description: '一般人のプログラミングの新たな可能性' },
|
||||
{ title: '能力の初探', description: '60秒の高速開発体験' },
|
||||
{ title: 'ネイティブ実践', description: 'AI ネイティブスネークゲームを作る' },
|
||||
{ title: '創造の拡張', description: '応用してゲームを作る' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
### 3.3 他のミニゲームを作ってみる
|
||||
|
||||
スネークゲーム以外にも、想像力を存分に発揮させましょう。
|
||||
|
||||
何でも創造できます。失敗しても最初からやり直すだけです！
|
||||
|
||||
```
|
||||
1. AI アートギャラリープラットフォーム
|
||||
説明：AI 生成アート作品を展示するオンラインギャラリー。ユーザーはアップロード、共有、コメントができます。
|
||||
機能：ユーザーアカウントシステム、アート作品のアップロードと展示、評価システム、カテゴリブラウジング、AI 生成ツール統合。
|
||||
技術的ハイライト：React/Vue フロントエンド、Node.js バックエンド、MongoDB データベース、AI API 統合。
|
||||
|
||||
2. レトロゲームアーカイブ
|
||||
説明：クラシックゲームを称えるウェブサイト。ゲームの歴史、プレイガイド、オンラインで遊べるレトロゲームを含みます。
|
||||
機能：ゲームデータベース、タイムライン展示、オンラインエミュレータ、ユーザーレビュー、ゲームコレクション機能。
|
||||
技術的ハイライト：レスポンシブデザイン、WebGL/Canvas ゲーム実装、RESTful API、ユーザー認証システム。
|
||||
|
||||
3. サステナブルライフトラッカー
|
||||
説明：エコフレンドリーなヒントとコミュニティチャレンジを通じて、ユーザーがカーボンフットプリントを追跡・削減するウェブサイト。
|
||||
機能：個人カーボンフットプリント計算機、目標設定、進捗追跡、コミュニティチャレンジ、環境知識ベース。
|
||||
技術的ハイライト：データ可視化、モバイル最適化、ソーシャル機能、プッシュ通知。
|
||||
|
||||
4. バーチャルキッチンアシスタント
|
||||
説明：AI ベースの料理指導プラットフォーム。パーソナライズされたレシピ提案とステップバイステップの料理手順を提供します。
|
||||
機能：レシピデータベース、食材認識、パーソナライズされた推薦、料理タイマー、栄養分析。
|
||||
技術的ハイライト：画像認識 API、機械学習推薦システム、音声制御、リアルタイムビデオガイダンス。
|
||||
|
||||
5. インディーミュージック発見プラットフォーム
|
||||
説明：インディーズアーティストや新進アーティストに特化した音楽ストリーミングプラットフォーム。
|
||||
機能：音楽ストリーミング、アーティストプロフィール、パーソナライズされた推薦、プレイリスト作成、コミュニティレビュー。
|
||||
技術的ハイライト：オーディオストリーミング処理、推薦アルゴリズム、ソーシャル機能、音楽可視化。
|
||||
|
||||
6. ミニマリストタスク管理システム
|
||||
説明：禅の美学を持つタスク管理ツール。シンプルさと効率的なタスク整理に焦点を当てています。
|
||||
機能：タスクの作成と分類、優先度設定、進捗追跡、チームコラボレーション、データ分析。
|
||||
技術的ハイライト：ミニマリスト UI デザイン、ドラッグ＆ドロップ機能、リアルタイム同期、クロスプラットフォーム互換性。
|
||||
|
||||
7. SF ライティングワークショップ
|
||||
説明：SF 作家のためのクリエイティブツールとインスピレーションプラットフォーム。ワールドビルディング補助とキャラクター開発ツールを含みます。
|
||||
機能：ストーリー構造ツール、キャラクタープロフィール、ワールドビルディングテンプレート、ライティング統計、コミュニティフィードバック。
|
||||
技術的ハイライト：リッチテキストエディタ、データ可視化、コラボレーティブ編集、AI 補助創作。
|
||||
|
||||
8. パーソナルナレッジグラフ
|
||||
説明：ユーザーがパーソナルナレッジネットワークを構築し、さまざまなアイデアと情報を可視化・接続するツール。
|
||||
機能：ノードの作成と接続、タグシステム、検索機能、インポート/エクスポートツール、可視化グラフ。
|
||||
技術的ハイライト：グラフデータベース、データ可視化アルゴリズム、Markdown サポート、クロスデバイス同期。
|
||||
|
||||
9. バーチャル植物園
|
||||
説明：インタラクティブな植物図鑑。ユーザーは植物の世界を探索し、バーチャルガーデンを作成できます。
|
||||
機能：植物データベース、3D 植物モデル、成長シミュレーション、ガーデニングガイド、コミュニティ展示。
|
||||
技術的ハイライト：3D レンダリング、季節変化シミュレーション、AR 統合、植物認識 API。
|
||||
|
||||
10. プログラミングチャレンジアリーナ
|
||||
説明：プログラマー向けのオンラインコンペティションプラットフォーム。さまざまな難易度レベルのプログラミングチャレンジを提供します。
|
||||
機能：チャレンジ問題、コードエディタ、自動評価、リーダーボード、学習パス。
|
||||
技術的ハイライト：コードサンドボックス環境、リアルタイム評価システム、アルゴリズム可視化、ソーシャル学習機能。
|
||||
```
|
||||
|
||||
また...ゲームが好きなら、一緒にゲームを作ってみましょう！
|
||||
|
||||
```
|
||||
1. 3D オープンワールド RPG
|
||||
説明：広大なオープンワールド、クエスト、キャラクター成長を持つファンタジー RPG。
|
||||
機能：昼夜サイクル、ダイナミック天気、スキルツリー、マルチプレイヤーコープ、クラフトシステム。
|
||||
技術的ハイライト：Three.js または Babylon.js による 3D レンダリング、サーバーサイドゲームロジック、キャラクターカスタマイズ、セーブシステム。
|
||||
|
||||
2. FPS アリーナ
|
||||
説明：高速ペースのマルチプレイヤー FPS。さまざまなゲームモードとマップを備えています。
|
||||
機能：チームデスマッチ、キャプチャーザフラグ、武器カスタマイズ、ランクマッチ。
|
||||
技術的ハイライト：WebGL/Three.js による 3D グラフィックス、マルチプレイヤーネットワークコード、ヒット検出、ボイスチャット。
|
||||
|
||||
3. AI チェス & マルチプレイヤー
|
||||
説明：AI 対戦とオンライン対戦機能を備えた本格的なチェスプラットフォーム。
|
||||
機能：AI 難易度レベル、エンドゲームチャレンジ、トーナメントモード、リプレイ分析。
|
||||
技術的ハイライト：チェスロジックライブラリ、WebSocket によるリアルタイム対戦、ELO ランキングシステム、アンチチート。
|
||||
|
||||
4. マージャンオンラインマルチプレイヤー
|
||||
説明：オンラインマルチプレイヤーとスコアリング機能を備えた伝統的な麻雀ゲーム。
|
||||
機能：複数のルールセット、プライベートルーム、ランキングシステム、リプレイ機能。
|
||||
技術的ハイライト：牌マッチングロジック、リアルタイムマルチプレイヤー、ロビーシステム、スコア追跡。
|
||||
|
||||
5. ターン制ストラテジーゲーム
|
||||
説明：グリッドベースの戦闘とユニット管理を備えたタクティカルストラテジーゲーム。
|
||||
機能：キャンペーンモード、スカーミッシュ、ユニットアップグレード、フォグオブウォー、マルチプレイヤー対戦。
|
||||
技術的ハイライト：グリッド移動システム、AI 意思決定、ターン同期、セーブ/ロードシステム。
|
||||
|
||||
6. タイムアタックレーシングゲーム
|
||||
説明：タイムアタックとコースレコードに焦点を当てた 3D レーシングゲーム。
|
||||
機能：複数のコース、車のカスタマイズ、ゴーストリプレイ、リーダーボード。
|
||||
技術的ハイライト：3D カーの物理、コースエディタ、リプレイシステム、オンラインリーダーボード。
|
||||
|
||||
7. カードバトルゲーム（デッキ構築）
|
||||
説明：プレイヤーがデッキを構築し、対戦相手と戦うストラテジーカードゲーム。
|
||||
機能：カード収集、デッキ構築、ランクマッチ、シーズンイベント。
|
||||
技術的ハイライト：カードゲームロジック、マッチメイキングシステム、AI 対戦相手、カードアニメーション。
|
||||
|
||||
8. バトルロイヤル（俯瞰 2D）
|
||||
説明：縮小するゲームエリアとルート機能を備えた俯瞰 2D バトルロイヤル。
|
||||
機能：ソロおよびスクワッドモード、武器の多様性、インゲームイベント、リーダーボード。
|
||||
技術的ハイライト：リアルタイムマルチプレイヤー、ゾーン縮小ロジック、ルート生成システム、マッチメイキング。
|
||||
|
||||
9. ホラーサバイバルゲーム（一人称）
|
||||
説明：リソース管理と脱出メカニズムを備えた一人称ホラーゲーム。
|
||||
機能：不気味な雰囲気、パズル、敵 AI、マルチエンディング。
|
||||
技術的ハイライト：ダイナミックライティング、サウンドデザイン、敵の経路探索、セーブシステム。
|
||||
|
||||
10. リズムゲーム（3D）
|
||||
説明：音楽のビートに合わせてノートを叩く 3D リズムゲーム。
|
||||
機能：複数の難易度レベル、コースエディタ、カスタム楽曲サポート、リーダーボード。
|
||||
技術的ハイライト：オーディオ分析、ビート同期、3D ノートトラック、入力タイミング検出。
|
||||
```
|
||||
|
||||
## 📚 Assignment
|
||||
|
||||
<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🎯 本章の課題：最初の AI ネイティブミニゲームを完成させる</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
このセクションでは、「対話でスネークゲームを生成」から「AI ネイティブミニゲームの設計思考の理解」までの完全なプロセスを体験しました。以下の課題は、この理解を自分の能力にするのに役立ちます。
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<strong>AI ネイティブスネークゲームを完全に再現する</strong>
|
||||
<ul>
|
||||
<li>最低限の実装：蛇が移動できる、「食べ物」を食べると長さとスコアが変化する、壁や自分の体にぶつかるとゲームオーバー。</li>
|
||||
<li>再現中、エラー現象 + エラーメッセージ + 重要なコードスニペットを一度に AI に投げ、「初心者モード」で修正してもらう練習をする。</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>（オプション）自作の AI ネイティブミニゲームまたはデモを 1 つ作る</strong>
|
||||
<ul>
|
||||
<li>文字、画像、音楽、リズムなどを中心とした任意の軽量ゲームプレイで構いません。例：「単語を食べて詩を書く」「リズムタップ」「生成的ランニング」など。</li>
|
||||
<li>重要なのはビジュアルの豪華さではなく、AI がここで具体的に何を助けたのか、人間には困難または面倒な部分を何を解決したのかを明確に説明できることです。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
これが完全なチュートリアルです！すべての内容を完了し、自分のスネークゲームを構築するには <strong>4 時間</strong>かかるかもしれません。急ぐ必要はありません——探索、実験、そしてプロセスを楽しんでください。途中で理解できない概念に遭遇した場合は、以下の付録の関連部分を参照してください。
|
||||
</p>
|
||||
</el-card>
|
||||
|
||||
## 付録
|
||||
|
||||
<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">付録ナビゲーション</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
本章に関連する基本概念を整理しました：学習中に「フロントエンドとは何か」「Vibe Coding とは何か」などの疑問に遭遇したら、いつでもここに戻って参照できます。
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>付録 1：フロントエンド開発の知識は必要？</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">アプリケーション全体におけるフロントエンドの位置を理解し、「見える」部分を知る。</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>付録 2：Vibe Coding とは何か</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">「対話型開発」の核心理念を理解し、AI とどう連携するかを知る。</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" style="margin-top: 10px;">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>付録 3：モデルコンテキスト</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">「コンテキスト長」などよく聞くが混同しやすい概念を整理する。</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>付録 4：命令追従能力</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">モデルがなぜ「話を理解しない」ことがあるのか、より明確に書く方法を学ぶ。</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 12px; font-size: 12px; color: #909399;">
|
||||
ヒント：Ctrl/⌘+F でキーワードを検索できます。または、わからない段落を AI にコピーして、「完全に初心者にもわかるように」説明してもらうこともできます。
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## <span id="appendix-1">[付録 1：フロントエンド開発の知識は必要？](#appendix-nav)</span>
|
||||
|
||||
::: tip 💡 一言でまとめると
|
||||
コードを書く必要はありませんが、基本概念を理解すると AI に要件をより良く説明できるようになります。
|
||||
:::
|
||||
|
||||
<el-row :gutter="16" style="margin: 20px 0;">
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">👁️</span>
|
||||
<span style="font-weight: bold;">フロントエンド</span>
|
||||
<el-tag type="success" size="small">可視</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
ユーザーが<strong>見て、触れる</strong>すべてのコンテンツ
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>ウェブページのタイトル、テキスト、画像</li>
|
||||
<li>ボタン、入力フィールド、ドロップダウンメニュー</li>
|
||||
<li>ゲームインターフェース、アニメーション効果</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">⚙️</span>
|
||||
<span style="font-weight: bold;">バックエンド</span>
|
||||
<el-tag type="info" size="small">不可視</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
サーバー上で動作するデータ処理
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>ユーザースコアの保存</li>
|
||||
<li>ログイン認証</li>
|
||||
<li>レベルコンテンツの配信</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### フロントエンドの三種の神器
|
||||
|
||||
ブラウザは三つの「コード」を使ってページを構築します：
|
||||
|
||||
<el-tabs type="border-card" style="margin: 20px 0;">
|
||||
<el-tab-pane label="🏗️ HTML - 骨格">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>役割：</strong>ページ上に<strong>何があるか</strong>を定義する</p>
|
||||
<p><strong>例え：</strong>家の構造スケッチ（壁、ドア、窓の場所）</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code><button>クリック</button>
|
||||
<h1>タイトル</h1>
|
||||
<img src="photo.png"></code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="🎨 CSS - スタイル">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>役割：</strong>要素の<strong>見た目</strong>を制御する</p>
|
||||
<p><strong>例え：</strong>家の内装（色、素材、レイアウト）</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button {
|
||||
background: blue;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="⚡ JavaScript - 挙動">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>役割：</strong>ページを<strong>動かす</strong></p>
|
||||
<p><strong>例え：</strong>家の電気回路スイッチ（クリック後の応答）</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button.onclick = () => {
|
||||
alert('クリックされました！')
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
### コードがページになる仕組み
|
||||
|
||||
Web ページを開くと、ブラウザは三つのコードを順番に処理します：
|
||||
|
||||
**1. HTML —— ページ構造の定義**
|
||||
ブラウザはまず HTML を解析し、ページ上にどの要素（タイトル、段落、画像、ボタンなど）があるか、そしてそれらの階層関係を理解します。
|
||||
|
||||
**2. CSS —— スタイルの適用**
|
||||
次にブラウザは CSS ルールに従って、これらの要素にスタイルを追加します：色、サイズ、位置、間隔など、ページを見やすくします。
|
||||
|
||||
**3. JavaScript —— インタラクションの追加**
|
||||
最後に JavaScript コードを実行し、ページを「動かします」：クリックへの応答、フォームの送信、アニメーションの再生など。
|
||||
|
||||
**4. ページの表示**
|
||||
三つの連携結果が、あなたが最終的に見る Web ページです。
|
||||
|
||||
### モダンフロントエンドフレームワーク：HTML から React/Vue へ
|
||||
|
||||
前述の HTML、CSS、JavaScript はフロントエンド開発の「三種の神器」であり、すべての Web ページの基礎です。ただし、ページが複雑になると、これらだけでは課題に直面します：コードの保守が困難、反復作業が多い、データ同期が面倒など。
|
||||
|
||||
**モダンフロントエンドフレームワーク**（React、Vue、Angular など）は HTML/CSS/JS の上に構築され、開発をより効率的にします：
|
||||
|
||||
**1. HTML/CSS/JS（基礎段階）**
|
||||
ページ要素を直接操作し、シンプルなページに適しています。しかし、コード量が増えると、すべてのロジックが混ざり合い、保守が困難になります。
|
||||
|
||||
**2. jQuery（過渡期）**
|
||||
DOM 操作を簡素化し、コードをより簡潔にします。ただし、ページの状態を手動で管理する必要があり、データ変更時に対応する要素を自分で見つけて更新する必要があります。
|
||||
|
||||
**3. React/Vue（モダン期）**
|
||||
コンポーネント化と状態駆動の設計を採用：
|
||||
- **コンポーネント化**：ページを独立した再利用可能なモジュール（ボタン、カード、ナビゲーションバーなど）に分割
|
||||
- **状態駆動**：データが変更されると、フレームワークが対応する UI を自動的に更新し、手動操作が不要
|
||||
|
||||
::: tip 💡 簡単に理解すると
|
||||
- **HTML/CSS/JS** = 基礎材料（レンガ、セメント、鉄筋）
|
||||
- **React/Vue** = 建築フレームワーク（家を建てるための規範とツールを提供）
|
||||
|
||||
AI 補助プログラミング時代では、フレームワークのすべての詳細を深く理解する必要はありません。基本概念を理解するだけで、自然言語の説明で AI にコード生成を依頼できます。
|
||||
:::
|
||||
|
||||
### Vibe Coding において
|
||||
|
||||
**核となるポイント：コードを書く必要はなく、説明できれば十分です。**
|
||||
|
||||
フロントエンドの概念を理解した後、次のように AI に要件を説明できます：
|
||||
|
||||
> "React でリーダーボードページを作って。右側にスコアリストを表示し、行をクリックすると下にプレイヤー詳細を表示する。シンプルでモダンなスタイルに。"
|
||||
|
||||
HTML、CSS、JavaScript などのフロントエンド基礎知識をさらに深く理解したい場合は、[Web 基礎付録](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive)を参照してください。フロントエンド技術の発展の歴史を知りたい場合は、[フロントエンド進化史付録](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks)を参照してください。
|
||||
|
||||
## <span id="appendix-2">[付録 2：Vibe Coding とは何か](#appendix-nav)</span>
|
||||
|
||||
> 💡 Vibe Coding とは？コンピュータ科学者 [Andrej Karpathy](https://karpathy.ai/)（OpenAI の共同創業者の一人、テスラ元 AI 責任者）が 2025 年 2 月に **vibe coding** という言葉を提案しました。この概念は、LLM に依存するコーディング方法を指し、**プログラマーが自然言語の説明を提供することで、手動でコードを書くことなく動作するコードを生成できるようにします。**
|
||||
|
||||
|
||||
|
||||
文字通り、Vibe Coding は「話すことで開発する」方法として理解できます。その核となる変化は：もう自分で一行一行コードを書いたり、構文を調べたり、バグを修正したりする必要はなく、自然言語で欲しいものを直接説明するだけです。例えば：
|
||||
|
||||
「ログインページが必要です。携帯番号の入力フィールドと認証コードの入力フィールドを付けてください。」
|
||||
「ログイン成功後、トップページにリダイレクトし、右上隅にユーザー名を表示してください。」
|
||||
「シンプルなスネークゲームを作ってください。キーボードの方向キーで操作できるように。」
|
||||
|
||||
大規模言語モデル（LLM）がこのような説明を自動的に実際に動作するコードに翻訳し、対応するページ、ロジック、データ構造を生成します。結果を見た後、自然言語で修正意見を伝えます。例えば「ボタンをもう少し大きく」「背景をダークカラーに」「スコアを記録してリーダーボードを表示」など。AI は引き続きあなたの要件に応じて実装を調整します。
|
||||
|
||||
このモードでは、プログラミング言語を先に学んでからコードを書く必要はありません。主な精力を次のことに注ぎます：何を作るかを明確にする、結果を見て「どこが違うか」を判断する、新しい修正を提案する。AI はこれらの上位のアイデアを具体的な実装に落とし込み、機械的で反復的なコーディング作業を大幅に削減します。
|
||||
|
||||
Vibe Coding の詳細についてはこちらを参照してください：[https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
|
||||
|
||||
Karpathy の共有内容の詳細についてはこちらを参照してください：[https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
|
||||
|
||||
### Vibe Coding の達人を装う方法
|
||||
|
||||
実際、本格的な vibe coding の過程では、複雑なプロンプトをあまり使いません。開始時にプログラム全体に対して具体的で適度に複雑なプロンプトを提供する必要があるかもしれませんが、その後の各ステップでは、次のような種類のプロンプトだけが必要です：
|
||||
|
||||
```
|
||||
"コードにバグがあります、修正してください。"
|
||||
"部分コードは不要です。修正後の完全なコードをください。"
|
||||
"あなたのコードにはまだ問題があります。"
|
||||
"もう一度修正して、修正後の完全なコードをください。"
|
||||
"さっきまで動いていたのに、なぜ今動かないのですか？"
|
||||
"私の意図を理解していないのですか？元のコードを変更しないでください。"
|
||||
"デバッグ機能を追加しないでください。"
|
||||
"私が依頼していないことはしないでください。"
|
||||
"私が実装を依頼した機能はどこですか？"
|
||||
"私の言葉がわからないのですか？"
|
||||
"関数を一つだけください。"
|
||||
"以前のコードを参照するように言ったはずです。"
|
||||
"不要なコメントを追加しないでください。"
|
||||
"元のコードの基本ロジックを変更しないでください。"
|
||||
"コードを修正してください。"
|
||||
"私のコードをベースに修正..."
|
||||
"変数名を変更しないでください！！！"
|
||||
"元の関数名を変更しないでください！"
|
||||
"私の変数を勝手に変更しないでください。"
|
||||
"追加機能を追加しないでください。"
|
||||
"フレームワークだけを生成するのではなく、完全なコードを生成してください。"
|
||||
```
|
||||
|
||||
これは少し誇張されているように聞こえるかもしれませんが、実際には、これらが日常の作業で使用するプロンプトです。大規模言語モデルの**コンテキスト長の制限**のため、または**命令追従能力**があまり強くないため、モデルは対話の早い段階で議論された内容を忘れることがあります。vibe coding では、長いコンテキストのモデルを使用する傾向があり、命令追従能力の強いモデルを使用します。これら二つのランキングや指標で判断できます。
|
||||
|
||||
または、トレーニングデータセットのスタイルにより、大規模モデルはそのトレーニングデータのスタイルで回答する傾向があります。例えば、一部の人は真面目に話し、一部の人は多くの修飾を加え、一部の大規模モデルはコードに多くのコメントや不要なモジュールを追加するのが好きです。
|
||||
|
||||
## <span id="appendix-3">[付録 3：モデルコンテキスト](#appendix-nav)</span>
|
||||
|
||||
モデルコンテキストは、AI の短期記憶として理解できます。これは、現在の一回の対話またはタスクにおいて、モデルが「見て」および「覚えて」いるすべてのテキストコンテンツを指し、以前に入力した質問、システムが提供した説明、関連資料などを含みます。
|
||||
|
||||
コンテキストがあるからこそ、AI はあなたが前の内容に続いて質問していることを理解し、一ラウンド一ラウンド、途切れのない自然な対話を行うことができます。コンテキストがなければ、あなたの各文はモデルにとって全く新しい質問のように見え、以前に何を言ったかを知ることができず、対話を続けることはできません。
|
||||
|
||||
各モデルには独自の有効コンテキスト長（context window）があります。この長さは通常 token（大まかに「単語の断片」の単位と理解できます）で測定され、現在の主流モデルはほぼ 32k～128k token です。コンテキストが長いほど、モデルが一度に「読める」内容が増えます。例えば：
|
||||
|
||||
- 長めの論文やレポートを一度に読む
|
||||
- 同じ対話ラウンドで複数の資料やケースを参照する
|
||||
- モデルに以前の数ラウンドの複雑な議論の結論を覚えさせる
|
||||
|
||||
入力内容がモデルのコンテキスト制限に近づくまたは超えると、次のような一般的な現象がよく発生します：
|
||||
|
||||
- モデルが長いテキストの細部や重要情報を忘れ始める
|
||||
- 対話が進むにつれて、話題が当初の目標から徐々に逸れる
|
||||
- 同じ資料に対する異なる質問間で、参照内容に不一致が生じる
|
||||
|
||||
これらの現象は、モデルが突然「バカになった」わけではなく、コンテキスト容量が使い切られたり使い切れに近づいた後に生じる自然な結果です。
|
||||
|
||||
実際の使用では、コンテキストを可能な限り長くしたいと同時に、次の点も意識する必要があります：
|
||||
|
||||
- コンテキストが長いほど、消費する計算リソースが増える
|
||||
- 対応する呼び出しコスト（費用）も増加する
|
||||
|
||||
したがって、AI アプリケーションを設計する際には、モデルに十分な量を読ませることと、コストの制御・効率の向上との間でバランスを取る必要があります。例えば：
|
||||
|
||||
- 本当に長期保存が必要な情報を要約してからモデルに渡す
|
||||
- 不要な詳細情報を、一度にコンテキストにそのまま入れ続けない
|
||||
- 外部ナレッジベースなどの方法を使い、「長期記憶」をシステムに任せ、モデルのコンテキストに無理に入れない
|
||||
|
||||
## <span id="appendix-4">[付録 4：命令追従能力](#appendix-nav)</span>
|
||||
|
||||
命令追従能力とは、モデルがあなたの命令を理解した後、正確かつ完全にあなたの要求通りに実行できるかどうかを指します。質問に答えるだけでなく、指定されたフォーマット、スタイル、手順でタスクを完了することも含みます。
|
||||
|
||||
例えば、以下はすべてモデルに明確な要求がある命令です：
|
||||
|
||||
- この記事を3つのポイントに要約する
|
||||
- 正式で礼儀正しい口調で返信メールを書く
|
||||
- この単語を英語に翻訳し、それぞれ例文を作る
|
||||
- 記事から著者、日時、主要イベントを抽出する
|
||||
|
||||
命令追従能力の強いモデルは、通常次の特徴を備えています：
|
||||
|
||||
- 要求された数量通りに出力する
|
||||
例えば3つのポイントに要約するよう依頼すれば、5つを出力することはありません。
|
||||
- 指定されたすべての要素をカバーする
|
||||
例えば著者、日時、イベントの抽出を依頼すれば、そのいずれも漏らしません。
|
||||
- 指定されたフォーマットとトーンを遵守する
|
||||
例えば正式なトーンを依頼すれば、あまり口語的な返信を出力しません。
|
||||
- 不要な追加拡張を行わない
|
||||
例えば翻訳と例文の作成だけを依頼すれば、無関係な説明を大量に出力しません。
|
||||
|
||||
実際の応用では、強い命令追従能力は非常に重要です。理由は次のとおりです：
|
||||
|
||||
- 安定性の向上：同じ命令を異なる時刻で複数回実行した場合、出力構造と動作パターンがより一貫し、ランダムな逸脱が起こりにくい
|
||||
- 再現性の向上：プロンプトを製品やプロセスに設定する場合、モデルがおおよそどのように応答するかを予測でき、テストと反復が容易
|
||||
- システム統合の容易さ：モデルの出力が期待されるフォーマットに合致すれば、バックエンドプログラム、ワークフロー、その他のツールとの自動接続が容易
|
||||
|
||||
したがって、大規模言語モデルを選択・評価する際には、賢いか、知識カバレッジが広いかだけでなく、命令追従能力にも特に注意する必要があります。産業級アプリケーションにとって、安定して正確に命令を実行できることは、たまに驚くような回答を出すことよりもはるかに重要です。
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="学びを続ける"
|
||||
description="「ゲーム化体験」から出発し、ローカル開発とプロダクト実践への継続を推奨します。"
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1 @@
|
||||
../../../zh-cn/stage-1/appendix-a-product-thinking/images
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user